When using overflow: auto on an element, I am noticing a performance issue. I have tried translateZ(0) and backface-visibility: hidden but neither solved the issue.
<div id="testA">
<ul>
<li>...</li>
</ul>
</div>
CSS:
div {
width: 12em;
background: #c6c6c6;
padding: 0.5em;
float: left;
margin-right: 1em;
}
ul {
margin: 0;
}
#testA ul {
border-radius: 6px;
background: #f6f6f6;
height: 6em;
overflow: auto;
}
The issue is actually caused by the border-radius. Having overflow: auto or overflow: scroll on an element which has a border-radius causes paint storms and to repaint on scroll.
It would be suggested to remove the border-radius from such elements completely.
Demo: http://codepen.io/kevinfarrugia/pen/KgAYyE
CSS:
#testB .container {
border-radius: 6px;
background: #f6f6f6;
display: inline-block;
padding: 0;
}
#testB ul {
height: 6em;
overflow: auto;
}
Related
I have an HTML structure like:
.container {
width: 100%;
height: 300px;
background-color: blue;
}
.dots-container-wrapper {
width: 100%;
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
.dots-container>ul {
padding: 0;
display: flex !important;
transition: all 0.25s;
position: relative;
margin: 0;
list-style: none;
transform: translateX(0);
align-items: center;
bottom: unset;
height: 100%;
}
.dots-container>ul li {
width: 6px;
height: 6px;
margin: 0 2.5px;
background-color: #fff;
border: none;
border-radius: 50%;
display: inline-block;
opacity: .7;
}
<div class="container">
<div class="dots-container-wrapper">
<div class="dots-container">
<ul class="dots">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The problem is that the div "dots-container" has a property max-width: 55px. But in case the width is less than 55px, I would like to use the real width, however, the div is always 55px. This is a problem because I´m using this in a carousel with dots functionality. When there are 5 pictures, you can see 5 dots aligned in the center, but in case there are fewer pictures, let´s say 2, the div is still 55px and the dots don´t seem to be aligned in the center. See example screenshots.
Your .dots-container is displayed as a block. By default a block will always try to fill up the entire width. By making the container .dots-container-wrapper display flex, it's children will only take up as much space as they need (while also centering them if needed).
.dots-container-wrapper {
width: 100%;
display: flex; // change to flex
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
I am trying with overflow-x: auto, but it is not working as it should. Where no scroll bar should be visible, it is showing horizontal scrollbar.
Vertical scrollbar(overflow-y) is working perfectly as desired, but horizontal scrollbar(overflow-x) is not working properly. Here is the JSFiddle link.
Here are some minor changes required in your classes to get it work as you expected.
.container_row
{
width: 100%;
white-space: nowrap;
display: inline-block;
margin: 0 auto;
}
#name_label
{
list-style: disc inside;
margin-left: 10px;
float: left;
color: white;
display: list-item;
width: 50%;
}
#name_text
{
color: white;
padding-left: 5px;
width: 50%;
display: inline;
}
Updated
Check this Example fiddle
You're making your #container1 larger than 100%. Change it to the following:
#container1 {
width: 100%;
padding: 10px 0;
}
I am attempting to display 2 divs on the same line using css while keeping a horizontal scroll on the last div. So far I have not been able to make this work. I have a jsfiddle, http://jsfiddle.net/fortesl/h54t1t63/3/ , and code shown below:
HTML:
<div class="title-menu">
<div class="title">
A long unbreakable name
</div>
</div>
<div class="toolbar-scroll">
<ul>
<l1>item1</l1>
<l1>item2</l1>
<l1>item3</l1>
<l1>item4</l1>
<l1>item5</l1>
<l1>item6</l1>
<l1>item7</l1>
<l1>item8</l1>
<l1>item9</l1>
<l1>item10</l1>
<l1>item11</l1>
<l1>item12</l1>
<l1>item13</l1>
<l1>item14</l1>
<l1>item15</l1>
</ul>
</div>
CSS:
ul {;
list-style-type: none;
}
li {
display: inline;
}
.title-menu {
display: inline-block;
z-index: 1004;
max-width: 540px;
max-heigth: 40px;
}
.title {
display: inline-block;
font-size: 21pt;
text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
letter-spacing: 2px;
height: 47px;
overflow: hidden;
white-space: nowrap;
}
.toolbar-scroll {
overflow: scroll;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
I am able to display the divs on the same line by setting 'display: inline-block' on the last div, but doing so disables the scroll bar. I need the scroll bar to work.
Thank you.
Consider the display: table-cell;, it is really pretty handy.
http://jsfiddle.net/h54t1t63/4/
body {
margin-top: 100px;
}
ul {;
list-style-type: none;
}
li {
display: inline;
}
.container { display:table; }
.title-menu {
display:table-cell;
z-index: 1004;
max-width: 540px;
max-heigth: 40px;
}
.title {
display:table-cell;
font-size: 21pt;
text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
letter-spacing: 2px;
height: 47px;
overflow: hidden;
white-space: nowrap;
}
.toolbar-scroll {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
height: 3em;
text-align: bottom;
width: 100px;
}
<div class='container'>
<div class="title-menu">
<div class="title">
A long unbreakable name
</div>
</div>
<div class="toolbar-scroll">
<ul>
<l1>item1</l1>
<l1>item2</l1>
<l1>item3</l1>
<l1>item4</l1>
<l1>item5</l1>
<l1>item6</l1>
<l1>item7</l1>
<l1>item8</l1>
<l1>item9</l1>
<l1>item10</l1>
<l1>item11</l1>
<l1>item12</l1>
<l1>item13</l1>
<l1>item14</l1>
<l1>item15</l1>
</ul>
</div></div>
The easiest way is to wrap them into a wrapper div and make it display:table-row while the two divs you want in a single line will have display:table-cell
http://jsfiddle.net/1z5xtd8x/
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/
I'm building a navigation menu where I use a regular ul#nav.
In my example bellow I'm trying to make the div inside the li#third hang over the bottom of the ul#nav. I know I need to use position: absolute on the div inside li#third but if I do that then it just takes up the 100% of the width assigned to it.
I tried changing the position: absolute; width: 40%; on the div but then the last li slides under it.
How can I keep the width the same as the li#third element and still have it flow over it at the bottom?
Updated example: http://jsfiddle.net/VyHJR/24/
HTML :
<ul id="nav">
<li id="first">item</li>
<li id="second">item</li>
<li id="third"><div id="search">search</div></li>
<li id="fourth"><div id="flag"><div id="flag_item">4</div></div></li>
</ul>
CSS :
ul#nav { width: 600px; background-color: #fdd; padding: 0; margin: 30px 0 0 20px; overflow: hidden; }
ul#nav li { float: left; text-align: center; }
ul#nav li a { color: #333333; }
ul#nav li#first { background-color: #dff; width: 20%; padding: 6px 0; }
ul#nav li#second { background-color: #ddf; width: 20%; padding: 6px 0; }
ul#nav li#third { background-color: #dfd; width: 40%; }
ul#nav li#fourth { background-color: #ffd; width: 20%; }
li#third div#search { width: 100%; background-color: #333333; height: 40px; color: #ffffff; }
li#fourth div#flag { width: 100%; height: 20px; background-color: #333333; }
li#fourth div#flag div#flag_item { width: 1px height: 30px; background-color: red; }
See: http://jsfiddle.net/thirtydot/VyHJR/34/
Now I understand what you were trying to do, it makes sense.
I removed overflow: hidden on ul#nav, which I assume was there to contain the floats, and replaced it with display: inline-block. I could also have used clearfix.
I added position: relative; height: 1px; to ul#nav li#third. Some height was required, otherwise the fourth li takes the place of the third. position: relative to contain the absolutely positioned div#search.
I added left: 0 to div#search purely to fix IE7.
li{ overflow: hidden;
position: relative;}