Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Flexbox list with remaining width, ellipsis and some content on a new line

Tags:

html

css

width

flexbox

I'm trying to learn flexbox, but I'm struggling to understand the concept. I want to create a list of e-mails where every item is a flexbox container (see underneath).

example

Rules:

  • The tag is optional but if it is shown, it's shown directly next to the name.
  • The date is always there, the width varries
  • The Name of the person fills the remaining space. If it becomes to big it is truncated.
  • The space between the name and the tag is always 5px
  • The mail subject is shown on a new line and is also truncated

My attempt so far: https://jsbin.com/sepobipiwa/edit?html,css,output

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="name">John Doe</div>
        <div class="date">14:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Marrie Antoinette</div>
        <div class="tag">Concept</div>
        <div class="date">16:01</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">tag</div>
        <div class="date">18:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">concept</div>
        <div class="date">yesterday</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>
like image 667
klaasjansen Avatar asked Jan 05 '17 17:01

klaasjansen

People also ask

How do you show 3 items per row in flexbox?

For 3 items per row, add on the flex items: flex-basis: 33.333333% You can also use the flex 's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333% .

How do I get the remaining width on my flexbox?

Use the flex-grow property to make a flex item consume free space on the main axis. This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

How do you display 4 items per row in flexbox?

Here's another way without using calc() . // 4 PER ROW // 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins... . child { margin: 0 2% 0 2%; width: 21%; } // 3 PER ROW // 100 divided by 3 is 33.3333...

1 Answers

So I did this to your code:

  1. Made your flexbox to wrap by adding flex-wrap: wrap to the li

  2. Forced the subject to the next line by telling it to take the full available width in the row by giving it flex-basis: 100%

  3. Add margin-left: auto to place the date to the right-most end.

  4. To finish it up, you can add these styles to name and subject to get the ellispsis woking:

      white-space: nowrap;
  overflow: hidden;

  5. Also added max-width: 50% to name to adjust the first line.

See demo below:

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 50%;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-basis: 100%;
}
.date {
  margin-left: auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="name">John Doe</div>
        <div class="date">14:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Marrie Antoinette</div>
        <div class="tag">Concept</div>
        <div class="date">16:01</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">tag</div>
        <div class="date">18:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">concept</div>
        <div class="date">yesterday</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>

Suggestion:

You should edit you markup and create a wrapper for the first row that contains the name,tag and date which is a better design (you can remove the untidy max-width: 50% used above) - see demo below:

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-basis: 100%;
}
.date {
  margin-left: auto;
}
.header {
  display: flex;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="header">
          <div class="name">John Doe</div>
          <div class="date">14:50</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Marrie Antoinette</div>
          <div class="tag">Concept</div>
          <div class="date">16:01</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Someone with a long name</div>
          <div class="tag">tag</div>
          <div class="date">18:50</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Someone with a long name</div>
          <div class="tag">concept</div>
          <div class="date">yesterday</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>
like image 94
kukkuz Avatar answered Sep 20 '22 10:09

kukkuz
Sign in to Comment

Related questions

What does "overflow" do for this <ul> tag?
CSS/Javascript: How to make rotating circular menu with multiple states?
Django - Get data from a form that is not a django.form
Autocomplete search box and pass value to flask
How do I make CSS :active styles work on trackpad taps?
How to draw responsive lines between divs
Disable Chrome's text input undo/redo (CTRL+Z / CTRL+Y)
Javascript date object without time zone
How does padding-top: 100% work?
Replacing Bootstrap Dropdown with Dropup (Different activity on two near identical implementations)
How to split a webpage with CSS?
Create a perfect dashed line with background-image in CSS
Align elements to the center of another element
how to take a screenshot of a loaded webpage using php? [duplicate]
Hiding WebKit scrollbar when overflow-scrolling: touch is enabled
How can I export my bookmarks and import them into a table?
How to disable past dates from today date with Material ui reactjs?
How do I mimic keyboard behavior in my styled select dropdown?
JS - hide options based on value attribute
Html transparent text input box

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!