I've managed to create a sticky first row and first column, but I'm facing several issues.
.App{
display: grid;
overflow: scroll;
}
.grid {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
.row{
display: flex;
flex-direction: row;
}
.cell {
width: 150px;
height: 150px;
flex-grow: 0;
flex-shrink: 0;
}
.row-stick-top {
position: sticky;
z-index: 1;
top: 0;
}
.cell-sticky-left {
position: sticky;
left: 0;
}
Here is my codesandbox
ISSUES
Issues are on MOBILE displays. You can use this link to just view the output
1) As you scroll around, you'll notice that the square on the top left is not super sticky, as if its trying to catch up to the scroll. (I've tried this solution to no avail as well)
2) Overscroll...
I've added in all the parents and even the scroll component .App:
overscroll-behavior: none;
I've added overflow: hidden to the html, body, #root (as mentioned here)
I've added -webkit-overflow-scrolling: touch as mentioned here
I've tried body, html { position: fixed; }
My best guess now, is that I will need to put my first row and first column in different divs that don't scroll the same way as the content one does, and add an event listener for scroll...?
Related
For some reason I am unable to apply height and width to div elements. I am using TailwindCSS and Nextjs.
My goal is to create slides to snap scroll vertically, but the height and width properties are removed in the browser.
Please any suggestions Im desperate.
This is my css for the container and each view within:
.snap-container {
overflow-y: scroll;
width: 100%;
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.snap-view {
height: 100vh;
width: 100%;
display: flex;
}
if you had
.snap-container {
overflow-y: scroll;
width: 100%;
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.snap-view {
height: 100vh;
width: 100%;
display: flex;
}
both your styles will be applied, even if on the picture you are showing only the .snap/view
but the height and width properties are removed in the browser.
this is because those are other properties around the code that are above the code you posted and they may have been overwritten by that, by being cascading
if you want the .h-screen and .w-full properties to apply regardless, you can put them direclty into the element, or trying putting them in the CSS below the .snap-container and .snap-view
try that, hoping I have helped
I have a page-wide wrapping div that has flexbox alignment to center:
.app_container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
}
In this wrapper, I have a menu that can vary in height as the user expands submenus. The problem is when the menu becomes vertically bigger than the window height. Some parts of the menu gets cut off at the top.
Image: https://imgur.com/a/x00tnoJ
One solution that I found was to simply get overflow: auto on the menu. But that causes the scroll bar to appear on the menu, not on the page wrapper. I want the scroll bar to be on the page wrapper.
Image: https://imgur.com/a/0eZM5Iq
Don't think it is relevant, but I use React.
Here is codepen: https://codepen.io/GuacomoleCyclone/pen/xxEoary
EDIT: I've stumbled upon a solution. I've added this and it solved all problems:
html, body{
display: grid;
}
If I understand correctly what your codepen is showing, the issue seems to be coming from setting the width and height on the html element. You want to change:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
to
html, body {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100%;
}
So I'm using flexbox to create the grid unfortunately, I'm a little stuck as to how to make the divs stack on top of each other. This is what it looks like when I hide overflow:auto and add position relative to the carddiv. I believe the divs are stacking on top but they don't look the right way.
this is what it looks like:
Image Link
https://imgur.com/a/1KsJDh7
What I want it to look like is this:
Except positon:absolute makes everything disappear.
I'm new to css/html so I'm not exactly sure what I'm doing wrong.
https://imgur.com/a/mrLsTdX
App.css
* {
/*overflow:auto*/
}
.App {
/*display: flex;*/
/*flex-wrap: wrap;*/
}
Card.css
.container{
background-color: yellow;
display: flex;
flex-flow: column;
text-align: center;
position: relative;
margin: 10% 10% 10%;
}
.cardDiv {
height: 100vh;
position: absolute;
}
.cardPicture {
background-color: blue;
height: 50vh;
}
.cardDescription {
background-color: green;
height: 50vh;
}
However, without position:absolute it looks like this which is what I want it to look like except it doesn't stack. I assume the first version is stacked which is why it only shows one div?
The code below is for the second image link:
https://imgur.com/a/mrLsTdX
App.css
* {
overflow:auto
}
.App {
/*display: flex;*/
/*flex-wrap: wrap;*/
}
Card.css
.container{
background-color: yellow;
display: flex;
flex-flow: column;
text-align: center;
position: relative;
margin: 10% 10% 10%;
}
.cardDiv {
height: 100vh;
}
.cardPicture {
background-color: blue;
height: 50vh;
}
.cardDescription {
background-color: green;
height: 50vh;
}
The cardDivs are being generated through a map function that is inserting the divs.
The html looks like this:
<div className='container'>
<div className="cardDiv">
<div className="cardPicture"></div>
<div className="cardDescription"></div>
</div>
</div>
Does anyone have any idea on what I could do make the divs stack up without disappearing?
I think the issue is the combination of a flex container and flex items that have been set to absolute positioning. When you set position: absolute on .cardDiv it takes all the cardDiv elements out of the flex flow, and without any width or content, the cardDiv's disappear. As an experiment, take your first CSS block and add a width (say, 50px) to .cardDiv. You should see the cards reappear, stacked and taking up 50 pixels horizontally.
When you set a element to display: flex or display: inline-flex, all the direct children of that element become flex items. You can see all the things that does to the children by default here, and the purpose of the various flex properties are there to manipulate how the children will be displayed along the axis you specify. If you set one of these flex-items to absolute positioning, however, it takes that element out of that flex configuration.
If I understand what you want correctly, I'm not sure you need the container to be flex at all. Try taking the flex properties out of the container, setting the cardDivs to position:absolute and setting width and height to conform to how much of the screen you want filled.
.container {
position: relative;
margin: 1rem;
}
.cardDiv {
position: absolute;
width: 100%;
height: 100vh;
}
.cardPicture {
background-color: blue;
height: 50%;
}
.cardDescription {
background-color: green;
height: 50%;
}
Let me know if this is not what you were looking for-- I figure you can adjust it to how you want the cards to appear. But that's them stacked and split 50-50 between picture and description.
I have the following markup and css:
https://jsfiddle.net/f0u9kpkb/
The key section is:
.grid {
border: 1px solid #bdbdbd;
display: flex;
flex: 1;
flex-direction: column;
overflow-x: auto;
height: 200px;
}
.grid .grid-body {
display: flex;
flex: 1;
flex-direction: column;
overflow-x: visible;
overflow-y: auto;
}
I would expect my code to produce a horizontal scrollbar on the outer div, and a vertical scrollbar on the inner div (on overflow), but in the example I get 2 horizontal scrollbars (despite setting overflow-x: visible on the inner scroll bar)
Is there a way to achieve the effect I am looking for
Please review the overflow property on w3schools.com
You have a couple of issues I can see going on here. The first is you may need to add more rows to your table to make it longer so that it actually scrolls (it didn't on my monitor).
The second is you are defining overflow properties for the .grid class twice.
Once here:
.grid {
border: 1px solid #bdbdbd;
display: flex;
flex: 1;
flex-direction: column;
overflow-x: auto;
height: 200px;
}
But then you have this class:
.grid .grid-body {
display: flex;
flex: 1;
flex-direction: column;
overflow-x: visible;
overflow-y: auto;
}
which changes the properties for not only the .grid-body class but also the .grid class
I removed the overflow properties from this class and added another style for the .grid-body class only so it doesn't override the .grid class properties.
.grid-body {
overflow-x: hidden;
overflow-y: visible;
}
I also added more rows to your table. This achieves your requested behavior of a vertical scroll on the inner div and a horizontal div on the outer div. See my JSFiddle.
You may want to play with the way it looks. I recommend setting the outer divs overflow to overflow: auto and the inner divs overflow to overflow: visible like I did in this JSFiddle.
you need to add right:0 CSS to .grid .grid-body Class
And
Added a new class .fix-position{
top:auto;
position:fixed;
}
Please review my JsFiddle
Please let me know, if there is any issue.
Is there a other way to put an HTML element to the bottom except :
position: absolute;
bottom: 0;
and at the parent element:
position: relative
...or setting the margin so that the element fits exactly at the bottom?
Well, you can also use position: fixed; bottom: 0;, which will stick the element to the bottom of the window. That means it won't even scroll with the rest of the page.
When you use that for a full-width footer or the like (the most likely use case), you'd then need to add a margin to the rest of the page content so that it doesn't get hidden behind (or hide) the footer.
Other than that you're pretty much stuck with the options you mentioned.
Full documentation on the position property can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
You can also use position: fixed
.elem {
position: fixed;
bottom: 0;
}
Or you can use Flex then set your element to align-self: flex-end
e.g.
.container {
height: 150px;
width: 150px;
display: flex;
display: -webkit-flex;
-webkit-flex-direction: row;
flex-direction: row;
border: 1px solid red;
}
.container div {
-webkit-align-self: flex-end;
align-self: flex-end
}
Fiddle