In the following example, the div has the pre-defined height of: 300px.
The last city of the scrollable dropdown is Zimbawe and does not get displayed on an iPhone 6 screen for example.
I want to change the scrollable dropdown div in such a way to not specify the height and make the div end where the screen ends.
Any ideas ?
The library we use fro the dropdown is:
https://github.com/mukeshsoni/react-telephone-input
An you can see here the default height of the dropdown non dynamic:
https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477
try this out, setting height depending upon the viewport(vh).
.div {
height: 100vh;
overflow: auto;
}
{height: 100vh;} matches the height of the viewport.
Try this:
CSS
div { // change selector
height: auto;
}
On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile.
Target mobile devices using #media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.
try adding max height and overflow
.div {
max-height: 150px;
overflow: scroll;
}
you have to adjust the max-height according to screen size manually.
Related
<body>
<div>
</div>
</body>
div {
width:10vw;
height:10vh;
}
Is there any way to set this div that will be 10% of the full available window ? (When the window browser cover all the screen).
Last time I did it with script in JS but I believe nobody does this and only use css.
Instead I can use px but even with media queries I won't know how it will looks like in other screens.
Anoher option: Using max/min-height/width, but still I don't know what value I need to set from avoiding from the div shrinking (every screen is different px) or just let the div shink to some point - but either at this way I don't know how it will look on other screens.
Thanks.
By specifying the min-height and max-width, you'll be able to control its size.
div {
max-width: 10vw;
min-height: 10vh;
}
Empty div elements have a height of 0 by default so the min-height keeps it from shrinking to nothing.
div elements are also display: block; by default, which means the width is 100% of the containing element. Defining the max-width will restrict that dimension of the div.
You should use max-height/min-height/width in percentages.
div {
width:10%;
max-height:10%;
min-height:10%;
position: fixed;
border:1px solid blue;
}
I have a screen divided into 3 columns spanning the full height of the screen, I would like to have a scroll bar within each of the 3 sections, not one for the entire page. Everything I find suggested is with a fixed height of the container element. Is it possible to have this setup with a fluid dynamic height?
Thanks!
You can set to the 3 elements have the height of the screen, so it doesn't block the page scroll, and they fills the entire screen
.column {
height: 100vh;
overflow: auto;
}
Set the height of the elements to the height of the screen and overflow to auto using css:
height: 100vh;
overflow:auto;
Here's a jsfiddle: https://jsfiddle.net/h7qkcnw1/
hope that helps.
I have set up a web page using an image in a div called slideshow. The div is supposed to be a max-width of 1600px and a max-height of 600px (width and height of the original jpg used here) and to shrink down dynamically when the screen is smaller or resized.
This works fine because the behavior of the image is set by CSS as follows :
.slideshow img{
margin:0 auto;
width: 100%;
max-width: 1600px;
min-width: 900px;
}
Now I would like to achieve the same effect by replacing the image with the Camera Slideshow from Pixedelic. But here I can't control the image with .slideshow img{} since the script uses a div instead of the image tag.
Width and height of the camera slideshow are controlled by a jQuery function.
I have put the slideshow in a .slides div which I try to control by CSS, like this :
.slideshow .slides{
display: block;
margin:0 auto;
max-width: 1600px;
max-height: 600px;
overflow:visible;
}
(Overflow is left visible to see what happens)
When I assign a height value (ie 600px) in the function, the slideshow loads at it's max height but doesn't shrink when the page is resized down : http://www.centredelafontaine.be/testpage1.html
When I leave height and width values blank in the function, the slideshow shrinks on resize but opens with a height of 800px (?) and crops the even greater image inside, overflowing the div placed below : http://www.centredelafontaine.be/testpage2.html
Can anyone help me on this issue ?
Place a img tag inside the div which is contained by the slideshow and you will be able to modify those image (slideshow elements) proprieties through the CSS code.
<div id="image" div class="Slides w3-display-container">
<img src="your_image.png" height="600" width="1600">
</div>
If you can't work it out leave me a reply and I'll make a demo html
Set only image min height. Slidehow container will depend on image height. Means no need to set slidehow container height.
You can set the portrait property to true and the images will not be cropped.
jQuery('#your-camera-gallery').camera({
portrait: true,
});
In a fluid layout I need in the same line, side by side, a fixed-width block and a fluid width block with a max width. When the window is resized, the fluid width block should resize being "pushed" by the fixed width block.
Here is what I came to achieve: http://cssdesk.com/gHvUB
But sadly the content expands outside its container .....
Anyone ?
One way to achieve your goal with the example you gave would be to
Add a right margin of 200px to the fluid box
Add a relative position of -200px to the fixed-width box.
.line {
...
position: relative;
}
.fluid {
...
margin-right: 200px;
}
.fixed-width {
...
position: relative;
top: 0;
right: -200px;
}
With css (and especially css3) there are going to be many different ways to achieve this.
Here a couple examples:
example
example
And here on the site:
CSS Layout 2-Column fixed-fluid
Ok, the easiest way is to set the container to overflow: auto. Then set both child containers to position: absolute. Since the container's position:relative they'll sit inside the parent. Then you need to set the parent's height to something. You can try min-height: (value). I have a sample here.
Hope this helps.
Ok so I have a div that contains a few forms that have dynamically generated content. There are categories, that if you click on, slide/toggle down to reveal that categories sub-contents, or projects. Right now, I have it setup so that if the height of the div expands to exceed a set amount, a scroll bar shows up at the side, and the user can scroll down and see the content.
NOW I am being asked to get rid of the scroll bar, and just have the div's border (which is just 1px set in the css) height adjust dynamically with the height of the div's content...can I even do that? Is there some sort of jquery animation that would allow that? A point in the right direction would be greatly appreciated!! Thanks
You now probably have a height set on the container div:
#container {
height: xxpx;
overflow: scroll;
}
Just change that to a min-height:
#container {
min-height: xxpx;
overflow: visible;
}
The div will be at least xx pixels, and grow to fit after that.