I'm currently working on my photography webpage. When resizing the browser down, all the html disappears from 960px downwards and shows nothing but a grey background.
Can anyone explain why this is happening?
Copied the code the best I could from adobe muse.
CSS.
#outer_wrapper {
width: auto;
height: 560px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
margin: 0 auto;}
#outer_wrapper #inner_wrapper {
width:15000px;}
#outer_wrapper #inner_wrapper.box {
width: auto;
height: 560px;
float: left;
margin: 0 15px 0 0;
border:0.0px white solid;}
#outer_wrapper #inner_wrapper.boxV {
width: auto;
height: 560px;
float: left;
margin: 0 15px 0 0;
border:0.0px white solid;}
My guess is that when you make the innerwrapper have a width of 15000px, and then proceed to turn off white-space wrapping that the content is just being pushed way off to one side and is unable to be seen. Try getting rid of the overflow-x: hidden; and overflow-y: hidden; and see what happens if you scroll all the way through the containers to see the content. Also, using overflow: hidden prevents the user from scrolling at all, which probably isn't the best solution.
Related
Codepen link: [removed for privacy]
(Ignore the search button, I am mainly concerned with results displayed within it's parent element of #results_container).
On the actual app, results will be generated based on a search term,
I have the overflow set to "scroll", but as you can see, the bottom result still overflows. What gives?
#results_container {
height: 430px;
overflow: scroll;
margin-top: 5px;
}
The unwanted "bottom result still overflows" seems to be due to the height: 100%; CSS definition for the #wrapper div.
If you remove "height: 100%; from #wrapper, I think you'll see the results you were looking for.
Also, notice that the #wrapper div expands and collapses as the browser's display is expanded and collapsed. Once the height: 100%; is removed from #wrapper, the #wrapper height does not change.
I made a fork from your codepen.
#sidebar {
border: 1px solid black;
width: 40%;
margin-top: 22px;
height: 93%;
overflow-y: hidden;
}
#results_container {
height: 430px;
overflow: auto;
margin-top: 5px;
}
Here the full example: codepen fork
I have a web application, which I did not develop myself, but am tasked with cleaning up a few things that are no longer working.
There is one issue that I am not really able to figure out why it is happening.
The web application is split into two panels. However, the second panel which is scrollable does not reach the bottom of the page, when a user scrolls all the way down.
Also by zooming out (ctrl -) we get a blank area at the bottom, although the panel can continue scrolling.
Id like to have this panel, scroll as if it was the full page.
Ive put a quick static copy up on fiddle at.
https://jsfiddle.net/brianz820/qmzw8923/
The section in question I believe is.
<div id="house-estimates-scroll-panel">
<div id="house-estimates-listing"></div>
</div>
div#house-estimates-scroll-panel {
position: relative;
/*display: inline-block;*/
margin: 0;
padding: 0;
height: 1200px;
/*height: 100%;*/
/*width: 100%;*/
overflow-y: visible ;
overflow-x:hidden;
background-image: linear-gradient(to right, #f3f3f3 , #bbb);
background-size: 15px 20px;
background-position: right;
background-repeat: repeat-y;
}
div#house-estimates-listing {
margin: 0;
padding: 0;
height: 90000px;
/*width: 320px;*/
/*width: 960px;*/
}
Ive added the full HTML and CSS sections to the fiddle.
You could try making the wrapper into a display:flex container by adding these rules (some look weird because of specificity issues)
body {
height: 100%;
}
div#wrapper {
flex-direction: column;
height: 100%;
display:flex;
overflow: hidden;
}
div#house-estimates-panel {
display:flex;
overflow: hidden;
}
div#house-estimates-scroll-panel{
height: auto;
flex: 1 auto;
}
div#house-estimates-listing {
height: auto;
}
demo: https://jsfiddle.net/gw35wc4c/1/show/
source (my css is at the bottom): https://jsfiddle.net/gw35wc4c/1/
hopefully this is an easy one. I've got scrollbars appearing on my web page when viewed in chrome. I think it's a padding or margin issue but I haven't been able to get it sorted. Can someone take a look please?
My css:
.sub-news {width: 750px; margin: 0 0 20px 0px; padding: 0 0 0 10px; clear: both; overflow: auto; }
.sub-news h3 {font-size: 1em; margin: 5px 0 0 0;}
.sub-news a {background-color: #f39200; padding: 5px; margin: 0 0 10px 0; color: #fff; text-decoration: none;}
.sub-news img {width: 220px; height: 127px;}
.sub-news p {width: 220px;}
.first-sub-news, .second-sub-news, .third-sub-news {width: 240px; float: left; overflow: auto;}
Fiddle.
Remove the overflow: auto; CSS property from the .first-sub-news class.
Also on the .sub-news class if you don't want that to scroll either.
Note: overflow: auto; will automatically add scroll bars if the content within is greater than the defined height or width.
The CSS property overflow determines what happens to the text that doesn't fit inside the default area. Having it set to auto means that if it goes out of the boundaries, it will have a scrollbar, otherwise it will not. The other possible settings for this are:
overflow: visible; /* Appears over the top of other elements on the page */
overflow: hidden; /* Anything outside gets cut off */
overflow: auto; /* Scroll bars appear if needed */
overflow: scroll /* Scrollbar will always be present, even if there is nothing to scroll */
overflow: inherit; /* Same as parent */
remove your overflow:autos from .sub-news and .first-sub-news
http://jsfiddle.net/YeVXm/1/
My situation:
On my page I have multiple collapsible panels in the right hand column of my main content.
At the moment what happens is when I expand the panel (which contains a large amount of text) it goes off the page.
Therefore meaning that the user can't read it. This due the fact that the height is hard coded.
Now what I want to happen is when the div expands, if it reaches the max height of the page, the page height expands to incorporate all of the text.
Question:
Is there a way to make it possible that the page height expands along with the div?
My CSS:
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
#page {
overflow: hidden;
width: 900px;
padding: 0px 50px 50px 50px;
background-color: #FFFFFF;
}
#content {
float: right;
width: 580px;
}
Thankyou for any suggestions
Instead of using height you could try to set position to "absolute" and 0px top and bot on the .container?
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
top: 0px;
bottom: 0px;
}
You can make .container a clearfix so it will expand to the size of the floated element inside of it. Here's a great article on using clearfix.
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
That code will work for everything outside of IE6&7. If you need tose too just take a look at the article.
Never mind guys, I solved it....It was due to the fact that i was positioning the div with a relative height and width, so i just used margin-top instead.
Thanks to everyone
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?