Having trouble determining why the design is not displaying correctly

I'm currently working on a calendar webpage, and everything looks perfect until I add the new JavaScript element. Suddenly, the numbers in the first row start behaving strangely. I've tried to troubleshoot but can't seem to figure out what's causing the issue. Here is the code snippet:

Check out this screenshot for reference

var date = new Date(), y = date.getFullYear(), m = date.getMonth();
var firstDate = new Date(y, m, 1);
var lastDate = new Date(y, m + 1, 0);

var firstDay = firstDate.getDay();

var days  = document.querySelector(".days");
for (var i = 0; i < helper(firstDay); i++){
   var spaceContainer = document.createElement('LI');
   var spaceholder = document.createTextNode(" ");
   spaceContainer.appendChild(spaceholder); 
   days.insertBefore(spaceContainer, days.firstChild);
}

// Function to adjust day numbers
function helper(n){
if (n === 0){
return 6;
} else {
return n - 1;
}
}
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}

/* CSS Styles */
.month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
}

.month ul {
    margin: 0;
    padding: 0;
}

/* Media Queries */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}
<h1>CSS Calendar</h1>

<div class="month">
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li style="text-align:center">
      August<br>
      <span style="font-size:18px">2016</span>
    </li>
  </ul>
</div>

<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>
javascripthtmlcss

Answer №1

You have implemented the use of inline-block on list items, which may result in some additional spacing. Fortunately, there are methods available to eliminate this extra space.

One effective approach is to apply font-size: 0 and letter-spacing: -4px to the parent element, while resetting these properties for the children elements, as demonstrated below.

.days {
    letter-spacing: -4px;
    font-size: 0;
}
.days li {
    display: inline-block;
    letter-spacing: 0;
    font-size: 12px;
}


var date = new Date(), y = date.getFullYear(), m = date.getMonth();
var firstDate = new Date(y, m, 1);
var lastDate = new Date(y, m + 1, 0);

var firstDay = firstDate.getDay();

var days  = document.querySelector(".days");
for (var i = 0; i < helper(firstDay); i++){
   var spaceContainer = document.createElement('LI');
   var spaceholder = document.createTextNode(" ");
   spaceContainer.appendChild(spaceholder); 
   days.insertBefore(spaceContainer, days.firstChild);
}


// correct calculation logic 
function helper(n){
if (n === 0){
return 6;
} else {
return n - 1;
}
}
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}

.month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #ddd;
}

.weekdays li {
    display: inline-block;
    width: 13.6%;
    color: #666;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #eee;
    letter-spacing: -4px;
    font-size: 0;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    letter-spacing: 0;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #1abc9c;
    color: white !important
}

/* Media queries for responsive design */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}
<h1>CSS Calendar</h1>

<div class="month">
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li style="text-align:center">
      August<br>
      <span style="font-size:18px">2016</span>
    </li>
  </ul>
</div>

<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>

Answer №2

Substitute display: inline-block with float:left and include a clearfix class to the ul

var date = new Date(), y = date.getFullYear(), m = date.getMonth();
var firstDate = new Date(y, m, 1);
var lastDate = new Date(y, m + 1, 0);

var firstDay = firstDate.getDay();

var days  = document.querySelector(".days");
for (var i = 0; i < helper(firstDay); i++){
   var spaceContainer = document.createElement('LI');
   var spaceholder = document.createTextNode(" ");
   spaceContainer.appendChild(spaceholder); 
   days.insertBefore(spaceContainer, days.firstChild);
}


// calculate the correct number
function helper(n){
if (n === 0){
return 6;
} else {
return n - 1;
}
}
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}

.month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #ddd;
}

