So, on my web app's home page I have a birthday (mm/dd/yy) select fields however the drop down is being cut off by the next section of the homepage's background.
Here's the relevant CSS styling for the select:
.selectify .option {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 0 none;
color: #999999;
cursor: pointer;
padding: 5px 20px;
}
And an image:
How can I get the drop down to go over the secondary background section?
Cheers!
After being given the link:
.banner has a style of overflow:hidden;. This is what is causing it to hide.
Delete it from the styles of banner.
Then, you have a class called container middel-class. Change this to just middel-class.
Then put container INSIDE middel-class. eg:
<div class='middel-class'>
<div class='container'>
.. <!-- rest of code as normal -->
</div> <!-- end of container -->
</div> <!-- end of middel-class -->
Also, it's middle, not middel, but it doesn't really matter :P
I cant say for sure without any code example of full place. This bug can be for few reasons
1.) Somewhere on a parent div (where located dropdown) you are using overflow:hidden - try delete it and see what happens
2.) also there is can be wrong z-index directly on the dropdown
Related
I am using Element's Notification component but when it is activated the dialog appears but seems to be "behind" the grey background that is also introduced. Clicking anywhere removes the grey background and allows the interaction with the dialog box but without the greyed out background that should be filtering out the noise of the normal screen. Here is a short video that shows the various states:
video
The code to put the component in as follows:
<div class="add-address" #click="showAddDialog = true">
+
</div>
</div>
<el-dialog
title="Add New Address"
:visible.sync="showAddDialog"
width="30%"
:before-close="newAddressDialogClosed">
<span>Postal Address</span>
<el-input v-model="newAddress" type="text"></el-input>
<span slot="footer" class="dialog-footer">
<el-button #click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" #click="dialogVisible = false">Confirm</el-button>
</span>
</el-dialog>
I have used the inspector to poke around at the CSS but I haven't yet understood what's causing this from a CSS perspective nor a Vue/Element perspective. Any help would be appreciated.
I have further analyzed the HTML/CSS and the component appears to introduce two separate blocks in the DOM:
The lower block is the grey background which you'd expect to "blur" the page and focus attention on the modal. It, however, is in front of the dialog. Also of interest is that clicking anywhere seems to target the grey background and dismiss it but in so doing it also has a subtle effect on the placement on the dialog box as can be seen here:
Note that the z-index of the dialog box is greater than the background which intuitively makes sense to me but I'd have thought this would have put the dialog box on top. Guess that's not all there is to this.
I have hacked a work-around for now by changing the background to display: none and then adding the following HTML directly before the modal dialog in the DOM:
<div class="modal-background" v-if="showAddDialog"></div>
These seems to validate my underlying suspicion that placement within the DOM tree is important and the component's attempt to place the modal background at the very end of the DOM is somehow problematic.
I had the same issue and also found changing the z-index of the dialog had no effect. This was occurring when I had nested Element.Eleme.io elements, which appears to be the case for you also.
The z-index is not quite as simple as "higher always means on top". Elements are grouped into different stacking contexts; it is not possible for an element in a lower stacking context to appear above an element in a higher stacking context. Therefore depending on where the different elements were rendered in the DOM, they can land themselves in different stacking contexts, and are destined to remain at the same relation to one another, no matter how much the z-index has changed. (See https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ for a more detailed explanation on the z-index).
Examining with Chrome dev tools, I found that the obscuring modal is not rendered in the same place as the dialog; in fact it is appended to the body, i.e. on the outer reaches of the application, which appears to be the reason they are not within the same stacking context. There is a quick fix; the dialog element has a property "modalAppendToBody". If true, the modal is rendered to the body, and if false it is rendered to the parent element of the dialog. By specifying this as false I managed to solve the issue:
<el-dialog
title="Add New Address"
:visible.sync="showAddDialog"
width="30%"
:before-close="newAddressDialogClosed
:modalAppendToBody="false">
</el-dialog>
you can use the CSS property called z-index
either any object which you want to set to back ? you just have to set z-index: -1; // or more
or you want to set any object on to the front of another ? you just have to set z-index: 1; //or more
Check the Snipet For More Info :
.a {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.b {
margin-top:150px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> I am on Image</h1>
<img class="a" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">
<br>
<br>
<br>
<br>
<h1> Image is on me</h1>
<img class="b" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">
</body>
</html>
I have a presentation set up with reveal.js which is meant to be used unattended. So, I want to be able to show a little footer (or another link somewhere) on all slides that points to an 'Information Slide' with data about the author, how to use the slides etc.
(This is to aid people who don't really know how to use reveal.js as well as to show authorship information in detail.)
I have not been able to find anything in the documentation and there does not seem to be a callback which I can utilize.
This works for me (aligns to left edge as I use built-in controls on right).
Add this to your css:
.reveal .footer {
position: absolute;
bottom: 1em;
left: 1em;
font-size: 0.5em;
}
And in your html:
<div class='reveal'>
<div class='footer'>
Use left and right arrows to navigate
</div>
...
If you want the footer to disappear as soon as user navigates (i.e. it should only be shown on first slide loaded because it is just a reminder), then add this to the end of your html:
<script>
// displayed upon load, hides when slide changes
Reveal.addEventListener('slidechanged', function(event) {
document.querySelector('.reveal .footer').style.display = 'none';
});
</script>
In order to get a fixed content in the PDF export (on all slides) you could find this answer useful.
I have a div with divs inside. The outer one has overflow-y: auto;, so with many internal items the right scrollbar appears. After doing $('#container').selectable(); when I press left mouse button over the scrollbar, it doesn't scroll, but a dotted frame for selecting is shown.
I have found this solution: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows
Unfortunately, it doesn't work for me, because when I scroll to the bottom, the items stop being selectable. (Though the top ones continue). So, the question is: how make the scrollbar... mmm... a scrolling bar, without splitting the container into 2 divs.
Well, it seems to be all browsers problem: when you click on a scrollbar, a mouse event is fired. This is the real problem, jQuery UI just doesn't solve it. Let's fix it on our own in the jQuery UI .js file (not applied to the min version as it should be obfuscated AFAIK).
Add this condition
if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
return;
right after the
_mouseDown: function(event) {
I have seen a lot of such hacks with HasScrollbar() detectors, but don't get why didn't they just sum up client width (that is without scrollbar) and offset to make it relative to the document and compare with pageX. For me it works perfectly.
Use a wrapper div for this , Its working fine for me.
.selectable-wrapper { border-radius: 5px; min-height: 200px; max-height: 200px; overflow-y: auto; border: 1px solid #D1D1D1;}
.selectable { list-style-type: none;padding: 5px;}
<div class="selectable-wrapper">
<ul class="selectable">
</ul>
</div>
I have a page on a project I'm creating for class where I wanted to align an image in the left side, with the text to the right aligned in the middle of the image. Instead of using html elements, I decided to try an internal CSS div elements within my external CSS. My problem is that I can't get them to align correctly vertically. I have the horizontal alignment, but the text either appears one line above or one line below the image. I tried the techniques included in this posting, but they didn't fix my problem. Align <div> elements side by side
Here is my internal CSS.
<style type="text/css">
/* left div holding the image */
#left {
width:170px;
align:left; }
/* right div to hold the text */
#right {
margin-left: 200px;
text-align:left; }
</style>
Here's the HTML
<div id="content">
<br/>
<br/>
<br/>
<blockquote>
<div id="right">Check back soon. Click here to receive an email when the site becomes available.</div><div id="left"><img src="images/construction-clipart.jpg" border="1" alt="Page under construction" /></div>
</blockquote>
</div>
Can you help me figure out how to make these align? To view how it is rendering, please visit my student project site at http://www.student.nvcc.edu/home/ligomes/TwoWiredChicks/Browse.html.
Thanks!
Finally, I hope this helps now. All you have for the right css is:
#right {
position: absolute;
margin-left: 200px
}
I've got the following:
<div class="tile ui-widget-content">
<h3 class="ui-widget-header">Resize me</h3>
You should see a ghost outline.
</div>
and:
$('.tile').resizable({
ghost:true
});
And it resizes, but I don't see a semi-transparent part of the element.
I'm copying from the docs.
The only difference I can see is that you are accessing the element from its class name rather than id. Have you tried using and id instead?
Edit: Just want to make sure you've also added css for the hover?
.ui-resizable-ghost { border: 1px dotted gray; }