I'm trying to figure out how to make a table have a bottom horizontal scroll bar. This is my HTML:
<div class="grid-block table">
<div class="grid-block header">
<div class="grid-block small-2 column">
times 6
</div>
</div>
<div class="grid-block row">
<div class="grid-block small-2 column">
times 6
</div>
</div>
</div>
I have used this CSS thinking it would fix my problem.
.table {
overflow: auto !important;
width: 1400px !important;
}
I've added the importants at the moment just to make sure these stylings are applied.
I should also point out that every element here is a flex item.
Cheers
This code might help you get started.
.wrapper {
width: 100%;
overflow: auto;
white-space: nowrap;
font-size: 0;
}
.wrapper .child {
font-size: 1rem;
height: 50px;
width: 60px;
display: inline-block;
background-color: cornflowerblue;
text-align: center;
border: 1px solid coral;
margin-left: 10px;
}
.wrapper .child:first-child {
margin-left: 0px;
}
<div class="wrapper">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
</div>
Related
I was trying to create a list / table view with dynamic width using flexbox, and encountered a behavior I couldn't really wrap my head around. The result I'm trying to achieve is a width that fits the content of the list, at its' widest point.
.main {
width: auto;
background: rgb(233, 148, 148);
display: inline-flex;
flex-wrap: wrap;
}
.container {
display: flex;
width: 100%;
}
.label,
.value {
flex: 1;
padding: 4px;
}
.label {
text-align: end;
border-right: 2px solid red;
}
.value {
text-align: start;
}
<div>
<div class="main">
<div class="container">
<div class="label">Some Label</div>
<div class="value">Some value</div>
</div>
<div class="container">
<div class="label">Some label 2</div>
<div class="value">Other val</div>
</div>
<div class="container">
<div class="label">Third label</div>
<div class="value">
<div>N/A</div>
</div>
</div>
</div>
</div>
What it boils down to, is that the width seems to be determined by the total characters count, and not the widest point, as I would expect. You can edit the HTML and remove the N/A, for example, and the width will decrease.
When I switch to display: inline-block with white-space: nowrap, the width is as expected, but the "columns" are not aligned.
.main {
width: auto;
background: rgb(233, 148, 148);
display: inline-block;
white-space: nowrap;
}
.container {
display: flex;
width: 100%;
}
.label,
.value {
flex: 1;
padding: 4px;
}
.label {
text-align: end;
border-right: 2px solid red;
}
.value {
text-align: start;
}
<div>
<div class="main">
<div class="container">
<div class="label">Some Label</div>
<div class="value">Some value</div>
</div>
<div class="container">
<div class="label">Some label 2</div>
<div class="value">Other val</div>
</div>
<div class="container">
<div class="label">Third label</div>
<div class="value">
<div>N/A</div>
</div>
</div>
</div>
</div>
What causes the large width to occur when the display is inline-flex? Is there a way to get the behavior I'm trying to achieve? I know it can probably be resolved with display: grid, but I'm looking for a simpler solution.
I know it can probably be resolved with display: grid, but I'm looking for a simpler solution.
It might be difficult if you do not handle the grid-layout fine enough yet, but it looks not that much complicated if you use the grid system ;)
For the width, look at max-content.
simple example:
.main {
width: max-content;
background: rgb(233, 148, 148);
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.label,
.value {
padding: 4px;
}
.label {
text-align: end;
border-right: 2px solid red;
}
.value {
text-align: start;
}
<div>
<div class="main">
<div class="container">
<div class="label">Some Label</div>
<div class="value">Some value</div>
</div>
<div class="container">
<div class="label">Some label 2</div>
<div class="value">Other val</div>
</div>
<div class="container">
<div class="label">Third label</div>
<div class="value">
<div>N/A</div>
</div>
</div>
</div>
</div>
In the past ,before flex & grid , display would use the table-layout.
.main {
display:table;
background: rgb(233, 148, 148);
}
.container {
display: table-row;
}
.label, .value {
padding: 4px;
display:table-cell;
}
.label {
text-align: end;
border-right: 2px solid red;
}
.value {
text-align: start;
}
<div>
<div class="main">
<div class="container">
<div class="label">Some Label</div>
<div class="value">Some value</div>
</div>
<div class="container">
<div class="label">Some label 2</div>
<div class="value">Other val</div>
</div>
<div class="container">
<div class="label">Third label</div>
<div class="value">
<div>N/A</div>
</div>
</div>
</div>
</div>
I have a flex container that wraps some cards. I have implemented a horizontal scroller with flex(using flex-nowrap). The flex wrapper container is subjected to have a 36px left spacing and a 0px right spacing initially. The catch here is after the last card is scrolled I need to have a 36px right spacing.
here is what I did so far
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px -16px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding: 0px 16px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
I have given a negative right margin for the wrapper to make it look like it's flowing from the right.
Once the last element is scrolled/reached I want it to look something like this
enter image description here
One thing I noticed is my scroll-inner(flex-nowrap) is not wrapping up the entire children. I presumed if we have five children each having width 50px. The scroll-inner should show a scrollable width of 250px, Unfortunately, it's not how flex is behaving. Any help or suggestion is much appreciated.
Updating few images that show what I'm really looking for
During scrolling
After scrolling till the last card
Try
.scroll-wrapper {
overflow: hidden;
margin: auto;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: auto;
}
I have found a fix and hope this help someone.
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding-right: 40px;
margin-right: -8px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
Please do answer if someone has a better solution!! Thanks
I'd like to align a list of elements inside of a container to bottom. By default it sticks to the top of the container.
Note that this list needs to keep its scroll ability. So I can't use flex. Flex makes elements resize and avoids scroll.
I can't think of an easy way to do this.
JSFiddle
#list {
height: 200px;
}
.item {
height: 30px;
line-height: 30px;
background-color: lightgray;
margin: 3px 0;
}
<div id="list">
<div class="item">Item0</div>
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
<div class="item">Item9</div>
</div>
There is a hack using transform scaling in the y-direction - see demo below:
#list {
height: 200px;
border:1px solid green;
overflow-y: auto;
transform: scaleY(-1);
}
.item {
height: 30px;
line-height: 30px;
background-color: lightgray;
margin: 3px 0;
transform: scaleY(-1);
}
<div id="list">
<div class="item">Item0</div>
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
<div class="item">Item9</div>
</div>
#list {
position: absolute; bottom: 0;
}
make sure to add position: relative; to the above element
https://jsfiddle.net/ege89t3h/
I'm using Angular Material for my webpage. I have to show the same layout in different ways for desktop and mobile. Below are the layouts and the corresponding code:
Mobile Layout
Mobile code
<div layout="column" style="text-align: center;">
<div flex-order="0">
<div class="child-1">Child 1</div>
</div>
<div flex-order="1">
<div class="child-2">Child 2</div>
</div>
<div flex-order="2">
<div class="child-3">Child 3</div>
</div>
</div>
Desktop Layout
Desktop code
<div layout="row" style="text-align: center;">
<div flex-order="0">
<div class="child-2">Child 2</div>
</div>
<div flex>
<div layout="column">
<div flex-order="0">
<div class="child-1">Child 1</div>
</div>
<div flex-order="1">
<div class="child-3">Child 3</div>
</div>
</div>
</div>
</div>
CSS code
.child-1, .child-2, .child-3 {
border: 1px solid black;
background-color: gray;
margin-bottom: 10px;
}
.child-1, .child-3 {
height: 20px;
}
.child-2 {
height: 40px;
}
There is an obvious HTML code duplication to show the different layouts. Is there some way that these 2 layouts could be shown without duplicating the code?
Try this
<div layout-sm="column" layout-gt-sm="row">
<div hide-sm hide-xs style="background:grey" layout-margin> Child 2</div>
<div layout="column" layout-align="space-around">
<div style="background:grey" layout-margin> Child 1</div>
<div hide-gt-sm style="background:grey"layout-margin > Child 2</div>
<div style="background:grey" layout-margin> Child 3</div>
</div>
</div>
Codepen here
Here is a clean solution, using a simple html structure, the same for both mobile and desktop, and a media query to re-position the child2 on bigger screens.
.parent {
display: flex;
flex-flow: column;
position: relative;
}
.child1, .child2, .child3 {
border: 1px solid black;
background-color: gray;
margin-bottom: 10px;
height: 20px;
}
.child2 {
height: 40px;
}
#media screen and ( min-width: 500px) {
.child2 {
position: absolute;
top: 0;
left: 0;
height: 52px;
width: 150px
}
.child1,
.child3 {
margin-left: 150px;
}
}
<div class="parent">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
<div class="child3">Child 3</div>
</div>
I want to vertical center my container. Anyone knows how to do this using the Skeleton boilerplate? I've tried some things, but it continues to stay on top instead of vertical align. Hope someone can help me out:)
HTML:
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom"></h1>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
</div>
CSS:
/* Base 960 Grid */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
Some browsers like 'margin: 0px auto'.
Change your margin: 0 auto to 'margin: 0px auto;'
try this.
not for skeleton framework though. An example -better dont override container and column classes Have new classes for them and override
<div class="container top">
<div class="between"
<div class="sixteen columns middle">
<h1 class="remove-bottom"></h1>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
<div class="one-third column">
<div class="middle-wrapper">
</div>
</div>
</div>
</div>
CSS
.top{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.between{
display: table-cell;
vertical-align: middle;
}
.middle{
margin: 10px auto;
width: 960px;
}