Here on this page I need to display the SPACIAL and RECOMMENDED section in in single line with horizontal-scroll.
My current css is
.box-product {
width: 100%;
overflow: auto;
}
I have tried like this
.box-product {
width: 100%;
height: 320px;
overflow-x: scroll;
overflow-y: hidden;
}
But it does not enable horizontal scroll, It still shows the vertical scroll.
Set width to .box-product equal to product width * product count. Nothing else.
Now, you have there width: 100%; (737px) and the default CSS behavior in this case is to break the content to another line. When you have there overflow: hidden, the second line is hidden.
Provide your box-product class width in pixel not in percentage. And than apply overflow:auto.
It will work.
Ex:
.box-product {
width: 100px;
overflow: auto;
}
And if you want only horizontal than add overflow-x:auto;
The easiest way to achieve this .box-product { width: max-content; } (modulo vendor prefixes).
Alternatively display: flex, since its children do not wrap by default.
Remove the width: 100% and make sure your content doesn't float.
Related
I'm currently trying to create a horizontal card row for my website. The cards have a little transition where they lightly rotate and raise on hover, like so:
I want to make the row scrollable on the horizontal axis to make it responsive, but after setting overflow-x: auto; on the container, I noticed that the cards now get clipped, making the hover effect look pretty bad.
I've tried setting overflow-y: visible; on the container but it has no effect. Is there any way I can keep my cards from clipping but still leave the container scrollable?? Thanks in advance for your help.
You should wrap the elements in 2 divs. The first and inner will have a width(for horizontal scroll) that is greater than the viewport. And the second and outer div, will have a width, that is exactly the same as the viewport. The second div will then have the property overflow-x: scroll; overflow-y: hidden and it should work.
Example:
body {
width: 100vw;
height: 100vh;
}
outer-wrapper {
width: 100vw;
height: max-content;
overflow-x: scroll;
overflow-y: hidden;
}
inner-wrapper {
width: 150vw;
height: 100px;
display: flex;
}
cards {
// what ever properties you want
}
I have a mat-table that I want to configure using flex to grow to use the entire browser available space and display a scrollbar if the number of records don't fit.
I manage to do it by wrapping the table inside a div and assigning a static height to this div, for example:
.example-container {
height: 800px;
overflow: auto;
}
But when I try using flex the table just overloads the available height:
.example-container {
flex: auto;
overflow: auto;
}
Please take a look at the project I created in Stackblitz
Any advice would be greatly appreciated.
You will need to define some sort of height in your container for this to work. This would be 90% of the browser vertical height.
.example-container {
height: 90vh;
overflow: auto;
}
Update
Here is solution using flex
.example-container {
flex-grow: 1;
flex-basis: 90vh;
overflow: auto;
}
I have a table with two fixed columns, one on the left and one on the right.
At the moment it only works in one resolution. But when the resolution is changed, the column on the right gets very messed up.
This is the main class that controls the margins (to allow room for the fixed columns) along with the width:
#myTable > .wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 83%;
margin-left: 126px;
margin-right: 45px;
}
I have tried going into the developer tools and changing the width value down as I resize the browser. So far, this is the only solution I have found. Although, this would requre tons of media queries which is not a preferable solution.
How could I possibly edit my css classes to make this responsive?
Here is a demo
Try limiting the width of the wrapper by using min-width and max-width:
#myTable > .wrapper {
overflow-x: scroll;
overflow-y: visible;
max-width: 83%;
min-width: 40%;
margin-left: 126px;
margin-right: 45px;
}
FIDDLE DEMO
If I add the following css
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
This will solve the white-space problem but it will remove the horizontal scroll-bar and it is applied 100% width whatever the size of window but my site consists of fixed width. What can I do here?
Use min-width to achieve what you are looking for.
For Instance,
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
min-width:xxpx; /* enter a pixel value more than 1px that distorts the layout on resize */
}
PS: xxpx is a representative value. Use that value that is ideal for your issue resolve.
I would like to setup a horizontal container that holds multiple (smaller) columns within it. I have the following setup:
http://jsfiddle.net/f464W/1/
As you can see, when you resize the window, the .column containers just stack vertically when the width of the window is too small to contain them all.
Shouldn't
overflow-x: hidden
Stop the .column class from being displayed when they run off the side of .container?
Add white-space: no-wrap the .container
http://jsfiddle.net/feitla/f464W/17/
.container {
max-height: 600px;
width: 100%;
margin-top: 100px;
background: red;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
white-space: nowrap;
}
With overflow-x: hidden will hide what exceeds on the right of your div. But the natural behaviour of the divs are to wrap to the line below when they're out of space, therefore nothing exceeds.
You need to make the divs not wrap. if you add white-space: nowrap to your container CSS they will only stack horizontally.
You can add float: left; to .column and that should give you the desired effect. You'll then have to play with margin if you want to maintain the spacing you had between the columns.