I have a div with a fixed height. When I resize my browser window and the div's width becomes smaller, the elements inside the div jump below expanding the height. How can I make the elements visible by adding a horizontal scrollbar?
I have tried all CSS scroll properties, but could't make it work:
.dhButtonToolbar{
position:absolute;
top:6px;
left:0;
bottom: 5px;
width: 60px;
background-color:yellow;
border:0px solid white;
margin-left: 5px;
margin-right:5px;
margin-top: 5px;
}
#media screen and (max-aspect-ratio: 1/1) {
.dhButtonToolbar {
height: 55px;
left:5px;
overflow-y:auto; //here my elements jump below I want to add a horizontall scrollbar
right: 5px;
}
JSFidlee: http://jsfiddle.net/x7xm3/2/
Try resizing and elements will fall below!
Just add a body and give it a min-width. Is this what you wanted?.
Hope it helps.
I change in your jsfiddle. please check this.
jsFiddle: http://jsfiddle.net/x7xm3/16/
It completely working.please check.
Related
I have two divs
<div class="one">contains a massive image with fixed height and width</div>
<div class="two">contains popup</div>
.one {
background-image: url("image");
background-position: left top;
background-repeat: no-repeat;
background-color: transparent;
height:900px;
width:1000px;
margin:0 auto;
}
.overlay {
background:rgba(0,0,0,0.8);
bottom:0;
left:0;
position:fixed;
right:0;
top:0;
z-index:4;
display: block;
opacity: 1;
}
.popupwrapper{
background:white;
height: 100%;
max-width: 300px;
width: 100%;
max-height: 320px;
text-align: center;
padding:3em;
margin: 0 auto;
margin-top: 120px;
//for small screens
margin-left: 40px;
}
The problem I have is that, since the div "one" is a fixed size when I view it on mobile phone, the popup isn't actually displayed in the center of the screen but rather how it would be displayed on a laptop screen. I have tried fixing this with using margin left on small screen which centers the div in the middle of a mobile screen. However, when I scroll because the div has a margin-left it doesn't sit in the center as I scroll.
Additionally, this only seems to happen in Safari ( without the margin-left or fixed max-width the div seems to be huge on mobile screens) but in Chrome is fine?
Two questions:
How do I stop the div from scrolling? I have tried overflow but it still scrolls.
Is there a CSS hack for just Safari? I have tried many but none of them seem to work?
I understand from your question that you want to show a overlay that's always in the middel of the screen and on top of the rest.
If the size of the modal is fixed, then you can do it like this:
.one {
position: absolute;
top: 50%;
left: 50%;
margin: -450px 0 0 -500px;
width: 1000px;
height: 900px;
}
Example: click
Only the size of the overlay is way to big for a mobile device.. Maybe use media queries to have a different size on mobile screens?
May be height of any element is more than its actual height. That's why scrolling is coming.
I have 2 divs that I'm trying to align a certain way with it being responsive. I basically want the right div to be on top of the left div when the width of the screen reaches a certain width. Right now they are setup splitting the 100% width of the container.
The left side is the form and the right side is the content. I want the content on top of the form to fit the width of a mobile screen. I like how the width is setup to be viewed on the desktop/laptop setting. I hope this makes sense.
Is there a way to do this with CSS or do I need JQuery for this? Please let me know if this is unclear.
CSS
#left {
float:left;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
float:right;
width:35%;
background-color: white !important;
padding-left: 40px;
}
If I understand you correctly, this JSFiddle is doing what you'd like it to do.
http://jsfiddle.net/isherwood/wgbn8c0d/1/
(Thanks to iSherwood for fixing the CSS)
Here's a way to do this with only CSS and CSS's #media queries:
#left {
float: left;
border: 1px solid black;
width:calc(65% - 26px);
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
border: 1px solid black;
float: right;
width:calc(35% - 40px);
background-color: white !important;
padding-left: 40px;
}
#media screen and (max-width: 500px) {
#left {
display: block;
width: 100%;
}
#right {
display: block;
width: 100%;
}
}
Ideally you could accomplish this using media queries to detect at what screen width you want them to stack.
At that width say it's 768px for instance. You could then remove the float values and set the widths to 100%. If you mark up your HTML so that the right section of content is coded before the left then it will just naturally be rendered first above the left side.
#container {
display: flex;
}
#left {
order: 1;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;
}
#right {
order: 2;
width:35%;
background-color: white !important;
padding-left: 40px;
}
#media only screen and (max-width: 767px) {
#left, #right { width: 100%; }
#left { order 2; }
#right { order: 1; }
}
If you don't have to support IE9 and below you can use display: flex and then just change the order of the items on the breakpoint where you want them to stack
The short answer is no you don't need jQuery and yes you can use CSS.
What you need is a grid system. The underlying grid will be using media queries to get the screen size, which you can do as well, but a grid system would be better as far as covering edge cases and you wouldn't have to reinvent the wheel.
A couple of popular grid systems to take a look at:
Skeleton
Foundation
Bootstrap
In my humble opinion if you are trying to do something simple Skeleton would be the best place to start because it will give you an efficient grid without getting in your way with other opinionated features (like colored buttons).
But if you want your CSS framework to define other parts of your style as well feel free to go for Foundation and Bootstrap which are (arguably) more popular.
I Recently try out the div with expand and collapse. Everything works perfect. Here is the fiddle with I make the bar as fixed with expand and collapse button whenever i increase the font size of the div then the button doesn't comes with the div proportionally. Here is the fiddle what i am expect clearly.
http://jsfiddle.net/vicky081/GyG3w/1/
.btnn
{
width: auto;
height: auto;
cursor:pointer;
background-color:#02adea;
position: absolute;
border:solid;
margin-left:3%;
border-color:#ffffff;
border-top-color:#02adea;
top:36px;
text-align: center;
padding-top: 7px;
color:white;
}
You can see that button comes outside the div. Is there is a way to show the button which is attached to the div even if i change the font size.
Any suggestion would be great.
Thanks.
With a top value of 100% the button is always stuck to the container whatever the font-size.
See it live http://jsfiddle.net/LeBen/UCTgR/ (I also added a CSS Normalize)
$(document).ready(function () {
$(".text").hide();
$(".btn").click(function(e){
var txt=$(this).html();
var flag = txt==="open";
if(flag){
$(".text").show();
$(this).html("close");
}
else{
$(".text").hide();
$(this).html("open");
}
});
});
.banner{
font-size:1.2em;
position:fixed;
width:100%;
}
.text {
background:#02adea;
text-align:center;
width:100%;
}
.btn{
background:#02adea;
border:5px solid white;
border-top-color: #02adea;
color:white;
text-align:center;
width:2em;
}
http://jsfiddle.net/GyG3w/5/
I suppose this is the effect you wanted, in this you can change the fixed div's font size as much you want, the rest of the elements' will be resized accordingly and the layout will be preserved
You can use bottom: -49px; instead of top: 36px;
I have 2 divs with content that uses JQuery slidetoggle to show/hide, but I want the second to occupy all the remaining vertical height of the screen.
$('.heading').click(function (e) {
$(e.target).parent().children('.content').slideToggle("fast", "swing");
});
jsFiddle I started: http://jsfiddle.net/LMHgM/
Any ideas how this can be done without resorting to javascript? Hopefully this should be browser resizing and other element resizing should keep this greedy div in the correct state. Currently my only solution has been to trigger my own resize method on slidetoggle and browser resize to correct the height.
Thanks.
You should specify the height as 100% to the element and also to the body and html
DEMO http://jsfiddle.net/kevinPHPkevin/LMHgM/3/
body, html {
height:100%;
}
#second {
border: 1px dashed blue;
height:100%;
}
Basically it is collapsing to fit content, not expanding to fit the page. You can also put a wrapper div around the divs with position: absolute and height: & width: 100%
Updated fiddle: http://jsfiddle.net/LMHgM/2/
.wrapper{
position: absolute;
height: 100%;
width: 100%;
}
Seems the best solution is to use display: table to divide up the screen.
.wrapper {
width: 100%;
height: 100%;
display: table;
border-collapse: collapse;
}
.group {
display: table-row;
}
http://jsfiddle.net/LMHgM/5/
I'm trying to create a fixed layout, with the sidebar's background extend to the far right. I drew a sketch to illustrate the image:
how would I go about extending the sidebar background to extend till the end of the right screen, on any window size? I tried with:
#sidebar {
z-index: 1000;
overflow: hidden;
position: absolute;
width: 100%;
background: url(../img/sidebar-base.png) no-repeat 0 -8px;
min-height: 200px;
&::after {
content: '';
z-index: 10;
display: block;
height: 100px;
overflow: hidden;
width: 100%;
background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
position: absolute;
top: 0;
}
}
but a scroll would appear horizontally, and if I apply overflow:hidden on the body I wouldn't be able to scroll to the bottom. Thank you!
EDIT: I did try to find my luck with javascript but there's still a little scroll:
$(function(){
$sidebar = $('#sidebar');
$sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
If your problem lies only in the scrolling, you can easily fix this with this line
overflow-x: hidden;
and applying it to the background's parent or the body element altogether.
Is there anyone following here or not? anyway, I think you should static position and hidden overflow like below:
#sidebar {
z-index: 1000;
overflow: hidden;
position: static;
width: 100%;
height:100%;
right:0;
top:0;
margin:0;}
Also to hide the scrolls, you should hide your body overflow too.
Hope to be right and helpful...
Set body to 100%
body {
height: 100%;
}
Then set the sidebar height to "height: auto;". That will make it extend to the height of the viewport. From there, add fixed positioning like you said.
You could do:
overflow-y:hidden
That should get rid of the scroll bar across the bottom.
I would also then use a lot of right hand padding in the sidebar to extend it out.
Try setting the sidebar width to 30% and the content to 70%.
What you should do is create a wrapper div.
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here --></div>
</div>
Your document should look like this when finished:
<html>
<head>
<title>Experiment</title>
<style type="text/css">
.content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
.sidebar-parent {float: left; width: 50%; background-color: green;}
.sidebar {width: 500px; height: 500px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="content">blah blah blah</div>
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
</div>
</body>
</html>
The main thing to remember is the container div "sidebar-parent" is what's getting the width and containing the background.
To center them you'll need width: 50%; parent containers for both content and sidebar. You make those float:left; to fill the screen and then the content child container float: right; and the sidebar child container float: left; within their parent containers.
Summary: 2 50% width containers each containing 1 child container. Stack the parents together with a left float and then position the fixed width child containers within their parents.
That will center them and now you'll have the ability to have extended backgrounds.