I have a fixed div and inside of it an x-scrollable div which contains many items.
this is my code :
<div class="gallery-items" style="position: fixed">
<div class="scrollable">
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
<div class='gallery-items-item'>....</div>
</div>
</div>
.gallery-items {
position: fixed;
.....
}
.scrollable {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
white-space: nowrap;
}
.gallery-items-item {
height: 130px;
width: 150px;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
margin-right: 10px;
position: relative;
background-color: #4d4d4d;
display: inline-block;
}
but the items are not aligned on the same scrollable line.. (http://croisentoi.com/cafe/menu/ when clicking on a picture)
Is there something I miss ? Thank you.
Add vertical-align: top; to .gallery-items-item to align them all to the top of gallery-items.
Try using
vertical-align:medium;
Hope it helps you..
Related
A horizontal scrolling container is what I'm creating. Everything is operating smoothly. The problem, though, is that I want to put a picture on top of each card. But rather than being on top of the wrapper, the picture goes within. What could be the best solution?
.scrolling-wrapper {
-webkit-overflow-scrolling: touch;
height: 300px;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
padding-inline: 40px;
position: relative;
}
.scrolling-wrapper::-webkit-scrollbar {
display: none;
}
.card {
display: inline-block;
height: 100%;
width: 300px;
background-color: red;
border-radius: 20px;
position: relative;
margin-right: 10px;
}
.our-member-owner-card-image {
position: absolute;
top: -70px;
z-index: 9999;
}
<div class="scrolling-wrapper">
<div class="card">
<div class="our-member-owner-card-image">
<img width="220px" src="https://images.unsplash.com/photo-1668767483967-cc2325edafbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" />
</div>
</div>
<div class="card">
<div class="our-member-owner-card-image">
<img width="220px" src="https://images.unsplash.com/photo-1668767483967-cc2325edafbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" />
</div>
</div>
</div>
I'm building a customised horizontal carousel, where in I want to display some items which are vertically scroll-able.
Code I've tried so far:
html
<div class="carousel">
<div class="c-item">Item-1</div>
<!-- to be displayed vertically -->
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<!-- to be displayed vertically -->
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
css
.carousel{
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
.c-item{
display: inline-block;
width: 35%;
background: #000;
height: 100px;
&.margin{
//margin-left: 35%;
}
}
.abs{
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
.a-item{
height: 100px;
border: 1px solid #000;
}
}
}
.other{
background: yellow;
}
Result:
(codepen)
The problem here is: I want the other div to start just below the item-1; meaning that the vertically scrolled div should be overlapping the other div and the carousel height should be fixed at 100px. I tried using position: absolute for the .abs div but then that div doesn't move on scrolling the carousel.
Desired output will look like this:
A flexbox solution
Each item is 33.33% wide and 100px high. The items inside .multiple are also 100px high.
.multiple has position: relative and overflow-y: auto. The items inside have position: absolute.
Hint: Container -> position: relative, items inside -> position: absolute. That's how it works.
top: (100 * n)px for each <div> inside .item.multiple. n is the index of the <div> inside .item.multiple, starting with 0.
The HTML structure has been changed
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
Your desired result mean making the child overlap the parent, and i don't think that's possible. BUT you can "hack" this by wrapping the .carousel with another div (.demo it this general example), so the results will be something like this:
.demo {overflow: visible; height: 100px;}
.carousel {
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
}
.carousel .c-item {
display: inline-block;
width: 35%;
background: #000;
height: 100px;
}
.carousel .abs {
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
}
.carousel .abs .a-item {
height: 100px;
border: 1px solid #000;
}
.other {
background: yellow;
height: 200px;
}
<div class="demo">
<div class="carousel">
<div class="c-item">Item-1</div>
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
</div>
<div class="other">
Other div
</div>
As you can see from the snippet the scroll-x doesn't show - yet it exist. You can click one of the .carousel item and scroll them right and left.
Since it's not obvious that the .carousel is scrolling, you can add extra buttons to scroll it:
.demo {overflow: visible; height: 100px;z-index: 3;}
.carousel {
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
}
.carousel .c-item {
display: inline-block;
width: 35%;
background: #000;
height: 100px;
}
.carousel .abs {
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
}
.carousel .abs .a-item {
height: 100px;
border: 1px solid #000;
}
.other {
background: yellow;
height: 200px;
}
<div class="demo">
<button onclick="document.querySelectorAll('.carousel')[0].scrollLeft += 20;" style="position: fixed; top: 50%; right: 0;">L</button>
<button onclick="document.querySelectorAll('.carousel')[0].scrollLeft -= 20;" style="position: fixed; top: 50%; left: 0;">R</button>
<div class="carousel">
<div class="c-item">Item-1</div>
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
</div>
<div class="other">
Other div
</div>
Hope that helps!
You have to play with position check snippet.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
height: 200px;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
.other {
position: absolute;
z-index: -1;
top: 100px;
width: 100%;
background: green;
height: 117px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
How do I make these elements scroll horizontally instead of vertically. Right now the divs are scrolling vertically I want them to scroll horizontally I can't find the solution and I even set the height of the container.
.specials{
padding: 9rem 0;
}
.specials__left{
height: 516px;
width: 60%;
overflow-x: scroll;
white-space: nowrap;
}
.specials__left-content{
height: 100%;
width: 60%;
margin-right: 30px;
display: inline-block;
float: left;
white-space: normal;
background-color: yellow;
margin-bottom: 40px;
}
<section class="specials">
<div class="specials__left">
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
</div>
</section>
Try using this:
.grandparent {
width: 200px;
height: 125px;
overflow-x: scroll;
overflow-y: hidden;
}
.parent {
height: 100px;
white-space: nowrap;
}
.child {
display: inline-block;
height: 100px;
width: 100px;
margin-right: 30px;
background-color: blue;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div
The grandparent element has a limited width (causing the scroll) but the parent element provides the support using white-space: nowrap; to keep it from collapsing. Does this help?
I want to center vertically text, when the elements height is unknown?
html
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
css
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
Elements "Ex1, Ex2" count is unknown, so, if there are more of those, obviously, the table row will get bigger in height. I need some solution, that would be responsive to this also...
https://www.codeply.com/go/bp/4ZEUS7Q7lm
Just add row-ht-eq class to row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
Also you can play with:
display: table-cell;
vertical-align: middle;
Note: Use span Element as helper.
Html:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
Css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Full Code:
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
Change your text class to:
.left-col-text {
margin:0 auto;
}
This will automatically decide equal distance from top to bottom.
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>