Slightly askew text

Question

Slightly askew text

I am currently in the process of developing a calendar using Bootstrap and React, but I have encountered an issue with the calendar's design. The text on the top row that displays the weekdays is not aligning perfectly with the "day" items below it. These "day" items will eventually be replaced with numbers instead of text.

After experimenting with the code, I believe the problem is related to the length of the text itself. However, I am struggling to find a solution to ensure everything lines up correctly.

Here is the code snippet:

.calendar {
  text-align: center;
}

.calendar--weekdays li {
  padding: 5px 20px;
}

.calendar--week li {
  padding: 5px 20px;
}

.calendar--row {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.calendar--row p {
  padding: 10px 15px;
  margin: 0px;
}

.event__viewer {
  text-align: center;
}

<head>
  <!--  Font Awesome  -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="calendar">
          <h1>My Calendar</h1>
          <div class="calendar">
            <div class="calendar--row calendar--weekdays">
              <p>Sun</p>
              <p>Mon</p>
              <p>Tue</p>
              <p>Wed</p>
              <p>Thur</p>
              <p>Fri</p>
              <p>Sat</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <!-- Additional week rows -->
          </div>
          <div class="calendar--tools">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
            <span> Month </span>
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-6 event__viewer">
        <h1>Events</h1>
      </div>
    </div>
  </div>
</body>

Any suggestions or thoughts on how to address this issue?

html css twitter-bootstrap reactjs flexbox

Answer 1

Answer №1

When using the <p> tag, the width is determined by the text inside it, leading to misalignment due to varying widths of different <p> tags. To avoid this issue, setting a fixed width for all <p> tags or using tables would be beneficial.

.calendar {
  text-align: center;
}

.calendar--weekdays li {
  padding: 5px 20px;
}

.calendar--week li {
  padding: 5px 20px;
}

.calendar--row {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.calendar--row p {
  padding: 10px 15px;
  margin: 0px;
  width: 30px
}

.event__viewer {
  text-align: center;
}

<head>
  <!--  Font Awesome  -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="calendar">
          <h1>My Calendar</h1>
          <div class="calendar">
            <div class="calendar--row calendar--weekdays">
              <p>Sun</p>
              <p>Mon</p>
              <p>Tue</p>
              <p>Wed</p>
              <p>Thur</p>
              <p>Fri</p>
              <p>Sat</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            
            (remaining code/template here)

Answer 2

When using the <p> tag, the width is determined by the text inside it, leading to misalignment due to varying widths of different <p> tags. To avoid this issue, setting a fixed width for all <p> tags or using tables would be beneficial.

.calendar {
  text-align: center;
}

.calendar--weekdays li {
  padding: 5px 20px;
}

.calendar--week li {
  padding: 5px 20px;
}

.calendar--row {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.calendar--row p {
  padding: 10px 15px;
  margin: 0px;
  width: 30px
}

.event__viewer {
  text-align: center;
}

<head>
  <!--  Font Awesome  -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="calendar">
          <h1>My Calendar</h1>
          <div class="calendar">
            <div class="calendar--row calendar--weekdays">
              <p>Sun</p>
              <p>Mon</p>
              <p>Tue</p>
              <p>Wed</p>
              <p>Thur</p>
              <p>Fri</p>
              <p>Sat</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            
            (remaining code/template here)

Answer 3

Answer №2

It seems odd that you're not utilizing a proper table to display the information. However, if you prefer to stick with your current markup and still want it to resemble a table, you can make adjustments as follows to resolve the alignment problem.

Important styling:

.calendar {
  display: table;
  margin: 0 auto;
  caption-side: bottom;
}
.calendar--row {
  display: table-row-group;
}
.calendar--row p {
  display: table-cell;
}
.calendar--tools {
  display: table-caption;
}

Check out the updated version below:

.calendar {
  text-align: center;
  caption-side: bottom;
  display: table;
  margin: 0 auto;
}

.calendar--weekdays li {
  padding: 5px 20px;
}

.calendar--week li {
  padding: 5px 20px;
}

.calendar--row {
  display: table-row-group;
}

.calendar--row p {
  padding: 10px 15px;
  margin: 0px;
  display: table-cell;
}

.event__viewer {
  text-align: center;
}

.calendar--tools {
  display: table-caption;
}

<head>
  <!--  Font Awesome  -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="calendar">
          <h1>My Calendar</h1>
          <div class="calendar">
            <div class="calendar--row calendar--weekdays">
              <p>Sun</p>
              <p>Mon</p>
              <p>Tue</p>
              <p>Wed</p>
              <p>Thur</p>
              <p>Fri</p>
              <p>Sat</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              ...
              
<!-- Code truncated for brevity -->
              
              ...
              
            </div>
          </div>
          <div class="calendar--tools">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
            <span> Month </span>
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-6 event__viewer">
        <h1>Events</h1>
      </div>
    </div>
  </div>
</body>

Answer 4

It seems odd that you're not utilizing a proper table to display the information. However, if you prefer to stick with your current markup and still want it to resemble a table, you can make adjustments as follows to resolve the alignment problem.

Important styling:

.calendar {
  display: table;
  margin: 0 auto;
  caption-side: bottom;
}
.calendar--row {
  display: table-row-group;
}
.calendar--row p {
  display: table-cell;
}
.calendar--tools {
  display: table-caption;
}

Check out the updated version below:

.calendar {
  text-align: center;
  caption-side: bottom;
  display: table;
  margin: 0 auto;
}

.calendar--weekdays li {
  padding: 5px 20px;
}

.calendar--week li {
  padding: 5px 20px;
}

.calendar--row {
  display: table-row-group;
}

.calendar--row p {
  padding: 10px 15px;
  margin: 0px;
  display: table-cell;
}

.event__viewer {
  text-align: center;
}

.calendar--tools {
  display: table-caption;
}

<head>
  <!--  Font Awesome  -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="calendar">
          <h1>My Calendar</h1>
          <div class="calendar">
            <div class="calendar--row calendar--weekdays">
              <p>Sun</p>
              <p>Mon</p>
              <p>Tue</p>
              <p>Wed</p>
              <p>Thur</p>
              <p>Fri</p>
              <p>Sat</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              ...
              
<!-- Code truncated for brevity -->
              
              ...
              
            </div>
          </div>
          <div class="calendar--tools">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
            <span> Month </span>
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-6 event__viewer">
        <h1>Events</h1>
      </div>
    </div>
  </div>
</body>

Answer 5

Answer №3

The issue causing the misalignment of weekday titles with the columns below is due to them being separate DOM elements without any direct correlation (except for their box model positioning where <div>s stack beneath each other).

In essence, all rows are centered as specified. The padding in the <p> tags containing the weekday titles affects the overall width when centering the row, so the combination of character width and padding determines the center alignment. However, this calculation does not take into account the rows below it.

To establish a connection between the rows, one solution suggested by some is using a <table>. While effective, there is widespread advice against utilizing <table> for layout purposes.

Alternatively, setting a min-width on all columns can help align the content to the center in each "cell," ensuring consistency in width across all cells in each column.

Answer 6

The issue causing the misalignment of weekday titles with the columns below is due to them being separate DOM elements without any direct correlation (except for their box model positioning where <div>s stack beneath each other).

In essence, all rows are centered as specified. The padding in the <p> tags containing the weekday titles affects the overall width when centering the row, so the combination of character width and padding determines the center alignment. However, this calculation does not take into account the rows below it.

To establish a connection between the rows, one solution suggested by some is using a <table>. While effective, there is widespread advice against utilizing <table> for layout purposes.

Alternatively, setting a min-width on all columns can help align the content to the center in each "cell," ensuring consistency in width across all cells in each column.

Slightly askew text

Answer №1

Answer №2

Answer №3

Similar questions

Updating a secondary state array is possible by modifying a JavaScript array with setState()

What is the method to recommend certain pre-written text to the user within the tiptap text editor interface?

How can I manually close a Material-UI Modal?

Dynamic animation that creates an underlined hover effect for text-wrapped elements

What is the best way to open an HTML file with Python without restrictions?

Utilizing React with Typescript to create JSX text translation files

Using VueJS to integrate a CSS file into a minified CSS bundle in webpack

When I try running my JavaScript code in the console, it works perfectly fine. However, I encounter an error when I attempt

What are the differences between using .val() and .innerHTML?

Create a React component using the value stored within an object

After deploying on Heroku, the Mongodb, Reactjs, Express, and Node.js project is showing a blank page and experiencing 404 errors

Trouble retaining dropdown selection in Yii TbGridView when using pager

Transmitting video through a local area network

How can HTML text be displayed based on certain JavaScript conditions?

Background filling the entire screen with a fixed position behind the elements on the page and in front of

Basic AJAX call for newcomers

Refresh the value of a JavaScript variable on the server using a script executed on the client side

Dynamic flexibility for content scrolling across components

Can a column in ReactJS be protected from sorting or excluded from the sorting process?

Transform regular hyperlinks into image hyperlinks