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?
Related
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.
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/
I'm trying to figure out how to make this basic CSS mobile friendly/responsive to browser window changes. Currently, the code displays fine at all sizes except horizontal tablets. Usually pictures and code will drop down to separate rows, but for some reason everything is being displayed on one line and extending past the page borders. I've tried everything from max/min-width and padding to positionand overflow, yet I can't get this one to work.
Here's the important code, the rest of it is just text formatting and effects. The html is basic and just calling .view
.view {
margin-left: auto;
margin-right: auto;
width: 300px;
height: 300px;
float: center;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff
}
.view .mask, .view .content {
width: 300px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
}
.view img {
display: block;
position: relative;
}
This is all done through Squarespace, and they assure me that it's my code causing the issues and not their template code.
What I'm referring to are the picture on this page. Change the size of the page and you'll see what I'm referring to when you hit about 4-6 inches wide. The pictures overlap and a scroll bar forms. There's no spacing between the individual pictures.
Your images are re-sizing because .sqs-col-12 and .sqs-col-4 are set to 33.3333%. If you give them a fixed width (say 320px) they will not collapse down on themselves, but will float down to the next line on a resize.
.sqs-col-12 .sqs-col-4 {
width: 320px;
}
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