I've converted a bootstrap date module to use only Angular(still in the middle of the conversion). Here is the demo page with the behavior I want to fix.
Click on the input field under "Your Date Range Picker" to see the daterangepicker. I've attached a screenshot of what you should see:
The issue I'm having is that the wrapper(div.daterangepickerdropdown-menu.opensright.ltr.show-calendar) is set to width:auto, but the three child elements, ranges, left calendar, and right calendar are set to float:left. For some reason they end up wrapping so that they stack vertically, and I can't figure out why they aren't side by side horizontally. I've tried playing with clears, setting overflow:hidden to the wrapper, and nothing seems to work. I've spent 4+ hours with the chrome debugger playing with css rules and can't get the wrapper to widen as much as necessary to put all three child elements horizontally.
For a comparison of what it should look like this.
You have nested your dropdown menu within a div with class col-md-4, which has a defined width.
The working demo has placed the dropdown menu outside of this column.
Even though you are positioning it absolutely it is still inheriting the max-width of the column. (you can see this by setting the dropdown menu width to 50%)
You can solve this by changing your HTML structure and positioning your dropdown menu in a similar way to the demo, or by overriding the width using a fixed setting which will adequately fit the child elements, e.g. width: 170%.
The problem here is the following container:
<div class="col-md-4 col-md-offset-2 demo"></div>
You should remove position-relative from the above element so that your date-picker does not inherit properties from it.
Alternatively, you can apply position: relative to the <div class="row"></div> element just above the .demo element and align your date-picker accordingly.
Related
I have two components in a page, a position fixed element which covers the browser window which has a child image with transparent background, and a fullpage.js vertical slider powered by CSS transforms, with the following markup:
<body>
<div class="fixed-element"><img src="transparent-bg-icon.png" /></div>
<div id="fullpage-container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</body>
I'd like the fixed element to display over the first section so the image is visible, and then the second section to slide over the image so the image disappears under the section. With the above markup this isn't possible with any combination of z-indexes, and if I put the fixed element inside #fullpage-container the position fixed of .fixed-element is no longer respected due to the transform on the parent.
Is there anyway to achieve this effect that I've missed?
Doesn't sound like it is possible. Mainly because whenever you change the z-index (which will have to be on section leave or on section load by using the fullpage.js callbacks onLeave or onLoad) the image will suddenly appear or disappear:
When changing the z-index on onLeave, the image will disappear behind the 1st section while the section is moving to the destination.
When changing the z-index on afterLoad of the 2nd section, the image will be over the 2nd section for a small period of time before the 2nd section really stops moving. So you'll see how it suddenly disappears behind.
The only option I could see is:
You use the fullPage.js option scrollBar:true so you can get the current scroll position using the scroll event (or any library that do so).
Then whenever you detect the fixed image is going to hit the 2nd section, change the z-index just right before it does.
You will also be able to play with z-index even when placing the fixed element inside the wrapper. As fullPage won't be using css3 transformations anymore (although performance won't be that smooth)
I'll admit that CSS is not my cup of tea, so it's possible that I'm missing something obvious here. My problem is that when I have an element that has both CSS properties of "clear: both;" and "height: 100%;" the element actually ends up going past the page height. Here is an example: http://jsfiddle.net/d9mv7/
Notice that the blue frame causes a scrollbar to appear and exceeds the page height despite being "100%". When "clear: both" property is removed, it renders as expected (JsFiddle still adds an unneeded scrollbar, but when rendering normally, I don't have that issue).
My intent is to have the bottom div (the blue one in JsFiddle) go until the bottom of page height, but stop at the bottom of the page, drawing the border correctly, same way as on the sides. The problem is that I do have content above the div that has a float property, requiring div to have the "clear: both" property to render correctly (unless there is another way without having to hardcode the pixel size).
I've tried wrapping both the top (float element) and bottom div inside an additional div, such that their height is relative to that div instead of the page. This seemed to make the overlap smaller (and scrollbar shorter), but did not make it go away. Using "overflow: hidden;" will not work for me either, since it still makes the div and the content go beyond the bottom, only hiding the scrollbar. How do you guys suggest I handle this (preferably without JavaScript)?
As the two other posters suggested, I ended up going with a JavaScript solution. If someone can find a CSS-only solution that makes no assumptions about size/contents of the divs, please post it and I will change the accepted answer. Here is how I'm handling it for now (this uses jQuery, but similar logic can be done with native JS):
$('#second-panel').height(document.height-$('#first-panel').height());
Alternatively, if your divs have margins/padding/borders that are thick enough to matter and you want them included in the measurements as well (because element.height() doesn't), you can use outerHeight:
var secondPanel = $('#second-panel');
var borders = secondPanel.outerHeight()-secondPanel.height();
secondPanel.height(document.height-$('#first-panel').outerHeight()-borders);
With the advent of the 'nav' tag I'm revisiting the creation of a navigation bar. There are many tutorials but they take different approaches and cloud the issue with too much css.
Specifically, I have a 960 width content area and I want to centre the nav buttons within this.
Does the 'nav' element have any inherent css-behaviour, or is it purely a semantic-container?
If I'm centre-ing the buttons then surely I don't need to 'float' them? Text-align, centre for the ul should do the trick.
If I want the buttons to be shorter than the nav-bar itself, should I give the bar a height (using line-height for the buttons to centre them) or add margins to the buttons to push the bar outwards (vertically)?
Here's a fiddle with a few examples: http://jsfiddle.net/joplomacedo/ejSby/
Does the 'nav' element have any inherent css-behaviour, or is it purely a semantic-container?
The nav element is a purely semantic container. In terms of css it behaves as nothing more than a simple block level element like div.
If I'm centering the buttons then surely I don't need to 'float' them? Text-align, center for the ul should do the trick.
If you,re using an ul, like you're saying you do, than you'll need the li's too. The problem is li's have a display of block (actually, not block - list-item. In the ways we're interested in, they behave like block though) - and when you want to put block level elements side by side, then you'll always either need to float them, or change their display to inline (inline-block).
Either 'floats', or 'inline-blocking'. I tend to prefer using the "inline-block technique" for many reasons - one of them is that, centering the blocks, as you want to, is just a matter of setting text-align to center on the parent element.
If I want the buttons to be shorter than the nav-bar itself, should I give the bar a height (using line-height for the buttons to centre them) or add margins to the buttons to push the bar outwards (vertically)?
It seems simpler to add padding-top & bottom to the nav block, doesn't it?
So again, here's the fiddle: http://jsfiddle.net/joplomacedo/ejSby/
I'm trying to improve my css a little, specifically use of z-index to overlap elements and change stack order. I created this fiddle but when I change the values of the z-index, the layers stay the same. I can't get z-index to do anything.
http://jsfiddle.net/mjmitche/AfPWE/24/
Without using a z-index, a div inside of another div always appeared on top. I tried to put it underneath the container div using z-index but with no luck. So then I thought maybe divs that are inside of each other can't have their stack order changed, so I made another div outside of those but couldn't change it's stack order either
This doesn't work as the z-index of an element is inherited from its parent. To get this to work, you'll have "de-child" the elements:
<div id="green"></div>
<div id="black"></div>
<div id="pink"></div>
And also z-index needs to have a position also, but you have that.
Divs that overlap need to be at the same level as each other. Check this fiddle out:
http://jsfiddle.net/jmqwZ/
I've created an "other" div at the same level as the pink one. You can try to swap their z-indexes.
i have a div element (class "content") that contains 2 divs and a sibling of the first div that has bottom: 0px; attribute and fixed height and i wanted the div with the class "gallery" to expand as much as they don't flow over their parent div.
and also ... i saw that except the firefox browser, chrome, opera and safari shows the search input in the upper right corner 4-5 pixels upper than normal. why is that?
http://goaltod.iulianonofrei.com/
You have 2 questions here.
The first question is not clear, "contains 2 divs and a sibling of the first div", isn't the sibling of the first div - the second div? Also it is not clear what you want to do, in general it seems that you have everything global positioned, so you why not set the gallery div with the exact dimensions you want. For the content it contains you can use overflow:auto so it will create an internal scroller when needed.
For the second question, looks like the problem is in firefox. if you set the top and padding of the input element to 0, it still does align with the containing td element. This is a very odd usage of table elements and I would advise against it... You probably should use div elements instead.
Because you used height: 100% the content will match the height of it parent element. And the other elements push it down.
There are a few ways you could fix this:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Put the header and footer in the content, then position them absolute.
I would recommend the 3rd option which is demonstrated here: http://jsfiddle.net/tnRpR/