I would like achieve what is shown in the image below, meant to select colors using CSS3.
The code is currently here.
.colors {
background: white;
width: 80%;
height: 10%;
position: absolute;
top: 60%;
display: inline-block;
overflow-x: scroll;
white-space: no-wrap;
}
.select {
float: left;
margin: 10px;
color: transparent;
z-index: 22;
background: red;
width: 20%;
}
<div class="colors">
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"> </div>
</div>
The divs I made aren't showing up. What can I do to solve this?
Your div aren't showing because you didn't set any height to them. You have also a syntax error here white-space: no-wrap as it should be white-space: nowrap.
By the way, you can simply use flex instead of floating elements. When using flex you are not obliged to specify the height of the element :
.colors {
background: white;
width: 80%;
height: 100px;
margin: auto;
display: flex;
flex-wrap: nowrap; /* this is not mandatory as it's the default value*/
overflow-x: scroll;
border: 1px solid;
}
.select {
margin: 10px;
color: transparent;
background: red;
flex: 0 0 20%;
}
<div class="colors">
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"> </div>
</div>
Or inline-block solution. But here you need to specify the height and pay attention to overflow :
.colors {
background: white;
width: 80%;
height: 100px;
margin: auto;
overflow-x: scroll;
border: 1px solid;
white-space:nowrap;
}
.select {
margin: 10px;
color: transparent;
background: red;
display:inline-block;
height:calc(100% - 24px); /* You need to remove both margin and height of scroll*/
width:20%;
}
<div class="colors">
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"> </div>
</div>
Remove the float:left method from selection class. Try like this.
.colors {
background: black;
width: 80%;
height: 20%;
position: absolute;
top: 60%;
overflow: auto;
white-space: nowrap;
}
.select {
margin: 10px;
color: transparent;
z-index: 22;
background: red;
width: 20%;
height: 80%;
display:inline-block;
}
<!DOCTYPE html>
<html>
<body>
<div class="colors">
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"></div>
<div class="select"> </div>
</div>
</body>
</html>
Related
i have the below structure on my website and there are alternating float:left and float:right assigned to these div containers. But now I want all these divs not to appear side by side (as they do right now) but one below the other
html
<div class="chat">
<div class="chat-message a">...</div>
<div class="chat-message b">...</div>
<div class="chat-message a">...</div>
<div class="chat-message b">...</div>
</div>
css
.chat{
min-height: 100px;
max-height: 600px;
height: 600px;
overflow-y: scroll;
position: relative;
}
.chat-message{
background-color: #D3D3D3;
max-width: 90%;
margin: 20px 15px 0 15px;
border-radius: 8px;
}
.a{
float: left;
background-color: #79d2a1;
}
.b{
float: right;
background-color: #7eaacd;
}
Add clear: both; to the chat-message class, as follows:
.chat{
min-height: 100px;
max-height: 600px;
height: 600px;
overflow-y: scroll;
position: relative;
}
.chat-message{
background-color: #D3D3D3;
max-width: 90%;
margin: 20px 15px 0 15px;
border-radius: 8px;
clear: both;
}
.a{
float: left;
background-color: #79d2a1;
}
.b{
float: right;
background-color: #7eaacd;
}
<div class="chat">
<div class="chat-message a">...</div>
<div class="chat-message b">...</div>
<div class="chat-message a">...</div>
<div class="chat-message b">...</div>
</div>
you say : But now I want all these divs not to appear side by side
can you use bootstrap
<div class="col align-self-start"></div>
<div class="col align-self-end"></div>
<div class="col align-self-start"></div>
<div class="col align-self-end"></div>
<div class="col align-self-start"></div>
<div class="col align-self-end"></div>
Try Flexbox
.chat{
min-height: 100px;
max-height: 600px;
height: 600px;
overflow-y: scroll;
position: relative;
display:flex;
flex-direction: column;
}
.chat-message{
background-color: #D3D3D3;
max-width: 90%;
margin: 20px 15px 0 15px;
border-radius: 8px;
}
.a{
align-self: flex-start;
background-color: #79d2a1;
}
.b{
align-self: flex-end;
background-color: #7eaacd;
}
To keep things neat and short:
https://jsfiddle.net/m53ockLu/
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-x: scroll;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.
Thank you very much for any help.
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?
No.
I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-y: scroll;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.
Consider this example of letting the content dictate the size:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: max-content;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
background: green;
}
.first {
display: block;
height: 20px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.
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>
Here is my jsfiddle link for my code:
https://jsfiddle.net/Krisalay/zvxxeagh/
MY HTML CODE IS:
<div class="MainPanel-sidebarPanelANDContentPanel-Container">
<div class="MainPanel-changableContainer">
<div class="MainPanel-changableContainer-chatPanel">
<div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 1</div>
<div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:lightcoral;">MESSAGE 2</div>
<div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 3</div>
</div>
</div>
<div class="MainPanel-SidebarPanel" ng-controller="ProfileController">
<div class="MainPanel-SidebarPanel-ItemsPanel">
<label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 1</label>
<label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 2</label>
<label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 3</label>
</div>
</div>
</div>
THE CSS CODE IS:
.MainPanel-sidebarPanelANDContentPanel-Container {
position: relative;
}
.MainPanel-changableContainer {
position: relative;
float: left;
display: block;
margin-left: 23.7%;
background-color: red;
width: 76.3%;
overflow-wrap: break-word;
height: auto;
}
.MainPanel-changableContainer-chatPanel {
position: relative;
display: block;
overflow-y: scroll;
}
.MainPanel-changableContainer-chatPanel-MessagePanel {
position: relative;
padding: 15px;
}
.MainPanel-SidebarPanel {
position: relative;
background-color: white;
width: 22%;
padding: 10px;
color: #5b5b5b;
font-size: 14px;
}
.MainPanel-SidebarPanel-ItemsPanel {
position: relative;
padding: 10px;
margin-top: 1px;
cursor: pointer;
}
.MainPanel-SidebarPanel-ItemsPanel-ItemText {
position: relative;
margin-left: 25%;
}
I want to PREVENT the Items in the container in sidebar to automatically shifts down as the new messages will enter the chat panel
The design Image
I made some changes on your style that fixed the problem : https://jsfiddle.net/IA7medd/3s2uv1zc/1/
First in this class .MainPanel-changableContainer I removed the margin-left and make it floated right not left
Then I removed the padding from this class .MainPanel-SidebarPanel and it width now is 23.7%
Your new style should be like this :
.MainPanel-sidebarPanelANDContentPanel-Container {
position: relative;
}
.MainPanel-changableContainer {
position: relative;
float: right;
display: block;
background-color: red;
width: 76.3%;
overflow-wrap: break-word;
height: auto;
}
.MainPanel-changableContainer-chatPanel {
position: relative;
display: block;
overflow-y: scroll;
}
.MainPanel-changableContainer-chatPanel-MessagePanel {
position: relative;
padding: 15px;
}
.MainPanel-SidebarPanel {
position: relative;
background-color: white;
width: 23.7%;
color: #5b5b5b;
font-size: 14px;
}
.MainPanel-SidebarPanel-ItemsPanel {
position: relative;
padding: 10px;
margin-top: 1px;
cursor: pointer;
}
.MainPanel-SidebarPanel-ItemsPanel-ItemText {
position: relative;
margin-left: 25%;
}
That happen because you put the first element in the DOM tree to float left with a margin-left.
You can put a float: right instead and a float: left to the next element to avoid this behavior.
See this fiddle
Change your CSS to this:
.MainPanel-changableContainer {
position: relative;
float: right; //change
display: block;
margin-left: 23.7%;
background-color: red;
width: 50%; //change
overflow-wrap: break-word;
height: auto;
}
Made few changes as follows:
first add this :
<div class="MainPanel-SidebarPanel" ng-controller="ProfileController">
<div class="MainPanel-SidebarPanel-ItemsPanel">
<label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 1</label>
<label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 2</label>
<label class="MainPanel-SidebarPanel-ItemsPanel-ItemText">ITEM 3</label>
</div>
</div>
and then
<div class="MainPanel-changableContainer">
<div class="MainPanel-changableContainer-chatPanel">
<div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 1</div>
<div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:lightcoral;">MESSAGE 2</div>
<div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 3</div>
<div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 3</div>
<div class="MainPanel-changableContainer-chatPanel-MessagePanel" style="background-color:orange;">MESSAGE 3</div>
</div>
</div>
CSS changes :
.MainPanel-changableContainer {
position: relative;
float: left;
display: block;
//margin-left: 23.7%;
//background-color: red;
width: 73.3%;
overflow-wrap: break-word;
height: auto;
}
.MainPanel-SidebarPanel {
position: relative;
background-color: white;
width: 22%;
padding: 10px;
color: #5b5b5b;
font-size: 14px;
float:left;
}
jsFiddle
let me know if this is what you are looking for...
I have a parent div with variable width and height and overflow auto, then I have two or more children div with 100% with of parent.
I would like that all the children div have the same width, but when the parent has horizontal scroll, each children have different width.
See the example:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
height: 20px;
background: aqua;
display: inline-block;
white-space: nowrap;
border: 1px solid yellow;
width: 100%;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
Try this
#container {
width: 175px;
background: red;
overflow: auto;
border-collapse:collapse;
}
.table {
width:100%;
display:table;
}
.block {
height: 20px;
background: aqua;
display: table-row;
white-space: nowrap;
border: 1px solid yellow;
}
<div id="container">
<div class="table">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
</div>
Please note that I changed display to table-row which automatically removes the border, but in order to preserve it I added border-collapse:collapse; to #container.
Edit: Added a div with a class "table" + relevant CSS
The solution is:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
background: none repeat scroll 0 0 aqua;
border: 1px solid yellow;
float: left;
height: 50px;
padding: 10px;
width: 175px;
word-break: break-all;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>