Looking at the CSS specification of the W3C and observing the rendering of my own solution I have come to only one conclusion:
If I have dialog window (absolutely positioned) with an input field (relative) in it and usual autocompleter script (usual includes ul list beyond input (absolutely pos.)) - I can't make a dropdown list of autocomplete values visible normally and place it over buttons and borders of parent dialog window?
It’s make me feel bad.
Can any one debunk this regrettable result?
Sorry for my English.
upd2:
<div id="modal-window" style="display: block; position: absolute; z-index: 9000; visibility: visible; opacity: 1; left: 530px; top: -58px;">
<div id="modal-window-body">
<input id="city" name="city" />
<ul class="autocompleter-choices" style="position:absolute; z-index: 19999; visibility: visible; opacity: 1; left: 8px; top: 406px; width: 126px; overflow-y: scroll; height: 189px;">
<li class="autocompleter-selected">
<span class="autocompleter-queried">
N
</span>
amibia
</li>
</ul>
<div id="modal-window-buttons">
<span class="button">
ok
</span>
<span class="button">
cancel
</span>
</div>
</div>
</div>
result:
Принимаю ответы на русском языке так же. Очень неприятная загвоздка вышла. Надо решить.
z-index can only be given to positioned elements. Your ul class="autocompleter-choices" seems not to be positioned (if it's true that you're only using inline styles in this doc). Try to position it absolute or relative.
My only guess, based on the minimal information given, is that #modal-window-body has a specified height and overflow:hidden. This explains why it never fully shows and the biggest part of your problem. However, it doesn't explain why it falls under the buttons. Again, my guess is #modal-window-buttons is position: absolute; bottom:0; z-index: higher-that-yours.
I would expand your question to include more information than the inline styles applied during javascript manipulation. Only knowing the current state of the css can we assist further.
Related
What i'm trying to achieve
example of the closed version /
example of the opened version
At the top of the page in a 'fixed' header, i have a 'search' button next to a 'toggle' for the main menu. The header-search div (magnifying glass) is positioned next to the menu toggler (green). A form is currently positioned 'absolute' within the header to take up the full width of the header minus the padding on each side and its controls (search and toggler) as follows:
styles from header
.header {
top: 0;
left: 0;
width: 100%;
position: fixed;
background-color: var(--color-primary-700);
}
styles from header__aux
.header__aux {
display: flex;
column-gap: 1rem;
flex-flow: nowrap row;
}
.header-search {
display: block;
position: static;
}
.header-search__form {
top: 1.5rem;
height: 4rem;
overflow: hidden;
position: absolute;
left: var(--g-gutter);
width: calc(100% - (7rem + (var(--g-gutter)*2)));
}
.header-search__form-label {
top: -99.9rem;
left: -99.9rem;
color: inherit;
position: absolute;
}
.header-search__form.is-active
.header-search__form-input {
transform: translateX(0%);
}
.header-search__form-input {
width: 100%;
height: 4rem;
padding: 0 1.2em;
transform: translateX(100%);
border: .2rem solid #8097b3;
border-top-left-radius: 2rem;
border-bottom-left-radius: 2rem;
transition: transform 1s ease-in-out
background-color: var(--color-primary-700);
}
A input field inside this form is given 100% width and then using transform: translateX(100%) pushed completely to the right outside the overflow of the form (which retains it's width as set above). When a user presses the 'search' button a class is-active sets this transform: translateX(100%) to 0 and the input field should slide (from the right) to it's original position 100% of the width as seen in this image.
What this looks like in HTML
<header class="header section">
<div class="header__container container">
<a class="header__brand" href="#" aria-label="x">
<!-- svg brand -->
</a>
<div class="header__navs" id="headerNavs">
<div class="header__mask">
<ul id="headerMenu" class="header-menu">
</ul> <div class="header__langs header-langs">
Language
</div>
</div>
</div>
<div class="header__aux">
<div class="header__search header-search">
<button aria-label="Open of sluit het invoerveld voor een zoekopdracht" class="header-search__toggle" id="headerSearchToggle" aria-pressed="false" role="button" tabindex="0">
<i id="headerSearchIcon" class="far fa-search"></i>
</button>
<form class="header-search__form" action="/" id="headerSearchForm" role="search" method="get">
<label class="header-search__form-label" for="headerSearchInput">Zoeken</label>
<div class="header-search__form-slide">
<input placeholder="Zoeken …" required="" class="header-search__form-input" id="headerSearchInput" minlength="2" type="search" value="" name="s">
</div>
</form>
</div>
<a aria-label="" class="header__toggle header-toggle" aria-controls="headerNavs" aria-expanded="false" id="headerToggle" href="#">
Toggle
</a>
</div>
</div>
</header>
The problem
When opening the 'search' the input immediately jumps to the end of the animation which is seen in the example of the opened version (top) and then continues moving left, constantly correcting it's position back to what is seen in the image causing a weird 'flickering' effect usually in this position. Sliding the input 'back' to the right works perfectly.. What's even weirder is that it sometimes does work correctly for a few attempts once i've been on the page for a while. Then suddenly it breaks again.
What i've tried
Different types of browsers, including checking it on my own mobile device (not in the dev tools)
Giving the input the same fixed width as the parent
Removing a translateY on the parent and reverting to 'top' top position it in the vertical center
Adding 1 or multiple parents to the input to force it to inherit that width
As mentioned in a comment, adding transform:translateZ(0.1px); to force rendering using the GPU
What works, but i can't explain
Removing the overflow on the parent form element works and allows the animation to play smoothly, but that shows the input behind the element as seen in this image
I can think of some ways to make this look better, but i just really want to know what i'm missing. I believe i've done these types of simple animations 1000s of times now. A parent with overflow, hiding a child that's translated over.. or perhaps i'm mistaken. Hopefully someone can make sense of this - many thanks if you've taken the time to do so :)
As a beginner this bug seems pretty strange and since i can't put all code here(large) I will be happy to even hear where to begin.
If more code needed I will provide.
I have this :
<div class="labeledInput">
<label class="font">Tap To Add Your Photo:</label>
<div class="imagePreview logoPreview" id="logoPreview" style="background-image: url(images/Holder.png);">
<input type="file" id="logoPreview">
</div>
</div>
If I remove this row (and only this) :
<div class="imagePreview logoPreview" id="logoPreview" style="background-image: url(images/logoHolder.png);">
or even remove the class imagePreview from it, or set it without a class at all:
<div class="logoPreview" id="logoPreview" style="background-image: url(images/logoHolder.png);">
Then another button that is far away , turns to be a file upload button when clicked, instead of just a button that scroll (using JS) when clicked.
This is the affected button(not related at all to the code above) :
<div class="nextButton">
<input type="image" src="https://picsum.photos/50/50" onclick='nextButton()'/>
</div>
EDIT :
I found that in my CSS, if I remove this style - the bug will not happen :
.imagePreview img
{
max-width: 100%;
pointer-events: none;
}
//***** this one if removed solve the problem but make an ugly button*****
[type="file"] {
cursor: pointer;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
add position as relative to parent class
.imagePreview{
position: relative;
}
I'm trying to give a button slide in effect just for a mock up using bootstrap lists and overlays. I want to make it look like the button is coming in from the right. Here is the code for what Im trying to do. I'm trying give the li element a positive relative and z-index so it is "above" the .pull-right div.
Any idea what I could do for this to work? The button labeled Test should look like it is coming in from the right, therefore half the text should be visible and half should be not.
As per my understanding I think you might have to hide the overflow of the li
So, I added a class to your html structure
<ul class="list-group">
<li class="list-group-item pos-rel overflow-x-fix">
<p class="inline-block">Test</p>
<div class="pull-right pos-abs">
<button>Text</button>
<button>Test</button>
</div>
</li>
</ul>
And changed the CSS like this
inline-block{
display: inline-block;
}
.pos-rel{
position: relative;
z-index: 999;
}
.pos-abs{
position: absolute;
right: -2%;
top: 20%;
z-index: 1;
}
.overflow-x-fix {overflow-x: hidden;}
Here is the example
Please check this image
I want when clicking on the + sign inside the red circle, to make a div shows. this div have many check box.
I made the div already. but I didn't know what is its style to be above the text and above the white space in the image
I am sorry if i couldn't understand my mean.
<h3>html</h3>
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
the div is id = div1 ,which I didn't show its content because that doesn't matter for the answer, but I dont know where to put it.
I would like to have the div like this
kindly help
If you need to make "glued" child, you have to define relative position to the parent, absolute position and z-index to child(ren).
#div1 {
position: absolute;
top: 32px;
right: 0;
}
jsfiddle
You'll need to use two main CSS properties. position: absolute to place it up there and z-index to place it 'above' other items visually. In order for position: absolute to work, you'll also need to set a parent to position: relative.
The dropdown is there by default but hidden. When the + is clicked, a class is toggled on the menu to show/hide it.
The main bits:
HTML:
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<a id="DropdownSeviceLink" href="#">+</a>
<div class="menu">
lkj sldkj sldkj slkdj slkdj
</div>
</div>
CSS:
.menu {
display: none;
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
.menu.shown{
display: block;
}
.chartHeaderClass {
position: relative;
}
JS:
$('#DropdownSeviceLink').on('click', function(){
$(this).parents('.chartHeaderClass').find('.menu').toggleClass('shown');
return false;
});
Here's an ugly codepen to get you on the way. http://codepen.io/anon/pen/poqjK
I am trying to make a link appear when the mouse is hovered above a div, but i can't get it to work.
HTML:
<div class="rendezvous" style="position: relative">
<img src="http://placehold.it/50x50" />
<div class="remover" style="width: 32px; position: absolute; top: 0px; left: 15px; opacity: 0;">
Link
</div>
</div>
CSS:
.rendezvous:hover .remover {
opacity: 0.5;
}
JSFiddle: http://jsfiddle.net/6uLTr/
The curious thing is that the css selector works, i can test it by setting the border for example. But the same method doesn't work when i set the opacity. What am i doing wrong here?
rules in the style attribute have higher precedence than rules defined in author stylesheets. You can either use opacity: 0.5 !important (not the best idea) or define the other rules in the stylesheet as well.
http://jsfiddle.net/6uLTr/1/