HTML and CSS code not working as expected

Jovas
September 19, 2023
122 views
0 votes
2 Answers

I am working on creating a simple card design using HTML and CSS. Here’s the basic design:

So far this is my code:

.map-drawer-item {
  border-radius: 0.25rem;
  background: #EEE;
  color: #797979;
  font-family: Roboto;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding-right: 1rem;
  max-width: 300px;
}

.map-drawer-item-header {
  display: flex;
  align-items: center;
}

.map-drawer-item-status {
  margin: 0 1rem;
}

.map-drawer-item-header h5 {
  font-size: 1rem;
  margin-right: 0.5rem;
}

.map-drawer-item-sub {
  font-size: 0.875rem;
  font-weight: 500;
  color: #797979;
  margin-left: 2.6rem;
  margin-top: -1rem;
  padding-bottom: 1rem;
}

.map-drawer-item-icon-more {
  position: absolute;
  right: 1rem;
  transform: translateY(-50%);
  font-size: 1.2rem;
}

<div class="map-drawer-item">

  <div class="map-drawer-item-header">
    <span class="map-drawer-item-status">
      <img src="empty.svg" alt="" srcset="">
    </span>
    <h5>AT-TP279 - SOme name</h5>
  </div>

  <div class="map-drawer-item-sub">
    <span>1692 km / 07:50</span>
  </div>
  <span class="map-drawer-item-icon-more">
    <img src="more-icon.svg" alt="" srcset="">
  </span>
</div>

This code isn’t functioning as expected. For instance, when there is a long title, it doesn’t work well. Is using Flexbox the right approach, or should I consider an alternative solution?

Thank you all for your assistance.

I want to maintain a consistent and flexible card layout, even when dealing with long titles. Furthermore, I would like to keep the ‘more’ icon in a fixed position

Answers

      .map-drawer-item {
        border-radius: 0.25rem;
        background: #eee;
        color: #797979;
        font-family: Roboto;
        font-size: 0.875rem;
        font-weight: 700;
        padding: 2rem 1rem;
        max-width: 300px;
        display: flex;
        gap: 16px;
      }

      .map-drawer-item-header {
        display: flex;
        flex-direction: column;
      }

      .map-drawer-item-header h5 {
        font-size: 1rem;
        font-weight: 900;
        color: #585858;
        margin: 0;
        margin-bottom: 1rem;
      }

      .curcle-icon {
        height: 10px;
        width: 10px;
        border: 1px solid rgb(129, 129, 129);
        border-radius: 100%;
        margin-top: 3px;
        flex-shrink: 0;
      }

      .arrow {
        height: 10px;
        width: 10px;
        background-color: black;
        margin-top: 6px;
        margin-left: auto;
        flex-shrink: 0;
      }

      .text-box {
        display: flex;
        gap: 16px;
      }

<div class="map-drawer-item">
      <div class="curcle-icon"></div>
      <div class="map-drawer-item-header">
        <h5>AT-TP279 - SOme name</h5>
        <span>1692 km / 07:50</span>
      </div>
      <div class="arrow"></div>
    </div>

please check if this is good for you. you just have to play with the margin-top for those icons to stay aligned with the text. or you can just remove the margin then it will align on top.

To create a consistent and flexible card layout that handles long titles and keeps the "more" icon in a fixed position, you can make a few adjustments to your HTML and CSS code. Here’s a modified version of your code:

.map-drawer-item {
  border-radius: 0.25rem;
  background: #EEE;
  color: #797979;
  font-family: Roboto;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 1rem;
  max-width: 300px;
  position: relative;
}

.map-drawer-item-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allow header content to wrap to the next line */
}

.map-drawer-item-status {
  margin: 0 1rem;
}

.map-drawer-item-header h5 {
  font-size: 1rem;
  margin-right: 0.5rem;
  flex-grow: 1; /* Allow the title to grow and take up available space */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Show ellipsis (...) for long titles */
  white-space: nowrap; /* Prevent text from wrapping to the next line */
}

.map-drawer-item-sub {
  font-size: 0.875rem;
  font-weight: 500;
  color: #797979;
  margin-left: 2.6rem;
  margin-top: -1rem;
  padding-bottom: 1rem;
}

.map-drawer-item-icon-more {
  position: absolute;
  right: 1rem;
  top: 50%; /* Position it vertically in the middle */
  transform: translateY(-50%);
  font-size: 1.2rem;
}

<div class="map-drawer-item">

  <div class="map-drawer-item-header">
    <span class="map-drawer-item-status">
      <img src="empty.svg" alt="" srcset="">
    </span>
    <h5>AT-TP279 - Some really long name that should wrap if it's too long</h5>
  </div>

  <div class="map-drawer-item-sub">
    <span>1692 km / 07:50</span>
  </div>
  <span class="map-drawer-item-icon-more">
    <img src="more-icon.svg" alt="" srcset="">
  </span>
</div>

Here are the key changes made:

Added flex-wrap: wrap; to .map-drawer-item-header to allow the header content to wrap to the next line if it’s too long.
Added flex-grow: 1; to .map-drawer-item-header h5 to allow the title to grow and take up available space.
Added overflow: hidden;, text-overflow: ellipsis;, and white-space: nowrap; to .map-drawer-item-header h5 to handle long titles by hiding overflow text and showing ellipsis for long titles.

These changes should help you maintain a consistent and flexible card layout, even when dealing with long titles. The "more" icon remains in a fixed position.

Please signup or login to give your own answer.

Click here to cancel reply.