I've styled the scrollbars in my web app with the following CSS. I've specifically styled it to show the buttons at the top and bottom of the scrollbar.
::-webkit-scrollbar{
width: 9px;
height: 9px;
}
::-webkit-scrollbar-thumb {
background-color:rgba(155, 155, 155, 0.5);
}
::-webkit-scrollbar-button:single-button {
background-color: rgba(155, 155, 155, 0.5);
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
::-webkit-scrollbar-button:single-button:vertical:increment{
border-radius:0px 0px 10px 10px;
}
::-webkit-scrollbar-button:single-button:vertical:decrement{
border-radius:10px 10px 0px 0px;
}
::-webkit-scrollbar-button:single-button:horizontal:increment{
border-radius:0px 10px 10px 0px;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement{
border-radius:10px 0px 0px 10px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Works great on regular pages and scrollable divs, as you can see (when you run the code snippet) the scrollbar is styled and the buttons appear at the top and bottom of the bar. On select elements on the other hand, the top and bottom buttons do not appear. Is it possible to show the buttons in a select? If so, how?
::-webkit-scrollbar{
width: 9px;
height: 9px;
}
::-webkit-scrollbar-thumb {
background-color:rgba(155, 155, 155, 0.5);
}
::-webkit-scrollbar-button:single-button {
background-color: rgba(155, 155, 155, 0.5);
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
::-webkit-scrollbar-button:single-button:vertical:increment{
border-radius:0px 0px 10px 10px;
}
::-webkit-scrollbar-button:single-button:vertical:decrement{
border-radius:10px 10px 0px 0px;
}
::-webkit-scrollbar-button:single-button:horizontal:increment{
border-radius:0px 10px 10px 0px;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement{
border-radius:10px 0px 0px 10px;
}
<select>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
<option>Why no scroll buttons?</option>
</select>
Related
I have a similar problem as described here:
Center page vertically, make it scroll if bigger than screen
however I'm trying to find a pure CSS only solution, not involving JS.
I have a fixed containers defined like that:
.parent{
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.child{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(50%);
margin: 0 auto;
width: 600px;
}
It's well centered (as expected) when child is smaller than parent/viewport height. The problem is when child's height is greater then parent's height. Let's say parent has height 1000 px and child's height is 1600 px.
With above styles applied, I can scroll child (as expected) but not all the way to its top. The top of child is hidden and not possible to scroll to it.
What I want to achieve is to be able to scroll the child all the way to its top border.
The main question is if it's possible to achieve that with CSS only?
.parent {
display: flex; /* Use this proparty */
align-items: center; /* For Center align */
justify-content: center; /* For Center align */
overflow: auto; /* For auto scroll */
padding: 20px; /* This is only for spacing */
}
.child {
border: 1px solid red;
margin: 0 auto;
max-width: 560px; /* Use max-width instant of width in responsive it's help you for better view */
max-height: 100%; /* Use max-height instant of heiht in responsive it's tack auto height from text/content */
}
<!-- Parent Div start Here -->
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<!-- Parent Div ends Here -->
In bootstrap 4.5 app I make layout with 100% height and header/footer, based on snippet:
https://jsfiddle.net/MadLittleMods/LmYay/
it works ok, until content part has not too much of data
I tried to add
overflow:auto;
definition of .fill-area-content
and added more data:
https://jsfiddle.net/z0o1cmve/1/
but header is not fixed. How can I fix it ?
Thanks!
you have to set the height to .fill-area-content, header and footer
.flexbox-item.header
{
height:35px;
background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
height:35px;
background: rgba(0, 255, 0, .1);
}
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
height: calc(100vh - (35px + 35px + 16px) );/* add this */
overflow: auto;
}
calculation:
35px - height of header
35px - height of footer
Then 8px padding u have added for .flexbox-item on all sides, so on top padding will be 8px and bottom padding will be 8px totally - 16px
hence the formula will 100vh - other elements height other elements height = (35px + 35px +16px).
So, height: calc( 100vh - (35px + 35px + 16px ));.
use vh-your_custom_height classname if you are using bootstrap.
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
background: #444444;
color: #cccccc;
font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.flexbox-parent
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.flexbox-item
{
padding: 8px;
}
.flexbox-item-grow
{
flex: 1; /* same as flex: 1 1 auto; */
}
.flexbox-item.header
{
height:35px;
background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
height:35px;
background: rgba(0, 255, 0, .1);
}
.flexbox-item.content
{
background: rgba(0, 0, 255, .1);
}
.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
height: calc(100vh - (35px + 35px + 16px) );
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}
<div class="flexbox-parent">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
<p>Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <strong>nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>Lorem 1st point </li>
<li>Lorem 2nd point </li>
<li>Lorem 3rd point </li>
</ul>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <strong>nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>Lorem 1st point </li>
<li>Lorem 2nd point </li>
<li>Lorem 3rd point </li>
</ul>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="flexbox-item footer mb-5 pb-5">
Footer12
</div>
</div>
I've got a fairly simple CSS where I want to display a border slightly off center to the right and bottom, I'm using the pseudo-selector :after to display it.
The problem i'm having is that the border it's displaying is running to the height of the outer div that's dictated by the amount of text displayed, rather than the img itself (which is what I want it to do).
If I put another div inside to wrap around the image it doesn't seem to make a difference, the same if I make the pseudo-selector after the image and convert the image to a block.
Js Fiddle to show all you lovely smart people that might be able to help me!
If I put another div inside to wrap around the image it doesn't seem to make a difference
That’s because that div does not actually wrap around the image taking its dimensions – but is as high as your whole outer container, because that has display: grid
You’d need to wrap .projectimage into an additional div, so that that becomes the grid item that takes full height, and the .projectimage element can then gets is height from the image it contains.
.project {
width: 60%;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
padding: 50px 0;
}
.projectimage {
position: relative;
display: inline-block;
}
.projectimage img {
position: relative;
z-index: 2;
}
.projectcontentleft {
padding-right: 50px;
}
.projectimage img {
width: 100%;
height: auto;
}
.projectimage:after {
content: " ";
position: absolute;
left: 30px;
bottom: -30px;
border: 10px solid rgba(214, 23, 71, 0.07);
display: block;
width: 100%;
height: 100%;
transition: all 300ms linear 0s;
z-index: 1;
}
<div>
<div class="project">
<div class="projectcontentleft">
<h3><strong>Header</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3><strong>Appeals</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="projectimage-holder">
<div class="projectimage">
<img src="http://www.bbbhire.co.uk/images/services2.jpg" />
</div>
</div>
</div>
I'm trying to create a row that spans the width of my device that the user can tap to take then to a specified link.
I've created an image that is the 'disclosure indicator' (chevron) found on table rows in iOS. I just can't figure out how I can set my multi-line text to the left of the chevron, and keep the chevron to the right of the text and centered. (see image).
Any ideas?
Thanks
You can use transform to vertically align the chevron.
Fiddle
div {
position: relative;
border: 1px solid black;
padding: 10px 40px 10px 10px;
}
div:after {
content: '›';
font-size: 40px;
color: #444;
right: 20px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
My margins when using flexbox (current version or display: flex;) seem to be doubled and I can't figure out why. All the other margins between sections on the page show up as 10px as they have been set, but the ones for the flexbox content show up with around double that. I have already tried setting the wrapper div (#output) to margin: 0px; and padding: 0px; but that doesn't have any effect. Is this a flexbox 'feature'? Or is there something wrong with the margin/padding settings for my CSS?
The HTML:
<div id="all_content">
<section id='search_box'>
<h1>Auto Primer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div id="output">
<nav id='user_input'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</nav>
<section id='gene_selected'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
<section id='primers'>
<h2>Primers</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id='how_to'>
<h2>How To Use Auto Primer</h2>
<p><span id="form_out"></span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
The CSS:
div#all_content {
width: 1200px;
margin: 0 auto;
padding: 0px;
}
section#search_box {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border:2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
div#output {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
nav#user_input {
background: #ebf4fb;
border: 2px solid #b7ddf2;
width: 275px;
padding: 10px;
margin: 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#gene_selected {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#primers {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
section#how_to {
padding: 10px;
margin: 10px;
background: #ebf4fb;
border: 2px solid #b7ddf2;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
EDIT:
I managed to get the margins to look the same by giving the left flex element:
margin: 0px 5px 0px 10px;
and the right flex element:
margin: 0px 10px 0px 5px;
instead of margin: 10px; as all the other elements on the page use. While this works I'm still a little at a loss as to why flexbox does this.
EDIT:
Here's a jsfiddle demonstrating the problem: fiddle. Updated and simplified further.
The issue is that margins are applied twice on your side by side flex sections. You can fix this by simply distributing the margins properly between the side by side elements.
Based on CSS3 Definition:
http://www.w3.org/TR/css3-flexbox/#item-margins
The margins of adjacent flex items do not collapse. Auto margins absorb extra space in the corresponding dimension and can be used for alignment and to push adjacent flex items apart; see Aligning with ‘auto’ margins.
This is what happens in your case, that the margins on your side by side flex items do not collapse, but on your other flex items, they do collapse so the margins are not applied twice on those flex items.