Image
Hi,
I hope whoever reads this is in the best of health and spirit. I am facing some difficulties in positioning the divs. I want the suggestion box of highlighted div to be on top of the horizontal scroll.
I am working on React Js. I am adding my code down here. I really appreciate your help. Thanks
<td>
<div
style={{
width: "125px",
marginTop: "0px",
marginLeft: "5px",
marginRight: "5px",
}}
>
<div style={{position:"relative"}}>
<div
id={"myAutocompleteParentDiv" + this.props.id}
style={{
width="100%";
position="relative"
}}
>
<input class="provider-form" autocomplete="off" id="myAutocompleteID" type="text" name="searchValue" placeholder="" value="" style="margin-left: 0px;">
<span style="position: relative; right: 35px; top: 5px;">
<i class="my-autocomplete-search-icon"></i>
</span>
<div id="myAutocomplete-list-cptCode0" class="myAutocomplete-items" style="max-height: 190px; overflow-y: scroll; background-color: white; width: 125px;">
<div title="searchValue" id="undefined">
<strong>822</strong>32<input type="hidden" value="82232">
</div></div>
</div>
</div>
</div>
</td>
You may add z-index property to your element that you want to raise to top. In your screenshot I cannot tell whether it's in a frame or iframe. If it's in a frame, no matter what trick you do on CSS the element will not be rendered outside it's own frame. Another possible problem is that the element is cropped, in which case you may need to set overflow property.
Ref:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Related
Here is my code
<div style=" background-color: yellow; height: 350px; padding-top: 45%;">
<p-button
type="button"
(click)="visibleSidebar1 = true"
icon="pi pi-arrow-right">
</p-button>
<div style="background-color: green; height: 250px;">
<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
<h1 style="font-weight:normal">Left Sidebar</h1>
</p-sidebar>
</div>
</div>
I have use sideBar inside the child element But it is showing in outside the child element. like this sidebar in outside
But i want to show the side bar inside the child element (green area). like this this is what i expect
Have any way to achieve this? my stackBlitz
Please define below CSS properties in your "`\src\styles.css" file
p-sidebar div.p-sidebar
{
position: relative !important;
}
I'm trying to build an amp page for my site.
I am trying to achieve a responsive form with a number of range inputs.
So that when the screen size changes they stack nicely, much as I would when using bootstrap.
The code I have is (as a single example);
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
Now when I add the layout attribute to the div. All elements inside disappear. When I inspect the html it seems to be applying the css;
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
color: transparent!important;
}
Now as far as I can see from reading the docs I am compliant with the amp specification, however I must be doing something wrong here?
Can anyone point me in the right direction as to what I am doing wrong an dhow I Can achieve the layout above?
#Matthew-Flynn
The text was disappearing because of color: transparent!important;. I removed that in the code snippet below. But I'm not sure that answers your positioning question: could you build out this snippet a little more and I'll take a look?
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
}
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
I'm developing a mobile app, and I'm having an issue with relative divs going above the top and bottom header that are fixed with a z-index. I did some research and tried to put a z-index in the relative div, but it did not fix anything.
Here's the Relative Div:
<div class="pure-u-1-3">
<div class="TopMobBlock">
<div class="TopMobName">Open Slot</div>
<center>
<div class="TopMobImage">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Open&w=100&h=100" height="100%" width="100%" />
</div>
</center>
<center><input type="submit" class="TopMobBlank" value="Claim Bonus" /></center>
<center><input type="submit" class="TopMobBlank" value="Send Energy" /></center>
<div class="TopMobOpenBlock">
<div class="TopMobOpenText">Open Slot</div>
</div>
</div>
</div>
Here's an edited version to just show the issue:
JsFiddle
Since your relative elements are using z-indexes, your fixed position elements will need to have a greater index to appear on top.
In your example JSFiddle, if I add z-index: 3; or greater to .StatsBar and .TabsBar it seems to fix it.
From your example I can see that StatsBar and TabsBar are fixed but without a z-index.
If you always want them to appear above everything else try adding a z-index value to them. For example 20.
Then add .ActivePage { z-index: 10; position:relative; }.
This will keep your header and footer always at the top of your ActivePage div.
Add position: relative; and z-index: -1; to .pure-u-1-3:
.pure-u-1-3 {
width: 32%;
width: 31.9690%;
position: relative;
z-index: -1;
}
https://jsfiddle.net/3Ljtywov/1/
Is it possible to put a checkbox over an image without using 'top' and 'position:absolute' ?
<div class="main">
<img src="http://www.standard.co.uk/incoming/article9760552.ece/binary/original/Rooney.jpg" class="image"/>
<input class="checkbox" type="checkbox" value="1" />
</div>
JSFIDDLE
There's a few possible ways. If you want to avoid top and absolute you could position it using negative margins. Or if you simply want checkbox to be checked when the image is clicked you could wrap the image in a label and tie the label to the checkbox. I've done both here.
HTML:
<div class="main">
<label for="checkbox">
<img src="http://www.standard.co.uk/incoming/article9760552.ece/binary/original/Rooney.jpg" class="image" />
</label>
<input id="checkbox" type="checkbox" value="1" />
</div>
CSS:
.image {
height: 200px;
width: 250px;
}
input {
display: block;
margin-top: -200px;
position: relative;
}
A quick explanation: position: relative allows the checkbox to sit on top of the image (z-index won't cut it here), the negative margin-top pulls it up onto the image, and display: block makes it so that the top margin can be applied (I'm not sure why it doesn't work on inline elements.) I expected to have to use negative margins on margin-left as well, but it seems to naturally move to the left on it's own. I'm not sure why for that either. But it does work and it does not need position: absolute or top.
I have a 'background graphic' which is basically a design with two premade 'white boxes' where I would like to position my login/password textboxes. Stubbornly they refused to move from the top left of that image.
I'm using 960 grid system but I think the question probably isn't affected by that.
I've tried various things - trying absolute positioning, padding/margin settings. Even in visual studio I used the menus (gasp!) to select position as absolute and dragged the box down. In the designer it looked to be in the right spot, css had been added but in the browser, there it was at the top left again. Any suggestions before my computer learns about a new type of 'windows'?
My goal is to be able to specify the x,y coordinates of where each textbox should be. I'd rather not resort to slicing and tables and all that stuff.
The css is the standard grid960 setup, I won't post it due to size. For the box containing the login image:
#loginPanel {
background: url('/images/Main_Login2.png');
height: 300px;
}
[have put various positioning settings against #loginPanel and #txtLogin but no luck so far]
The markup:
<div id="test" class="grid_2 ">
<br />
</div>
<div id="loginPanel" class="grid_8 ">
<asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>
</div>
Any help appreciated!
Mark
Lots of views but no news. I figured this would be an easy one. Anyway, I've found the solution, not sure why the absolute positioning didn't work for me initially but I think the secret was positioning the container Divs rather than using the positioning on the textbox itself. The below code works a charm, hope it helps someone.
<div id="loginPanel" class="grid_8 push_2">
<div style="position: absolute; top: 122px; left: 240px; width: 200px;">
<asp:TextBox ID="TextBox1" runat="server" Height="16px" Font-Size="Small" Width="190px"
BorderStyle="None"></asp:TextBox>
</div>
<div style="position: absolute; top: 152px; left: 240px; width: 200px;">
<asp:TextBox ID="txtPassword" runat="server" Height="16px" Font-Size="Small" Width="190px"
BorderStyle="None"></asp:TextBox>
</div>
</div>