HTML table with a responsive timeline

I have implemented a timeline within a table, and while it is functioning correctly, the design is not responsive on mobile or small screens. The CSS code snippet responsible for this layout issue is as follows:

.filters-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-left: 3px;
}

.timeline {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li {
  transition: all 200ms ease-in;
}

.timestamp {
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 20;
}

.point {
  padding: 0px 40px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;
  position: relative;
  transition: all 200ms ease-in;
  padding-top: 1em;
}

.point h5 {
  font-weight: 600;
}

.point:before {
  content: '';
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 25px;
  border: 1px solid #ddd;
  position: absolute;
  top: -15px;
  left: 42%;
  transition: all 200ms ease-in;
}

.li.complete .point {
  border-top: 2px solid #464DE4;
}

.li.complete .point:before {
  background-color: #464DE4;
  border: none;
  transition: all 200ms ease-in;
}

.li.complete .point h5 {
  color: #464DE4;
}

.timeline::before {
  background-color: transparent;
}

@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block;
  }
  .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit;
  }
  .timestamp {
    width: 100px;
  }
  .point:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in;
  }
}
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">User</th>
      <th scope="col" class="text-center">Paid Time Off Balance in Hours </th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of filteredItems$ | async; index as i">
      <th scope="row">1</th>
      <td>
        <ngb-highlight [result]="item.user.firstName + ' ' + item.user.lastName" [term]="filter.value"></ngb-highlight>
      </td>
      <td>
        <ul class="timeline" id="timeline">
          <li class="li complete">
            <div class="timestamp">
              <span>Expire: test</span>
              <span>Hours: test</span>
            </div>
            <div class="point">
              <h5>Awarded Time</h5>
            </div>
          </li>
          <li class="li complete">
            <div class="timestamp">
              <span>Expire: test</span>
              <span>Hours: test</span>
            </div>
            <div class="point">
              <h5>Advance Time</h5>
            </div>
          </li>
          <li class="li complete">
            <div class="timestamp">
              <span>Available Time: test</span>
              <span>&nbsp;</span>
            </div>
            <div class="point">
              <h5>Total</h5>
            </div>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

There is a need to enhance its responsiveness, especially when embedded in a table structure;

Image Reference:

https://i.sstatic.net/UWWSY.png

What modifications can be applied to achieve a responsive design that displays correctly on mobile devices?

Best regards

htmlcss

Answer №1

Thanks for pointing out the dynamic nature of the upper text in the timeline. To address this, I've adjusted the height property for .point to be 60px, and applied align-items:flex-end to the .timeline class.

I trust that these modifications will provide a solution for you.

.filters-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-left: 3px;
}

.timeline {
  list-style-type: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.li {
  transition: all 200ms ease-in;
}

.timestamp {
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 20;
}

.point {
  padding: 0px 40px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;
  position: relative;
  transition: all 200ms ease-in;
  padding-top: 1em;
  height: 60px;
text-align: center;
}

.point h5 {
  font-weight: 600;
}

.point:before {
  content: '';
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 25px;
  border: 1px solid #ddd;
  position: absolute;
  top: -15px;
  left: 42%;
  transition: all 200ms ease-in;
}

.li.complete .point {
  border-top: 2px solid #464DE4;
}

.li.complete .point:before {
  background-color: #464DE4;
  border: none;
  transition: all 200ms ease-in;
}

.li.complete .point h5 {
  color: #464DE4;
}

.timeline::before {
  background-color: transparent;
}

@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block;
  }
  .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit;
  }
  .timestamp {
    width: 100px;
  }
  .point:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in;
  }
}
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">User</th>
      <th scope="col" class="text-center">Paid Time Off Balance in Hours </th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of filteredItems$ | async; index as i">
      <th scope="row">1</th>
      <td>
        <ngb-highlight [result]="item.user.firstName + ' ' + item.user.lastName" [term]="filter.value"></ngb-highlight>
      </td>
      <td>
        <ul class="timeline" id="timeline">
          <li class="li complete">
            <div class="timestamp">
              <span>Expire: test</span>
              <span>Hours: test</span>
            </div>
            <div class="point">
              <h5>Awarded Time</h5>
            </div>
          </li>
          <li class="li complete">
            <div class="timestamp">
              <span>Expire: test</span>
              <span>Hours: test</span>
            </div>
            <div class="point">
              <h5>Advance Time</h5>
            </div>
          </li>
          <li class="li complete">
            <div class="timestamp">
              <span>Available Time: test</span>
              <span>&nbsp;</span>
            </div>
            <div class="point">
              <h5>Total</h5>
            </div>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Answer №2

To ensure consistency, it is important to specify the height and width of your li (card). This will prevent any variations in size that could lead to issues.

Personally, I have resolved this problem by setting a specific height and width for .li, which has resulted in normal functionality.

.li {
  transition: all 200ms ease-in;
  height: 181px;
  width: 137px;
}

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

Performing Jquery functions on several elements at once

Looking at the code snippet below, there are two buttons and an input in each container. The input calculates and adds up the number of clicks on the 2 buttons within the same container. However, it currently only works for the first container. How can thi ...

javascriptjqueryhtml

How come I am unable to attach outerHTML to an element using javascript?

I am facing an issue where I am trying to move an element from one part of the page to another using JavaScript. I attempted to use the outerHTML property and the appendChild method to achieve this, but I keep encountering an error message stating that Arg ...

javascripthtmlcss

