Display calendar with grid layout - stack tasks/notes vertically aligned at the bottom of each grid cell

Currently, I am working on incorporating a calendar feature. To display the calendar's day cells, I have utilized a grid layout. My goal is to showcase different types of tasks or notes as strips within specific grid cells. These task strips should align vertically along the bottom border of the cell without disrupting the overall appearance of the calendar day cell. The width of these task strips should cover the entire cell width (100%) by touching both the left and right borders. In cases where there are multiple tasks in a single day cell (e.g., May 26), they should be positioned above each other with a 2px gap between them.

https://i.sstatic.net/1Sznq.jpg

Below is some sample code. Can you assist me in achieving the desired design?

jsFiddle

<div id="calendar_container" class="calendar-container">
    <div class="calendar-header-row">                    
        <span id="calendar_header" class="calendar-header">May 2020</span>

        <span id="prev_month" class="prevMonth" onclick="javascript: previousMonth()"><img src="/images/arrow_left.png"></span>

        <span id="next_month" class="nextMonth" onclick="javascript: nextMonth()"><img src="/images/arrow_right.png"></span>
    </div>

    <div id="calendar_body" class="calendar"><div class="day-name">Sunday</div><div class="day-name">Monday</div><div class="day-name">Tuesday</div><div class="day-name">Wednesday</div><div class="day-name">Thursday</div><div class="day-name">Friday</div><div class="day-name">Saturday</div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="d...
htmlcsscss-gridvertical-alignment

Answer №1

After making some adjustments in a specific cell:

<div class="day">
<div>26</div>
<div class="task error">Error 1 here</div>
<div class="task info2">Info 2 here<span class="circle" style="padding-left: 7px;">3</span></div>
<div class="task error2">Error 2 here</div>
</div>

and 

    .day {
        /*  position: relative; */
        z-index: 1;
        border-bottom: 1px solid #b9b9b9;
        border-right: 1px solid #b9b9b9;

        /*  text-align: left;
        padding: 16px 20px; */

        letter-spacing: 1px;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        pointer-events: none;
        user-select: none;

        /* The flex layout will do the trick */
        display: flex;
        flex-direction: column;
    }

    .day > div {
        /* Set size of the container according to the content */
        flex: 0 0 auto;
    }

    .day > div:first-child {
        text-align: left;
        padding: 16px 20px;
        padding-bottom: 0;

        /* To shift the tasks to the bottom of the cell */
        margin-bottom: auto;
    }

The modifications made in the CSS above proved successful in achieving my desired layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing custom links for AJAX to showcase targeted pages: a beginner's guide

I am putting the final touches on my website and realized that it may be difficult to promote specific sections of the site because the browser address never changes. When visitors click on links, they open in a div using Ajax coding. However, if I want to ...

javascripthtmlajax

Integrating Labels on External Websites with ASP.NET

I have been developing a website that needs to display a counter on the home page. To accomplish this, I used an asp label that counts and displays the database records (e.g. 180000) with no issues at all. However, now I am facing a new challenge. I want ...

c#asp.nethtmlembed

The combination of list-style-type and display:inline is ineffective

Many questions have been asked in different areas about this issue, but none of the answers I found were able to solve my problem. My challenge lies in creating a navigation menu where I can't remove the list style or display it inline. Here is the HT ...

htmlcss

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Bootstrap is not functioning successfully

<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5b405f405f">[email protected]</a>/d ...

htmlbootstrap-5

Creating a CSS animation to repeat at regular intervals of time

Currently, I am animating an SVG element like this: .r1 { transform-box: fill-box; transform-origin: 50% 50%; animation-name: simpleRotation,xRotation; animation-delay: 0s, 2s; animation-duration: 2s; animation-iterat ...

javascriptcsssvgcss-animations

Utilize PHP and a dynamic web framework like Spry to showcase data from two MySQL tables in an

My goal is to effectively showcase data from two separate tables in mysql using PHP and spry. Initially, I considered implementing spry tabbed panels, but I am uncertain of its feasibility. Essentially, I envision the tab names being populated from one tab ...

phphtmlmysqlhtml-tablespry

Generating an HTML table from information stored in a text file

As a beginner in web design, I am looking to create an HTML table using data from a text file. I'm unsure of the best approach to take, so any guidance or pointers would be greatly appreciated. ...

htmlweb

Adding a picture to the webpage and saving it temporarily on the site

After exploring all options on the site, testing it rigorously and closely following the instructions provided, I am still unable to determine where exactly I went wrong. Website Link: The main goal is to upload an image and temporarily store it within t ...

javascriptajaxhtml

Decoding Lodash: Unveiling the findwhere and copy operator in the realm of

Could someone please explain why using Lodash to fetch an object with findWhere allows for a reference copy that enables dynamic changes based on user actions, while the same operation using the copy operator fails to update the source object? I have creat ...

javascripthtmlangularjslodash

Using the drop and drag features within a table cell

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> & ...

phpjavascriptjqueryhtml

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?

Currently, I am utilizing the next/Image component for setting an image and applying styling through tailwindcss. However, I have encountered a roadblock at this juncture. My Objective My goal is to dynamically change the src attribute of the image based ...

javascriptcssreactjsnext.jstailwind-css

The checkValidity function fails to identify incorrect "tel" input

In my form, I am using the checkValidity function to validate inputs. However, I have encountered an issue where the validation only works when an input with the required attribute is missing a value. It doesn't work if there is a value type mismatch, ...

javascriptjqueryhtmlformsvalidation

Generate visual content from written text with the use of a form and store it on the

Struggling to implement a php function on my webpage that generates an image from text input. However, nothing appears to be happening when I execute the code: PHP - $to = $paths. '/card.png'; if (isset($_POST['make_pic'])) { $text = ...

phphtmlajaxformsimage

What is the best way to showcase the information from this API on an HTML page using Vanilla JavaScript?

I am currently working on implementing an AJAX call to fetch data from a movie API online. Below is the HTML code I have written for this: <html> <head> <meta charset=utf-8> <title>Movie Database</title> ...

javascripthtmljsonajax

Troubleshooting a problem with the interactive YouTube player in Safari

I have successfully implemented a custom YouTube player on my website, allowing users to watch videos within a modal box. Below is the code for reference: JS & HTML: <script src="https://www.youtube.com/iframe_api"></script> <script typ ...

javascriptjqueryhtmlyoutubesafari

Printing to the screen with AJAX PHP

Struggling to create a simple ajax code that displays the word 'hello' on the screen. Need some guidance as nothing seems to be working. Any help or corrections are greatly appreciated. Thank you. test6.html <script src="https://ajax.goo ...

javascriptphpjqueryhtmlajax

What is the best method to eliminate the 2px flaws on the right edge?

Issue only observed on small screens using Android Chrome (Nexus 5x, Nexus 6) with Android 5+. Cannot replicate problem on a Nexus 4. Utilizing basic bootstrap setup and angular; unsure if related. Experiencing artifacts up to 2px wide on the right side o ...

androidcssangularjstwitter-bootstrapgoogle-chrome

React Bootstrap hover animation technique

UPDATE: I decided to give react-bootstrap a try for tooltips, hoping it would finally work as expected. Unfortunately, even after implementing the code, I am still facing issues with getting the tooltip effect to show up when hovering over the button. Th ...

javascriptcssreactjsbootstrap-4react-bootstrap

Difficulty maintaining hover state on menu while navigating to submenu on an HTML page

I successfully implemented a side menu that displays the submenu when hovering over menu items. However, I am encountering two issues: 1. When I hover over a menu item and the submenu appears, the hover state of the menu item disappears. I would like the m ...

htmlcssmenusubmenu