My problem is the following. I want to make multiple squares visible when scrolling inside a square, but when I apply overflow: scroll; as shown below, the top row of squares is cut off and the spacing is gone. How should I modify the code?
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
.container{
background: #a0a0a0;
width: 240px;
height: 240px;
display: flex;
justify-content: space-around;
align-content: space-around;
margin: 50px;
overflow: scroll;
}
.item{
width: 40px;
height: 40px;
}
.c1{
flex-direction: row;
flex-wrap: wrap;
}
</style>
<body>
<div class="container c1">
<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 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 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 item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<!-- add -->
<div class="item item5"></div>
<div class="item item6"></div>
<div class="item item7"></div>
<div class="item item1"></div>
<div class="item item2"></div>
</div>
</body>
I've tried going to the MDN site or Googling it, but all I get is a list of reasons why the truncation is happening, but not a solution.
Related
I have a carousel that overflows it's container, to hide elements not yet visible, so they can be animated using CSS.
I would like each column in the carousel to be the same width (equal to the width of the widest element in the columns) regardless of the content in each individual column.
I understand flexbox can do this with flex: 1 in each column, but only if the container has a fixed width. But, I want it to overflow. Is there a way to do this with just CSS?
.container {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* left: -100px; */
}
.col {
/* flex: 1; */
flex-grow: 1;
}
.item {
margin: 0.25rem;
background-color: red;
height: 100px;
width: 100px;
}
.fat {
width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
</div>
</body>
</html>
CSS grid can do it. All you need is to set a column flow and make all the columns equal to 1fr. Due to the width calculation of absolute element I had to add a big negative margin to allow the element to grow as much as possible.
.container {
position: absolute;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
margin-right: -9999px;
}
.col {
border: 1px solid blue;
}
.item {
margin: 0.25rem;
background-color: red;
height: 100px;
width: 100px;
margin: auto;
}
.fat {
width: 200px;
}
<div class="container">
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
</div>
I am stuck in an issue where I want to select divs having specific classes within other divs. I want to target middle element with "active" class. In this case the third div with "active" class
I tried using .container .active:nth-child(3) but it is not working. Please help
.container .active:nth-child(3) {
background-color: red;
}
.container .active:nth-of-type(3) {
background-color: red;
}
<div class="container">
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item active">Active but highlighted</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item">abc</div>
</div>
The :nth-of-type() actually only accounts for the type of element, not the type of class. This is the best solution I can think of right now, I'll update if I figure out a better way:
.container :is(.active + .active + .active):not(.active + .active + .active + .active) {
background-color: red;
}
<div class="container">
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item active">Active but highlighted</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item">abc</div>
</div>
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
I'm new-ish to Flexbox and trying to build a responsive table-based calendar with round background colors on certain cells. The problem I'm encountering is that since each cell's width is dynamic and on wider (most) screen sizes, the backgrounds are ovals, not circles. How can I set them as circles without disturbing the current layout or using fixed sizes?
As a bonus, I'd also like to be able to dynamically align the date/year with the far-left column.
CSS:
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
background-color: grey;
}
Markup:
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Pen: http://codepen.io/ourcore/pen/rWbjYZ.
Thanks!
Added a pseudo element and add some styling to it.
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
border-radius: 100%;
position: relative;
}
div.table-cell.event-on::before {
content: '';
width: 25px;
height: 25px;
background-color: grey;
position: absolute;
z-index: -9;
left: 10px;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
border-radius: 13px;
}
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Used a <span> and ...
<s> for past days
<i> for event
<b> for important event
Changed .table-cell flex-flow to column nowrap and added align-items:center
CODEPEN
I need to implement a structure like the graph following (with HTML, CSS) and I don't have any idea how to make the content (the circles) fit inside the bigger circle.
I would appreciate any solution that solves the problem at least partially.
I added a simplified page with some basic HTML and CSS for this problem. What I need is for the content inside the div.structure to fit (see the first image).
That would be a good start for what I need.
.structure {
float: left;
text-align: center;
background-color: #ccc;
border-radius: 50%;
margin: 20%;
width: 60%;
display: table;
}
.item {
width: 50px;
height: 50px;
float: left;
margin: 10px 5px;
background-color: deeppink;
border-radius: 50%;
display: table-cell;
vertical-align: middle;
}
.item.s1 {
background-color: deeppink;
}
.item.s2 {
background-color: green;
}
.item.s3 {
background-color: red;
}
.item.s4 {
background-color: blue;
}
.item.s5 {
background-color: aqua;
}
.structura_dep.dep6 {
background-color: gray;
}
<div class="structure">
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s1">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s2">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
<div class="item s3">
</div>
</div>
I just worked a little bit on this but i think you can get the idea you just have to add your shapes i gave you a start in the right direction though
Codepen http://codepen.io/noobskie/pen/NGqPEJ?editors=110
There is probably other better ways to complete this but this is just to give you a idea.
Ive wrapped all your colors into spans just for better orginazation.
To add a new circle all you need to do is copy ie:<a href='#' class='deg10'></a> paste it into the same span rename the class to <a href='#' class='deg20'></a> and then just change the scss accordingly.
All its using primarily is the css transform property and moving it along the page.
A good article to checkout and help you along with this could be found here Position icons into circle