Webpack 2.7 is experiencing difficulty loading the blueprintjs core CSS

While attempting to utilize blueprintjs and importing its CSS, I believe I may have misconfigured my webpack setup. This resulted in the following error https://i.sstatic.net/eErly.png Below is my webpack configuration: const ExtractTextPlugin = require( ...

cssreactjswebpack-2blueprintjs

Animating toasts in Bootstrap

Exploring the options available at https://getbootstrap.com/docs/4.3/components/toasts/ To customize your toasts, you can pass options via data attributes or JavaScript. Simply append the option name to data- when using data attributes. If you're lo ...

javascripthtmltwitter-bootstrap

How Webpack 4 Utilizes splitChunks to Create Numerous CSS Files

I need to create multiple CSS files using webpack 4 with the min-css-extract-plugin and splitChunks plugin. Here is my webpack configuration. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = ...

csswebpackwebpack-4webpack-splitchunks

What is the best way to update a section of an HTML file without changing the entire "inner.html"?

I'm working on a counter that can either count backwards or in ascending order based on requirements. The counter is functioning correctly, but I want to add text to accompany each number as it counts. The issue is that the text changes every time the ...

javascripthtmlcss

Keep an ear out for upcoming occasions once the transition has been completed

I am looking to create a smooth transition effect that will push the main content downwards when the Twitter Bootstrap collapse menu is activated using the toggle button. However, I have noticed an issue where if I quickly double click the toggle button, ...

jqueryhtmlcsstwitter-bootstraptransition

Ensure the unordered list (ul) remains fixed in place

Is there a way to make my left menu, which is a ul, stay static on the screen so that the full menu always appears when I scroll? I attempted to set 'position: fixed; top: 0, left: 0' but it caused the div next to the ul to shift on top of the u ...

javascripthtmlcss

Display only two random data points for each value

I have this code snippet that displays data from a database and filters "Provider" categories with "searchByProvider". Is it possible to only show 2 random pieces of data when someone selects "Provider"? There is a lot of data under Provider, but I want to ...

phphtmlcssmysqlajax

A convenient method for converting horizontal columns into vertical columns on mobile screens without using <div> tags or setting a minimum width, perfect for email formatting

After experimenting with using <div> elements and applying a min-width attribute to an email, I have come to the conclusion that these methods do not yield satisfactory results. While the alignment of horizontal columns works well on desktop screens, ...

htmlresponsive-designhtml-email

Optimizing Text Formatting for Angular: Learn how to seamlessly showcase rich content in its proper format

I have a paragraph content fetched from a strapi endpoint that is in rich text format. When displayed on the page using a p tag, it shows with all the rich text formats such as ** for bold and more. How can I display it correctly? Inside the .ts file, // ...

javascripthtmlangularangularjstypescript

What are the steps to troubleshoot CSS issues in NextJS?

Currently, I am encountering challenges while trying to integrate markdown with CSS. The problem I am facing has been replicated in the link provided: https://codesandbox.io/s/react-quilljsbasic-forked-3rcxw?file=/src/App.js ...

cssreactjsmarkdownnext.js

Learn the process of uploading multiple xml files in PHP

I am trying to figure out how to read multiple XML files with different names. For example, I have three XML files in the folder (/data/data/www/) named Message.xml, example.xml, and data.xml. Currently, I am only able to read one file. How can I modify my ...

phphtmlxmlfile

Tips for displaying lengthy text within a table and showing it as a popover when hovering the mouse

Is there a way to create a popover using only HTML and CSS? I attempted the code below, but encountered an issue where on mouse hover, the text displays in the same cell and changes the table width. How can I achieve a stylish popover effect for the text? ...

javascriptjqueryhtmlcssangularjs

Inadequately responsive Angular Material nav bar

I've scoured the internet far and wide, yet I can't seem to uncover a solution to my dilemma. That's why I'm reaching out here. The issue at hand is with my nav bar, which utilizes mat-toolbar. Everything functions flawlessly on tablet ...

cssangulartwitter-bootstrapresponsive-designangular-material

Guide to selecting multiple rows at once using ng-options in a list

Need assistance with an HTML list: I have a box displaying a list where users can select multiple items to save. The saving and retrieving process is functional as the selectedList stores the user's previous selections, while fullList contains all av ...

javascripthtmlangularjs

Using jquery to eliminate an item from a list

After spending all day working on one of my first JavaScript projects, I have created a script that allows users to insert items into a text box using a field and submit button. Each item in the list comes with a remove button for deletion. Now, I am look ...

javascriptjqueryhtmlcss

How to Align Resizable Images in Nested Divs Using CSS on Drupal 7

I am currently working on customizing an image gallery in Drupal 7 that I have built. Users can upload multiple images, which are then displayed as a list on the page. To ensure responsiveness, I am using the Responsive Images and Styles module so that th ...

cssdrupal-7css-floatdrupal-theminghtml

Error with hyperlinks preventing redirection when clicking on the menu

$(document).ready(function () { $('.mobile-nav-button').on('click', function() { $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)" ).toggleClass( "mobile-nav-button__line--1"); $( ".mobile-nav ...

javascriptphpjqueryhtmlcss

Is there a way to lock an element's position on a webpage once it reaches a specific point?

Excuse me if this query seems trivial. I am currently in the process of designing a webpage with a header that has two distinct sections (upper and lower). My aim is for the lower portion of the header to remain fixed on the page as I scroll down. Is the ...

javascripthtml