weekdays li {
    float: left;
    width: 13.6%;
    color: #666;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    float: left;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.clearfix::after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}

.days li .active {
    padding: 5px;
    background: #1abc9c;
    color: white !important
}

/* Implement media queries for smaller screens */
@media screen and (max-width:720px) {
    weekdays li, days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    weekdays li, days li {width: 12.5%;}
    days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    weekdays li, days li {width: 12.2%;}
}
<h1>CSS Calendar</h1>

<div class="month">
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li style="text-align:center">
      August<br>
      <span style="font-size:18px">2016</span>
    </li>
  </ul>
</div>

<ul class="weekdays clearfix">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days clearfix">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
    ...and so on...
  <li>30</li>
  <li>31</li>
</ul>

Answer №3

The reason for this issue is due to the display: inline-block; property being used on list items, particularly when there are li items without any text in the first row.
One solution could be to replace display: inline-block; with float: left;, ensuring to include a clearfix as well. Keep in mind that weekend items would also require float and clearfix to align properly.

Feel free to view the code example on codepen

Alternatively, you can explore using flexbox by referring to another codepen

In this scenario, no clearfix is necessary. Simply eliminate display: inline-block from the ul element with the weekdays and days classes, while applying the following styles to your current code:

.days {
  display: flex;
  flex-wrap: wrap;
}

.weekdays  {
  display: flex;
}

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

Creating a sophisticated form design with multiple input fields using DIV elements in HTML

I am looking to create a multi-column form layout that allows each row to have a different number of fields. My initial approach was using tables and the colspan attribute within td tags for layout structure. However, I have learned that using tables for l ...

htmlcss

Tips for aligning text to match the starting point of other text

Currently, the text appears as follows: Lorem ipsum dolor sit amet consectetur adipiscing elit vitae orci elementum dictum I want it to look like this: Lorem ipsum dolor sit amet consectetur adipiscing elit vitae orci elementum dictum I ...

htmlcssreactjsstyled-components

Save the result of a terminal command into an sqlite database

When I run a particular shell command in node js, the output is displayed on the console. Is there a method to store this output in a variable so that it can be POSTed to an Sqlite database? const shell = require('shelljs'); shell.exec('a ...

javascriptnode.jsshellsqlite

Inspecting every element within an array and indicating a negative outcome if any item is not a string

I'm currently working on a function called 'every' that takes in an array and a callback function as arguments. The purpose of the callback function is to determine if all elements in the array meet a certain condition. In my case, I want th ...

javascript

Receiving Null Value Upon Asynchronous API Call Before Data Retrieval

Struggling with Fetching and Displaying API Data in a Table I am facing a challenge where I need to fetch an API multiple times and populate the data into a table. The issue arises when the data for a specific year is not available, causing the table to b ...

javascripthtmlreactjs

Is there a way to specifically dictate the order in which flexbox items expand or contract?

I am facing an issue with my flex container setup involving three children elements. I have specified both minimum and maximum widths for each child, but I want them to grow or shrink in a specific order as the window width changes. Ideally, Item1 should s ...

cssreactjsflexbox

The modal window does not display a scroll bar

I'm currently facing an issue where the scroll bar is not appearing on my page when more elements are added. In addition, I have a modal that covers the entire page when clicking on an item. However, changing the CSS position: fixed property affects ...

javascripthtmlcssreactjs

Vertical alignment of buttons in Cordova App Rate

Currently, I am utilizing phonegap along with the app rate plugin. When I execute the code: AppRate.promptForRating(true); All buttons are appearing in a singular line. Despite there being 3 buttons available, the text on the buttons is getting truncate ...

javascriptandroidangularjscordovaphonegap-plugins

When you hover over it, the text moves above the background content

I am looking to enhance my table by having the text expand and hover over the content with a white background. I have achieved the expand effect, but I am struggling to get the overflow to work properly. You can view the code in action on JsFiddle: JsFiddl ...

htmlcsshover

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

I have a unique requirement in my parent component where I need to generate a child component with a distinct ID, and then pass this ID into the child component. The purpose of passing the unique ID is for the child component to use it within its template. ...

javascriptangularinputtypescriptoutput

Saving the accurate x and y coordinates into the database

My website features draggable images that each have their own x and y positions. I am attempting to pass these values into a MySQL database, but I'm facing an issue where all the images are getting assigned the same x and y values in the database. In ...

javascriptphpjquerymysqlajax

Implementing TypeScript with styled components using the 'as' prop

I am in the process of developing a design system, and I have created a Button component using React and styled-components. To ensure consistency, I want all my Link components to match the style and receive the same props as the Button. I am leveraging t ...

javascriptreactjstypescriptreact-router-domstyled-components

Displaying one out of two elements when the button is clicked

Trying to implement two buttons on the parent component, each displaying a different component - one for itemlist and the other for itemlist2. Struggling to get it right, even after following an example at https://codepen.io/PiotrBerebecki/pen/yaVaLK. No ...

javascriptarraysreactjsif-statementonclick

Optimal code structuring for a javascript plugin

Hey there, I came across some intriguing posts on this topic, but I believe it's a very personal question that requires a tailored answer. So, I'm reaching out to ask you: what is the most effective way to organize my code for a JavaScript plugin ...

javascriptdesign-patternsarchitecture

async.series: flexible number of functions

Hello everyone, I'm currently working with Node.js (Express) and MongoDB (mongooseJS). My goal is to create a series of async functions that query the database in the right order. Here is my question: How do I go about creating a variable number of a ...

javascriptnode.jsmongodbasynchronousexpress

Utilizing NextJS to retrieve cookie data within React components

Currently, I am working with a Next.js frontend and an Express backend. For authentication, I am utilizing cookies and have set up protected routes using Next.js middleware. The next step in my project involves accessing the cookie response within React ...

javascriptreactjscookiesnext.js

developing a dropdown menu feature

I'm struggling with a small issue related to my drop-down menu function. My goal is to hide the visibility of a menu tab after it has been clicked for the second time. Below is the code snippet I've been working on: HTML:- <nav class="clea ...

javascriptjqueryhtmlcss

Ways to access the req.user object within services

After implementing an authentication middleware in NestJs as shown below: @Injectable() export class AuthenticationMiddleware implements NestMiddleware { constructor() {} async use(req: any, res: any, next: () => void) { const a ...

javascriptnode.jstypescriptrequestnestjs

Is there a way to alter the camera's focal point in THREEJS to focus on a specific object already in the scene?

Currently, I am working with a scene extracted from a THREEJS example (https://threejs.org/examples/webgl_loader_fbx.html) that involves importing and displaying a threejs.json scene. The rendering of the scene works perfectly; I have a grid in place with ...

javascriptcamerathree.js

Using PHP to upload images through AJAX increases efficiency

Worked tirelessly on this script all night still unable to fix the bug. The issue is that when I select an image and click upload, it uploads the current image file. Then, if I select another image and click upload, it uploads two new files along with the ...

javascriptphpjqueryajaximage