I have a ul that is set to display inline-block and list elements that are set to display inline block.
The ul is set to have a width of auto so it shrinks if the container does (responsive).
The list items are set to be auto width of their content which is set to whitespace nowrap and so if they dont all fit in a line they drop down to the next line.
I am trying to detect with jQuery if this is happening. So I am getting the inner width (using width()) of the ul and the calculating the total width of each li by getting each outerWidth() and adding them together. Then I check if the total li width is greater than the inner width of the ul.
But heres the problem, jQuery is returning a value of 933.6800003051758 for the nav's inner width and a value of 934 for the list items. So you'd think that the list items would be breaking onto a second line- but they aren't! So I suppose that the browser is rounding up the nav's innerwidth to be 934.
What I'd like to know is, if I round up the nav's inner width before I compare the value to the total list items width will that be reliable or will my function sometimes think the list items are not breaking on to a second line when in fact they are?
Related
I try to insert several DIV elements into a main DIV - the amount of elements is dynamic and changes according to the number the user inserts.
My question is how to set the length and width of the DIV so that if I add a number of elements that should already be displayed in a wider view than the DIV then just the size of each element will decrease - but the main DIV size will not change.
I hope the question was understandable - how to insert a dynamic amount of elements (DIV) into the DIV??
By using flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
Set your parent div to display:flex then set your children according to the ratios you need. If you want them all the same, set them all to flex: 1.
I have a navigation (Sample Wireframe) which has a colored background. The nav items are in a list, and at different resolutions. As the font size changes the nav container's height also expands or contracts. However, I want one of these items (the middle one) to have a larger height and break the bounds of the container.
Is the cleanest way to do this to set the height of the container to be equal to the height of the other buttons using javascript, or will that still always cut off the larger nav item? I can't seem to break out one of the items from the bounds of the container without doing absolute positioning which completely takes it out of the flow of the other list items, and I want the height of the container to stay consistent with the rest of the buttons. Any thoughts?
Create the item with position:absolute set as a style property.
You may need to create another element next to it with the regular height that will be hidden behind it to keep the width reserved.
position:absolute
will do the trick but also consider about having an extra div (nested div) so it isolates from the bigger item.
As others said, position: absolute. It is important to note that an absolutely positioned element will have its origin point at the nearest element with position: relative (or the root element), so if you set the parent container to relative, the absolute menu item will start there.
I would like to float a set of divs to make a fluid layout. And I would love to do it with pure CSS and no js if possible for performance/complexity reasons.
Currently, we have 3 divs per row and the surrounding element stretches vertically to accommodate the the tallest div. But of course when I make the page narrower or wider, I always have 3 divs per row.
With floated divs that don't have row containers, it looks great as long as all the divs have the same height. But if the 2nd div in a 2-div row is shorter than the first, then the next row's 1st div gets 'stuck' to the right of that 1st taller div, leaving the first spot in the 2nd row empty.
A solution might be to bring back row divs and use javascript to shuffle item divs between them, but that might be complicated and error-prone. But maybe that's the only possibility.
The one thing I can't do is use fixed height for the item divs, because that would require setting the fixed height large enough for the largest possible item div, which would leave a bunch of empty space for every other div.
I guess another possibility might be using fixed height, then use js to adjust those heights to eliminate extra space.
Make the display:inline-block and remove the float. Height will become optional as well, they'd just align to the tallest one.
If possible try switching to flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox has great visuals to illustrate how various flex styles work.
For example, you could use flex-wrap: wrap; to handle the case when the page becomes too narrow, and use align-items: stretch so they all have the same height
I want to obtain the dimensions of a DIV element (used to display a popup menu at the cursor position) while it's style.display='none;', however the dimensions of the DIV always return 0. The only way I seem to be able to get the dimensions is to make the DIV style.display='block;' at 0,0 and then move it to the required position, but that looks jumpy.
I've tried making the DIV visible outside of the visible screen area but that doesn't work. Is there a way to get the clientWidth and clientHeight values whilst the DIV is hidden?
If your DIV is not visible, you won't be able to get its dimensions.
However, there is a workaround. Your div has to be "visible", but that doesn't mean it's opacity and position have to be 1 and relative.
Set the opacity to 0 and the position to "absolute" and you'll be able to get the DIV dimensions.
EDIT
Since I think more people will have a similar problem, I feel I should explain my answer a little more.
If you try to get the size of a hidden element with JavaScript, you will always get 0.
So there are techniques to get the real size without displaying the element to the user. My favourite is the one I already wrote about above. Here are the more detailed steps:
you set the elements opacity to 0. This way it won't be displayed to the end user while you are getting the dimensions.
you set the element position to "absolute". This way it won't take up any space.
now it's safe to set the display to "inline-block".
you read the elements dimensions. This time you'll get the real values.
You set the display back to "hidden" and set the opacity and position back to its original values.
And now you have the size of a hidden element.
If you'd like to know the size of an element onscreen without it being visible you need it to be painted to the screen but not shown.
In order to get clientHeight and clientWidth you need it to be rendered so the calculations can be performed based on the screens current state (unless you have pre-programmed width and height, which I'm guessing you don't)
you can find out more information at MDN here
So you have options:
create your div offscreen using positioning (fixed or absolute) combined with z-index or opacity
use width: 0 and height: 0 and overflow: hidden then use scrollHeight and scrollWidth to find the overflow size
choose which option is best for your site, considering things like responsiveness and screen reflows and repaints
I am writing a script that takes the items in the navigation bar, and stretches each row except the last to the width of the menu's container. The process is basically:
-Find the menu container width
-Iterate through each item, adding the .outerWidth(true) to a variable containing the current row width
-When the current row width becomes greater than or equal to the container width run a few tests
--subtract .outerWidth(true) from current row width and add .innerWidth().
--if row width is still greater than container width, move to the next row array, and add the current item as the first item in the row,
--if the row width is equal to or less than the container width, add the item as the last item of the current row, and move to the next row array.
Once the rows have been created, calculated the necessary padding to add to each element by finding the difference between the container width and the row width and following the following formula:
this.addedPadding = Math.floor( this.difference / ( this.items.length * 2) );
then calculate the leftover space by:
this.leftovers = this.difference - (this.addedPadding * 2 * this.items.length);
Then proceed to iterate through all items, adding the added padding. Then take leftovers, iterate it downwards by 2's, adding 1px of padding to each side of the first element, then second, third, and so on until leftovers is equal to 1 or 0. If it equals one, add one px of padding to the padding-right of the last item in the row.
Iterate through each row, and repeat the process.
Now, the problem is, different browsers render font slightly differently, so the numbers don't always add up perfectly. My current solution is to change the container width by the necessary adjustment by the browser so that the rows render correctly. This doesn't even have consistent results. For instance, on the site I'm working on, in Chrome, the homepage renders incorrectly at first, but (at least on my computer) if you refresh, it renders correctly.
What would be the correct way to address this without having to change the containerWidth based on browser and content? Is there a way?
For an example of the issue, visit http://development.rjhallsted.com/login_system/browsing/projects/insidemt/