Set Child width maximum of Screen width having absolute position - javascript

I have 3 drop down menus with dynamic width and position like these
I want to make each drop down width to maximum of Screen width starting from the current position leaving 10px from right side like this.
The drop down list is positioned absolute to its parent container. I want to make a single css class and apply the each drop down list so it can act like the above one which can have maximum of screen width subtracting 10px from it.
By searching SO, I found many questions but could not get it work in my problem. I don't want to do anything with Javascript but with pure CSS only.
Many of SO Questions suggest using vw unit of css but I don't understand how to use vw in this problem. Any help from you experts will be really appreciated. Thanks.
Some suggest this but does not work
width:100vw;
margin-left:100%;
transform: translate(-50vw);
Because above could is good if I want to make drop down in center of screen but here the situation is starting from parent position. I have tried replacing it with margin-right and tried as much I could but no use.

i don't think this can be made with a single class, you should be using a single class for each menu item.
You can first set a fixed width to top menu item, something like 100px. So each item next will be 100px further from the left side of the page.
Now you have to make a calculation of 100% of the viewport with 100vw, and then subtract the pixels from the previous items, if the item menu has 2 items before then it will be 200 pixels.
This substraction can be made with calc like this: width: calc(100vw - 200px);
The result with this technique would be something like this:
`
Here is an example: https://jsfiddle.net/52jab0t9/
I hope this help you, excuse me by my bad english :)
PD: I took the code for the menu from here: http://www.cssscript.com/demo/simple-clean-pure-css3-dropdown-menu/

Related

Trying to achieve some kind of scrollable container with dynamic height

I have <div> with some dynamic content inside - sometimes it is table, sometimes it is text. I'm trying to setup some kind of container which would be scrollable on y-axis if its contents are too big for the screen.
Some googling suggests that its simple to do if you hardcode height of the div, but what should I do if I want to avoid specifying exact pixel sizes anywhere?
From what I understand, I'll have to calculate remaining vertical visible screen space first, then set it as div height. This seems like a fairly common task, yet I can't find any components(don't care if they are jquery dependent or not) that would accomplish this.
Any suggestions? Already existing solution(plugin, library, etc) is preferred.
If you would like the container height to start scrolling when it matches the viewport height, you can just give it height or max-height equal to 100vh (100% viewport height).
In case there are other elements outside of the container and it shouldn't take the full screen height you can use calc() to limit it:
.container { max-height: calc(100vh - 100px); }

How can I make parent div scale, based on number of children in html/css/bootstrap?

Unfortunaelly question is too long to give me proper results on google or here, all I got is some scaling of svg elements.
What I wanted to do is make online shop, where parent contains results which are div boxes, and size of parent should be relative to number of children.
So lets say I have 14 children divs, 4 per row, than I can use starting min-height:768 px, but if there is lets say 200 children, than I need to increase height of container and containers parent by (200/4-4)*128px, because 4 rows are basic screen and other 46 won't fit in., how I do that dynamicaly, and based on screen resolution?
Edit: I tried to add some details:
IMG of my current status what I want to do atm is increase size of light gray box, its parent (white box) and its parent (almost transparent box) if there is too many red boxes, that leave bound of first container (light gray box)
You shouldn't put static height property to parent of parent of your node.
overflow: scroll;
should work as far as i know.
Maybe you need js solution http://masonry.desandro.com/
Sometimes this i use
Solved it, in case anyone is like me trying to make some complex objects inside objects and than has problems positioning and scaling them all maybe you did something like I did.
Inside container I have positioned every object in middle by making it:
position: absolute; transform: translateX(-50%); and I did like this for like 10 objects, position absolute caused my child divs to leave arent instead of increasing its size, all that I should have done is just add padding of container 5%, because all children had width of 90%, and dont set position for children of containe, just manipulate them with paddings and margins.

How do I take the scrollbar into account with viewport width units?

I am trying to develop a carousel similar to Netflix, but I cannot make it responsive. I have been using a codepen example:
Link to example
In this example, it has a hardcoded width and height. I would like to make it use a responsive measure (percentages). I wanted to use the vw viewport width units, but this doesn't work for me because it does not exclude the scrollbar. So, when I want every carousel item to have a width of 20vw (so that each one is 20% of the viewport size), they are always wider than I want because the viewport does not exclude the scrollbar.
How can I fix that problem?
I have made an example: Link
In this example, I want to show five items and showing an arrow on the right. The 6th item should be hidden behind the arrow, but the arrow width is not correct.
The width of every item is 18.4vw ( (100-8)/5=18.4). As you can see, I have put a padding on left and right with 4vw(so, I am subtracting 8 for total width), so, I have made the arrow layer with:
position:absolute;
right:0;
width:4vw;
In this manner, the arrow always is fixed to right.
The problem is that 18.4vw is the measure respect the viewport, and as there is a scrollbar, the width is not correct, because the scrollbar width is breaking the correct measure.
I dont know if you understand what I want to make.
BR.

HTML div with absolute position tries to wrap the text. Can I avoid it, without using white space

I have a set of divs with position = absolute, and they can be positioned across the screen.
If the content of any div doesn't fit on the screen, the browser wraps the text into multiple lines and attempt to fit inside the window.
However, I dont want the browser to do that, It should instead hide the content.
http://jsbin.com/welcome/35835/edit/
Edit:
you may think of it as a div on a page with absolute positioning. and
1) the user can drag the div around
2) user can manually change the width of the div( there is a stretch box widget, which the user can use)..
So the problem is when the user is dragging the div around near the edges of the screen, the text should hide and not wrap if it goes out of the window. Hope this explains better
As shown in the example, block 2 shown is what I want.
So, lets say the width of the div is 100px, and the left position of the CSS style is (screen width - 50), then the rest of the text should hide.
Solution 1: white-space:nowrap. Cant use this, since this is a flexible width UI where user can change the width of the div if they want.
Solution 2: If I set the width of the div, explicitly to a number, it works fine.
But not a optimal solution, as then here I will always have to calculate the width for all divs at the time of rendering.
Is there a more optimal solution, which can make the browser not try to fit the text into the screen.
Hard to tell what you're asking. But I think you can use
{
height: 1.2em;
overflow: hidden;
}
To hide the content that is longer than the one line you support
http://jsfiddle.net/MXXDC/2/
If you put them all inside a huge (e.g. 5k px * 5k px absolute positioned div you should see the expected effect: http://jsbin.com/welcome/35862/edit
Is this what you want? (second item)
I wrapped the inner text in a very long div and applied overflow:hidden to it's parent.
I am not sure the exact use case of the widget so I am not 100% sure on what it can have and not have. I have an idea, maybe it will be useful - setting width to a % might help, something like this
.block2{
left: 50%;
top: 100px;
width: 100%;
}
you can set this in the css to avoid calculation with js, but like I said I am not sure of how this is used so this might not work but it might give you some ideas

Limit horizontal range of centered div when resizing window

I have two divs. One should be positioned 5% from the left window border, the other should be to the right of the previously mentioned div and centred relative to window width. If the window is made too narrow it should not overlap the first div, and it should not move below either.
Whatever comes after should be positioned below the tallest of the first two divs.
How can I do this?
The closest I've come is to use a float for the first div. http://jsfiddle.net/7qVLm/
edit: Here's the final result that I'm happy with: http://jsfiddle.net/ATHpg/
Thanks to both #Christopher Smithson and #gmebeh whose answers helped me to get to this solution.
Here's a fiddle to consider for your solution.
http://jsfiddle.net/f2Muj/5/
With percentage-based width's you can make this happen:
jsFiddle
#d1 is 5% from the left, center-aligned content
#d2 is centered relative to the browser window, and will never overlap #d1
Both use fixed heights to accomodate fixed amounts of content
Play around with the percentages to get the exact width you you want.

Categories