When the screen size is smaller, the rest of the side bar content is invisible (like overflow: hidden) in my project. But it in example it is scrollable, even though it is scrollable it is stretching 1.cms-element, if I make align-items: flex-start; it is only affecting 1.cms-element and making huge gap between 3.cms-element.
If I give overflow-y: scroll; max-height: 100vh;' to .side class it is effecting sidebar height and style. If I give min-height: 100vh; to .side class it working but stretching another elements to fit in the content.
STACKBLITZ
How can I achieve this without effecting another elements ? Also order should not change as given 1, 2, 3, 4.
How can I make sidebar visible in all sizes without effecting other elements size
One solution could be to wrap the content inside the sidebar in a container with a fixed height and overflow-y: scroll; This way, the container will be scrollable while not affecting the rest of the page elements.
HTML:
<div class="side">
<div class="side-content">
<div class="cms-element">1. CMS Element</div>
<div class="cms-element">2. CMS Element</div>
<div class="cms-element">3. CMS Element</div>
<div class="cms-element">4. CMS Element</div>
</div>
</div>
CSS:
.side {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.side-content {
height: 400px;
overflow-y: scroll;
}
Related
I have a React application with this basic layout:
function App() {
return (
<div className="app">
<Header />
<Main />
<Footer />
</div>
);
}
export default App;
My issue is that I have separate stylesheets for each of these components, but I can't get my footer to both be at the bottom of the page, and always stay below content. That is, if the page is blank, the footer would still be at the bottom, and if there was content that was larger than the viewport height, the footer would still remain under it.
I've seen answers to this issue, but only with regular HTML pages, not with different React components with different stylesheets. I have an index.css, App.css, and CSS pages for each of my App components.
Is there a way I should go about it? Which stylesheet should I add the code to have the footer stay at the bottom and below the content. I currently have code in my Footer.css, but the code doesn't keep the footer at the bottom of the page and below content.
I think the issue is that usually all the components are on the same HTML page within the body, but React is broken up a little differently. Any help would be great.
You could add the below lines inside index.css for example. You can change auto to a fixed value if you want, like 100px.
.app {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 3rem;
}
That would do the job. Additionally you can make sure there isn't some padding or margin coming from the outside, I mean the div with root id, body and html, to avoid any unnecessary horizontal scroll.
You need to add style to global container:
html,body,#root {
display: flex;
flex-direction: column;
min-height: 100%;
}
then add style to your footer component:
.footer {
padding-top: auto;
}
I won't recommend using
min-height: 100vh;
it will break on mobile, because of how its calculated.
In index.css add this:
Footer {
width: 300px;
text-align: center;
position: relative;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
Example: https://codesandbox.io/embed/quirky-sound-bitt9k?fontsize=14&hidenavigation=1&theme=dark
You can change position: fixed; if you want the footer section to show at the bottom of the page relative to the viewport, rather than relative to the page content.
Sources for your reference:
https://getridbug.com/html/transform-translate-50-50/
https://www.w3schools.com/css/css_positioning.asp
I was having an issue using grid and grid-template-rows, but switching to flex did the trick.
My understanding is that using a flex-direction: column; and justify-content: space-between; spaces my three components and forces my <Footer /> underneath <Main /> no matter the viewport height.
If anyone has a better understanding of why my answer works better than others, I'd love an explanation.
index.css file:
.app {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
After way too much time agonizing over the breakage of a simple sticky sidebar component I've used without issue on numerous projects, I identified a partial solution that caused other issues.
This sidebar makes use of flexbox to keep the sidebar in place and treat a container div like the body of the page.
Unfortunately, it broke as soon as I started using it in Vue.js. I initially assumed it was because the element heights were not responding to dynamically populated content, but this is not the case.
The wrapper structure looks like so:
<html>
<body>
<div class="wrapper">
<div id="sidebar>
</div>
<div class="container">
</div>
</div>
</body>
</html>
And the CSS:
html {
position: relative;
height: 100%;
box-sizing: border-box;
width: 100%;
overflow-x: hidden;
height: 100%;
}
body {
overflow-x: hidden;
margin: 0;
min-height: 100%;
position: relative;
background-size: 100vw 100vh;
background-attachment: fixed !important;
width: 100%;
}
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
height: 100vh;
position: sticky;
position: -webkit-sticky;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
NB: I did successfully cause the sidebar to look like it was sticking by setting the body height to 100%, but the actual links still scrolled, even though you could see the sidebar. Furthermore, this broke the layout properties of the Flatpickr datepicker being used on one of the most important pages in the site. Obviously, this is not a tenable solution, because a visible but interaction-less sidebar is useless, and I need my pages to actually work.
To be clear-- I chose to use sticky rather than fixed because I wanted to take advantage of flexbox to set the page content's container effectively next to the sidebar, rather than simply pushing it over using margin to keep it from being overlaid by the sidebar.
Here's a (messy, I apologize-- it's pulled out of a muuuuuuuch larger project) Codesandbox to show you the sidebar in context.
https://codesandbox.io/s/8897m88kl
Say you have a dropdown with a lot of options that overflow the page height. I know I can use overflow: auto to make it scroll, but only if I set it a max-height. How do I set a max-height that ensures the element won't overflow the browser window?
Like in this image
The left is what it's like now. Dropdown overflows page. The right is what it should be like -- the dropdown is resized to be height of just under the page height.
I've tried setting max-height to different values like 45vh since the dropdown is about halfway down the page, but this needs to fit all types of screen sizes so isn't flexible enough.
CSS solutions preferred in this case.
You can calculate the current distance between the dropdown and the bottom of the page (https://stackoverflow.com/a/7656176/5370933) and append styles with this value.
.myDropdown {
max-height: myDistance;
overflow: scroll
}
I think something like that could works. But you will have to use some JS to get the distance dynamically (depend on the user screen and/or user scroll before the dropdown opening...)
If I understood correctly the layout of your web page, the dropdown is the last element (well maybe) in the page.
What you could do is, first, add this lines to your main page container:
#page {
min-height: 100vh; /* Or the value you like most */
}
Now we have access to the full height of the document.
Next, you can simply use flexbox's space-between or space-around value to keep the dropdown on the bottom of the page (like footers).
But now, you want a little space between the end of the page and the dropdown. Simply add a margin-bottom and its done.
Now be aware that, I understand that there may be a footer or something below the dropdown. You can implement this solution in any container.
This isn't a bug-free solution, but it doesn't require javascript.
Here is a working example.
function _test_add(){
document.getElementById("dropdown").innerHTML += "<li>Item</li>";
}
#page {
min-height:100vh;
display:flex;
flex-direction: column;
justify-content: space-between;
}
#addbtn {
margin:0 auto;
}
/*
* Fictif Content
*/
#main-content {
height: 50vh;
display:flex;
justify-content:center;
align-items:center;
background-color:gray;
}
#dropdown {
min-height: 8em;
max-height: 18em;
background-color:#f1f1f1;
padding: 0;
list-style-type: none;
overflow: auto;
margin-bottom:4em;
border: solid black 2px;
}
#dropdown li {
padding:1em;
}
#dropdown li:nth-child(odd) {
background-color: #fafafa;
}
<div id="page">
<div id="main-content">
Main Content
</div>
<button id="addbtn" onclick="_test_add()">[TEST] Add items in dropdown</button>
<ul id="dropdown">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
I want absolute-positioned SPANs inside a container show scrollbars on the container when its position overflows the container.
However, even with overflow:auto on the container, the SPAN flies outside the container div, as if it does not belong to the container.
I will append many SPANs, so other values of position (like relative) will mess the independent positioning desired for each SPAN, albeit making the scrollbars.
Here is the fiddle:
https://jsfiddle.net/v8x2bot4/1/
CSS:
.container {
background-color: #AFF;
width: 500px;
height: 500px;
overflow: auto;
}
.fly {
border: solid black 1px;
background-color: #0F0;
position: absolute;
}
HTML:
<div class="container">
<span class="fly" style="left:450px; top:100px">blablablablabla</span>
<span class="fly" style="left:300px; top:200px">blablabla2</span>
</div>
How can I hide the overflowing part of the SPAN and make a scrollbar appear as needed?
Hope HTML+CSS can do it without javascript. But solutions with javascript that work regardless of the number of SPANs should be very easy to maintain and suitable.
Add position: relative to .container
https://jsfiddle.net/xfmrtx3s/
<div id="content">ABC<div>UUU</div></div>
I just want to find some way to align vertically in middle for div#content. Actually I have some solutions. First one is using line-height, however it can not work if there's another div in the div#content. And vertical-align:middle I think just works for table? Is there any other usable solutions?
I try the vertical-align:middle and display:table-cell, the other issue comes,
the width cannot works, i give that div a big width, that can fill out the screen(1438px), but now the width is also that number but just fill out the 1/3 width of screen.
The table-cell seems like make every cell in the screen, but i just want to give them specified length for table cell.
use this for your requirement
#content {display:table-cell; vertical-align:middle}
With display:table-cell declared on your element, vertical align will work.
#content {
display:table-cell;
vertical-align:middle
}
See thorough explanation on vertical alignment for both normal and inline DIVs at http://phrogz.net/css/vertical-align/index.html
Expounding upon other answers using display:table-cell;vertical-align:middle... Table cells cannot have 100% width, but their containers can!
Using a CSS Table
Items with a table display accept dynamic widths:
#existingContainer {
display: table;
width: 100%;
}
#content {
display: table-cell;
vertical-align: middle;
height: 100px; /* example */
}
Say, with sample HTML:
<div id="existingContainer">
...
<div id="content">ABC<div>UUU</div></div>
...
</div>
Using a Clearing Div
Alternatively, putting your table-cell directly into a block element will ensure no inline elements sit beside it:
<div id="newContainer">
<div id="content">ABC<div>UUU</div></div>
</div>
With sample CSS:
#newContainer {
display: block;
}
#content {
display: table-cell;
vertical-align: middle;
height: 100px; /* example */
}