I am rephrasing this post to make more sense:
The background of my page has an image and I am trying to hide the track of the scrollbar. however, when I set the background color to transparent it leaves a White gap where the track used to be. this is because the scrollbar takes up space on the page and you cannot put anything under it. I set the position of the scrollbar to absolute but that Property does not apply to this element.
I cannot get this to work with the rebuild scrollbar, I might have to build one with js.
EDIT:
I was trying to do this again recently and found a solution if you set overflow-y: overlay; the scrollbar will overlay on-top of the content. this makes the scrollbar thumb appear to float over the page if the track is transparent.
You can set background-color: #000; for your html page. It will remove the white corners for scroll.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<style>
html {
background-color: #000;
color: aliceblue;
margin: auto;
background-image: url('https://www.ledr.com/colours/black.jpg')
}
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: red;
border: 1px solid black;
border-radius: 20px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: lightgreen;
border: 1px solid black;
border-radius: 20px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: green;
background-size: 100px;
}
</style>
</head>
<body>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
<p>My text</p>
</body>
</html>
Related
Consider the following HTML (JSFiddle):
<div style="display: flex; align-items: flex-start; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan; flex-shrink: 0">
Yo
</p>
<div style="display: flex; flex: 1 1 0px; align-items: flex-start; background-color: green; overflow: visible">
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
</div>
</div>
<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>
We have a 500px wide flex container, and inside that container are two children: one which takes up 50px with flex-shrink: 0 and one which is supposed to take up the remaining space (in this case, 450px) using flex: 1 1 0px. However, it's actually expanding slightly further out, and its actual rendered width is 472.83px. If you add more content inside it, it gets bigger and bigger, unless you set a width: 0px on it, in which case its rendered width is 450px as expected.
Why is this container's width expanding to be larger than 450px? I thought that using flex-basis: 0px meant that the effective size for flex purposes would always be 0px, and as such I would expect the container to grow to fill its parent's available width regardless of its content.
With 13 of the <p> tags inside the container, it still has the 450px expected with, even though the text overflows (as expected). However, with the 14th <p> tag, the container starts growing, and after the 14th it keeps growing, by about 33.77px per <p> tag. What limit is getting hit on the 14th tag that causes the container to behave this way?
Why does setting a width: 0px on this container cause it to have 450px width as I expected? I thought flex-basis always took priority over width.
I originally thought this might be a browser rendering issue, but the issue happens the same way in Chrome, Firefox, and Safari.
The second flex item (green) overflows the primary container for two reasons:
That's the minimum width it can achieve with the content it has before flexibility properties are applied. In other words, the browser establishes the main size of the container before factoring in flex-shrink: 0.
The default minimum width of flex items is min-width: auto (meaning the item can't be smaller than the size of its content), and the nested flex container is also a flex item. When you override the default—with min-width: 0, for example—it fits.
First of all, you can remove the flex property and you will still get the same result. I am also removing the properties that won't affect the result as well:
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan; flex-shrink: 0">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
</div>
</div>
<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>
Now, to understand what is happening, we need to add the properties one by one.
The initial configuration is that all the elements need to shrink so we get the following:
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>
You can clearly notice that in all the 3 cases, the text will wrap in order to try to get inside the 500px. Notice the difference in the wrapping between the first and second case.
The second case is the maximum wrapping you can have with your text since by default we cannot split words. And if you start adding more text, you will have overflow like in the 3rd case because there is no room for wrapping and for shrinking.
Now let's introduce flex-shrink: 0 for each case
The first one:
.shrink p {
flex-shrink:0;
}
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<br>
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;flex-shrink:0">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<br>
<div class="shrink" style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>
By adding flex-shrink: 0 to the blue element we still have some space for the green element so it won't overflow and by adding flex-shrink: 0 to its content it will overflow but the green element won't get bigger (due to the shrink effect as well)
Now the second case which is the case of your question:
.shrink p {
flex-shrink:0;
}
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<br>
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;flex-shrink:0;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<br>
<div class="shrink" style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;flex-shrink:0;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>
Notice how adding flex-shrink: 0 to the blue element already create an overflow of the green one because this one cannot be smaller than its min content (when all the text is already wrapped). This is the default behavior of flex items. Adding flex-shrink:0 to its content won't change nothing because a flex item will always try to shrink but not beyond its min-width.
That's why adding min-width:0 (or width:0) can fix this issue:
.shrink p {
flex-shrink:0;
}
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<br>
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;flex-shrink:0;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<br>
<div class="shrink" style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;flex-shrink:0;">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<br>
<div class="shrink" style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan;flex-shrink:0;">
Yo
</p>
<div style="display: flex; background-color: green;min-width:0; ">
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
<p >This is some text</p>
</div>
</div>
<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>
Now, I let you imagine the 3rd case where we add more content. We simply increase the min-width constraint a little each time and we make the green element bigger.
Related: Why don't flex items shrink past content size?
I have a screen in my React App that serves as an Overview where a list should display all created accounts. But I want a button fixed at the bottom and the account list scrollable in the area that is not taken by the header elements and the bottom button. So it should fill the entire screen but only the list should be scrollable.
I tried with flex-grow but it did not seem to work...Thanks for your help!
.list {
overflow: scroll
}
<div class="container">
<header>some Header</header>
<p>Some description</p>
<div class="list">
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
</div>
<button>Some button</button>
</div>
Use scroll instead of scrollable. Also a max-height for list:
* {
box-sizing: border-box;
}
body{
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20px;
}
.list {
overflow-y: scroll;
max-height: 50vh;
}
button {
width: 100px;
}
<div class="container">
<header>
<p>some Header</p>
<p>Some description</p>
</header>
<div class="list">
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
</div>
<button>Some button</button>
</div>
I am creating a new react website while I am trying to create cards on the home page after 100vh of height the background color is not showing up?
.Home {
background: #121212;
color: #b9b9b9;
height: 100vh;
width: 100%;
}
<div className="Home">
<TopBar />
<SearchBar />
<div className="container">
<div className="row">
<div className="column">
<div className="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div className="column">
<div className="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div className="column">
<div className="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div className="column">
<div className="card">
<h3>Card 4</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
Here is the image of this, please help me solve this problem
The body of the index.html has a margin of 8px.
Add this to your main stylesheet:
body {
margin: 0;
}
I can't see the image, but I think this is the problem.
If the "Home" component has a parent with flex or inline display, and the background is not going to move (i.e. changing your card with an animation.)
You can set the .Home style like this:
.Home{
position: fixed;
top: 0;
left: 0;
background: #121212;
color: #b9b9b9;
width: 100vw; //Remember to use 100vw instead of 100% for the width
min-height: 100vh;
}
Easy way to achive this is setting body and html to height: 100vh.
Also I changed className instead of class since this question is not related with react.js.
body, html {
background-color: #121212;
height: 100vh;
}
.Home {
color: #b9b9b9;
width: 100%;
}
<div class="Home">
<TopBar />
<SearchBar />
<div class="container">
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
I've an issue at my project. At one of my page, I'm using a markup like this:
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
Fiddle: http://jsfiddle.net/learner73/RW747/
So, it'll look like this at desktop:
But, it looks at mobile like this:
It should be like that as bootstrap's responsive layout. No doubt with that. But, definitely, I need step 1, 2 and 3 in serial (not step 1, 3, 2) at mobile:
This will be generated if I arranged my HTML code like this:
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
</div>
</div>
Fiddle: http://jsfiddle.net/learner73/gLjG4/
Now, at mobile, it looks perfect. But, at problem is at the desktop, if the height of "step 2" content is high, it push the "step 3" content below much:
But, it should be like my first image.
Have bootstrap classes or event to handle scenario like this? If not how can I handle this issue properly? Thanks in advance.
Try offsett or column ordering classes.
Now i've tested column responsive reset, it works for your intent
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<!-- reset -->
<div class="clearfix visible-md"></div>
<!-- reset -->
<div class="col-md-6">
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
here the fiddle http://jsfiddle.net/keypaul/9nh86/
You can style it better, but here is an approach using jQuery
Basically, I've splited it into independent divs named "one", "two" and "three", and used this:
$(window).resize(function() {
winWidth = $(window).width();
winHeight = $(window).height();
if(winWidth <= 986) {
$("#two").insertBefore("#three");
} else {
$("#three").insertBefore("#two");
}
});
http://jsfiddle.net/XF6Uq/3/
Here you have another approach. Instead of using insertBefore, I'm using classes.
Basicaly, you float left every div, but the "Step 2" one, you change it to float right when it's "desktop wide"
http://jsfiddle.net/hige/3TPec/
Hope it helps!
I have a div with width:500px and height:300px in the middle of a page.
I want inside this div to have my navbar-fixed-top.
Can you please correct my html/css to accomplish that?
Thanks
http://jsfiddle.net/MgcDU/7874/
<div class="container" style="width:500px;height:300px;border:solid black 1px;overflow:scroll">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner" style="padding:10px">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" style="height:70px;" data-toggle="dropdown">
<div class="icon-some"></div>Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="wrapper">
<div id="content">
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
<div id="padding-bottom"></div>
</div>
</div>
Based on what you said you want the nav bar with the class navbar-fixed-top to be inside the div, it seems simple enough.
All I did was add a position:relative to the css file for the .navbar class
.navbar{
position:relative;
}
Here is it working
http://jsfiddle.net/tKCm6/
Now if you wanted the nav to stay fixed in the div as you scroll down the page thats a different story.
Here is the code for that
.container{
position:absolute;
}
.navbar{
position:fixed;
width:500px;
}
and live
http://jsfiddle.net/vARTv/