I'm attempting to create a calendar using HTML, CSS, and JavaScript. This calendar is meant to display upcoming/past events, and I'm struggling to get my event blocks to fill the rest of the calendar days from left to right. You can see an example of the current calendar below.
Here's an example of how my table cells are structured within my project:
.cell-container{
display: flex;
justify-content: center;
margin: 0px;
align-items: center;
width: 200px;
height: 100px;
border: 1px solid black;
}
.date-label{
font-weight: bold;
}
.table-cell{
display: flex;
}
.inner-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.event{
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
width: 150%;
background-color: cornflowerblue;
position: relative;
top: 0px;
left: 0px;
}
<div class="table-cell">
<div class="cell-container">
<div class="inner-container">
<label class="date-label">23</label>
<div class="event">Event #4:00 pm</div>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">24</label>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">25</label>
</div>
</div>
</div>
As you can see from the snippet, my event continues to expand both left and right, instead of expanding explicitly to the right. I've tried using position: sticky and position: absolute but both end in the same result.
Is there any way that I can restrict the direction that the div expands? or is this not a possibility? Any and all feedback would be appreciated, TIA!
You can achieve this by setting justify-content to flex-start
and removing align-items: center in the inner-container class.
Add align-self: center; to the date-label class to keep it centered :
.cell-container{
display: flex;
justify-content: center;
margin: 0px;
align-items: center;
width: 200px;
height: 100px;
border: 1px solid black;
}
.date-label{
font-weight: bold;
align-self: center;
}
.table-cell{
display: flex;
}
.inner-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.event{
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
width: 150%;
background-color: cornflowerblue;
position: relative;
top: 0px;
left: 0px;
}
<div class="table-cell">
<div class="cell-container">
<div class="inner-container">
<label class="date-label">23</label>
<div class="event">Event #4:00 pm</div>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">24</label>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">25</label>
</div>
</div>
</div>
You have to remove the the align-items property in the inner container to expand from the left. (You could also set it to start or normal). If you want the date number to remain centered, you have to set the align-self property to center. See below.
.cell-container{
display: flex;
justify-content: center;
margin: 0px;
align-items: center;
width: 200px;
height: 100px;
border: 1px solid black;
}
.date-label{
font-weight: bold;
}
.table-cell{
display: flex;
align-self: center;
}
.inner-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.event{
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
width: 150%;
background-color: cornflowerblue;
position: relative;
top: 0px;
left: 0px;
}
<div class="table-cell">
<div class="cell-container">
<div class="inner-container">
<label class="date-label">23</label>
<div class="event">Event #4:00 pm</div>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">24</label>
</div>
</div>
<div class="cell-container">
<div class="inner-container">
<label class="date-label">25</label>
</div>
</div>
</div>
Related
I have created a circular shape where I show some percentages. I want to put multiple items in a row.
I tried with div and making display flex and nothing is working properly.
Here is a what I tried so far:
.meal-circular-progress{
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin:auto;
//transition: background 2s;
//transition-timing-function: ease;
//border: 1px solid red;
}
.meal-circular-progress::before{
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
//border: 1px solid red;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
</div>
You need to make your parent element flexbox. In this case your parent element is center.
Make that element flexbox and use the align-items property to do so:
.center {
display: flex;
align-items: center;
justify-content: center;
}
.meal-circular-progress {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.meal-circular-progress::before {
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
}
.progress-value {
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">5%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">20%</span>
</div>
</div>
Flex the container
https://codepen.io/mplungjan/pen/xxJEPwx
#container {
display: flex;
flex-direction: row;
min-width: max-content;
max-width: max-content; /* optional */
border: 1px solid black;
}
I am trying to overlay one image into another but it not working.
My code
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div>
<img src="https://place-hold.it/338x280" />
</div>
</div>
I am not using margin-top or margin-bottom because i am looking in responsive. defining margin sometime break the layout in different structure.
Place both images inside a div with position: relative;. Add this class to the image that should be on top:
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div style="position: relative;">
<img src="https://place-hold.it/338x280" />
<img class="neer" src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
</div>
there are many ways to do that. a simple way using your giving code is to remove flex style from mobile and put it in body.
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
a better way is to put both pictures in one div then give them the same position in that div.
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="container">
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
</div>
If we know why you want to do this, there might be a better way.
I'm builiding a navigation panel which is over header. I used postion: relative and I subtracked few px (#navigation).
The height of the section header is reserved as if the navigation panel has not been moved. I would like that section to be closer to the header with no break.
How can I do it?
body {
background-color: #e6e6e6;
}
#conteiner {
border: 1px solid black;
}
#conteiner>* {
min-height: 100px;
display: flex;
}
/* HEADER */
header {
flex-direction: column;
align-items: center;
}
#spacer-up {
background-color: #8dc63f;
height: 15px;
width: 100%;
}
#frame-header {
max-height: 400px;
flex-direction: column;
align-items: center;
}
#spacer-down {
background-color: #dddddd;
height: 15px;
width: 100%;
}
#navigation {
width: 450px;
height: 130px;
display: flex;
position: relative;
top: -65px;
}
.button1 {
flex: 1;
background-color: #00984a;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
transition: 0.1s;
}
.button1:hover {
background-color: #007639;
transition: 0.2s;
}
/* Content */
section {
display: flex;
justify-content: center;
position: relative;
}
#content {
border: 1px solid black;
width: 1200px;
background-color: #FFF;
}
footer {
background-color: #007639;
justify-content: center;
align-items: center;
}
<body>
<!-- Add your site or application content here -->
<div id="conteiner">
<header>
<div id="spacer-up"></div>
<div id="frame-header">
<img src="/img/header-background.png" alt="" width="1138" height="369">
</div>
<div id="spacer-down"></div>
<div id="navigation">
<div class="button1">TEXT1</div>
<div class="button1">TEXT2</div>
<div class="button1">TEXT3</div>
</div>
</header>
<section>
<div id="content">
SECTION 1
</div>
</section>
<footer>
FOOTER
</footer>
</div>
<body>
* {margin: 0; padding: 0; border: 0;}
ul {list-style: none;}
.work_page
{
display: flex;
width: 100vw;
height: 100vh;
}
.btn_text
{
display: flex;
width: 50vw;
height: 100vh;
font-size: 5vw;
font-weight: bold;
background-color: grey;
}
.work
{
margin-top: 50px;
margin-left: 50px;
}
.btn_text ul
{
margin-top: 50px;
margin-left: 50px;
}
.personal
{
margin-top: 30px;
}
.team_work
{
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: auto;
justify-content: space-evenly;
width: 50vw;
height: 200vh;
background-color: blue;
}
.team_work div
{
text-align: center;
line-height: 40vh;
width: 15vw;
height: 40vh;
margin: 10vh 1vw;
background-color: rgba(0, 0, 0, 0.9);
}
<div class="work_page">
<div class="btn_text">
<div class="work">work</div>
<ul>
<li class="team">team</li>
<li class="personal">personal</li>
</ul>
</div>
<div class="team_work">
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work1</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work2</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work3</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work4</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work5</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work6</div>
</div>
Hi guys.. Here's my code please tell me why it doesn't work
I want only scroll blue background div but It move together...
So result of googling that said add overflow-y: auto on div that you want scroll. then I added property on .team_work div but It doesn't work... I spent 2 hours to fix it!!! Help me!
I have set to team_work 100vh instead 200vh.
* {margin: 0; padding: 0; border: 0;}
ul {list-style: none;}
.work_page
{
display: flex;
width: 100vw;
height: 100vh;
}
.btn_text
{
display: flex;
width: 50vw;
height: 100vh;
font-size: 5vw;
font-weight: bold;
background-color: grey;
}
.work
{
margin-top: 50px;
margin-left: 50px;
}
.btn_text ul
{
margin-top: 50px;
margin-left: 50px;
}
.personal
{
margin-top: 30px;
}
.team_work
{
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: auto;
justify-content: space-evenly;
width: 50vw;
height: 100vh;
background-color: blue;
}
.team_work div
{
text-align: center;
line-height: 40vh;
width: 15vw;
height: 40vh;
margin: 10vh 1vw;
background-color: rgba(0, 0, 0, 0.9);
}
<body>
<div class="work_page">
<div class="btn_text">
<div class="work">work</div>
<ul>
<li class="team">team</li>
<li class="personal">personal</li>
</ul>
</div>
<div class="team_work">
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work1</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work2</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work3</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work4</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work5</div>
<div data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="2000">work6</div>
</div>
</div>
</body>
The child view fit-content exceeds the parent view width, When the superview sets the scroll properties，The subview displays exceptions。
I want to superview Can scroll display, cut does not affect the subview display。
The child view fit-content exceeds the parent view width, When the superview sets the scroll properties，The subview displays exceptions。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.main-container {
width: 300px;
height: 400px;
background-color: green;
}
.title {
width: 100%;
height: 40px;
background-color: red;
}
.tab-contenter {
width: 100%;
margin: 10px 40px 10px 0;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 4px;
}
.tab-contenter-content {
display: flex;
flex-direction: row;
align-items: center;
/* overflow: scroll; */
}
.tab-title-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: fit-content;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
margin-right: 10px;
padding: 0 11px;
background: #f5f6f7;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="title">标题</div>
<div class="tab-contenter">
<div class="tab-contenter-content">
<div class="tab-title-item" key="ceshi1">
全部
</div>
<div class="tab-title-item" key="ceshi2">
测试内容超长版本2
</div>
<div class="tab-title-item" key="ceshi3">
测试内容超长版本3
</div>
<div class="tab-title-item" key="ceshi4">
测试内容4
</div>
<div class="tab-title-item" key="ceshi5">
测试内容5
</div>
</div>
</div>
</div>
</body>
</html>
Online code ： https://codesandbox.io/s/xenodochial-raman-wylhk?file=/index.html
Is this what you are looking for?
You have to set flex nowrap to the parent. I have added a class to disable the default browser scrollbar as well
.main-container {
width: 300px;
height: 400px;
background-color: green;
}
.horizontal-scrollbars {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.horizontal-scrollbars::-webkit-scrollbar {
display: none;
}
.title {
width: 100%;
height: 40px;
background-color: red;
}
.tab-contenter {
width: 100%;
margin: 10px 40px 10px 0;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 4px;
}
.tab-contenter-content {
display: flex;
flex-direction: row;
align-items: center;
/* overflow: scroll; */
}
.tab-title-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* padding: 15px; */
/* height: 100%; */
width: fit-content;
white-space: nowrap;
/* min-width: 53px; */
cursor: pointer;
margin-right: 10px;
padding: 0 11px;
/* border: 1px solid #f2f2f2; */
background: #f5f6f7;
border-radius: 4px;
}
<div class="main-container">
<div class="title">标题</div>
<div class="tab-contenter">
<div class="tab-contenter-content horizontal-scrollbars">
<div class="tab-title-item" key="ceshi1">
全部
</div>
<div class="tab-title-item" key="ceshi2">
测试内容超长版本2
</div>
<div class="tab-title-item" key="ceshi3">
测试内容超长版本3
</div>
<div class="tab-title-item" key="ceshi4">
测试内容4
</div>
<div class="tab-title-item" key="ceshi5">
测试内容5
</div>
</div>
</div>
</div>