dataviews
dataviews

Reputation: 3100

setting spacing for elements in a row

I have a website that generates unique rows based on data from a database. There is the source name, then some text about the row. What I am trying to achieve:

SOURCE NAME     |     This is some demo text
SOURCE NAME     |     This is some demo text
SOURCE NAME 2   |     This is some demo text
SOURCE NAME 3   |     This is some more demo text

What happens currently:

SOURCE NAME number 1    |     This is some demo text
SOURCE NAME number 23    |     This is some demo text
SOURCE NAME number 4357   |     This is some demo text
SOURCE NAME number 1111111   |     This is some more demo text
SOURCE NAME number 55    |     This is some demo text
SOURCE NAME number 639    |     This is some demo text

As your can see because of the source name text varying in length this causes the text on the right to start at different points in the row. We would like all of the text to start at the same point in each row so it aligns.

For the text that is bold, I have assigned a CSS class to it as follows:

.styling {
  font-size: 13px;
  padding-top: 3px;
  margin-left: auto;
}

HTML:

{{i['source']}}<div class="styling"><b>{{i['title']}}</b></div>

Upvotes: 0

Views: 41

Answers (4)

Hooman Bahreini
Hooman Bahreini

Reputation: 15559

You can use a table as below:

table {
    border-collapse: collapse;     /* <-- don't want border */
    /* border: 1px solid black;       <-- want border */
    width: 100%;
}

th, td {
    padding: 5px 15px;  /* add some padding */ 
}

table, td, th {    
    /* 
     * use this if you want border around table and cells
     * border: 1px solid #808080; 
     */
}
<table>
  <tr>
    <td>SOURCE NAME</td>
    <td>This is some demo text</td>
  </tr>
  <tr>
    <td>SOURCE NAME</td>
    <td>This is some demo text</td>
  </tr>
  <tr>
    <td>SOURCE NAME 2</td>
    <td>This is some demo text</td>
  </tr>
  <tr>
    <td>SOURCE NAME 3</td>
    <td>This is some more demo text</td>
  </tr>
</table>

Upvotes: 1

Ronnie Smith
Ronnie Smith

Reputation: 18575

flexbox will work for this.

.flex-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;  
    width: 300px;
}

.flex-row > .item:nth-of-type(1) {
    flex: 1 1 auto;
    text-align:right;
    min-width: 90px;
    max-width: 90px;
}
.flex-row > .item:nth-of-type(2) {
    flex: 1 1 auto;
    align-self:flex-start;
    min-width: 20px;
    max-width: 20px;
    text-align:center;
}
.flex-row > .item:nth-of-type(3) {
    flex: 1 1 auto;
    min-width: 90px;
    max-width: 90px;
}
<div class="flex-row">
  <span class="item">
  foo
  </span>
  <span class="item">
  |
  </span>
  <span class="item">
  bar
  </span>
</div>

<div class="flex-row">
  <span class="item">
  f
  </span>
  <span class="item">
  |
  </span>
  <span class="item">
  b
  </span>
</div>

<div class="flex-row">
  <span class="item">
  foofoofoofoo
  </span>
  <span class="item">
  |
  </span>
  <span class="item">
  barbarbarbar
  </span>
</div>

Upvotes: 2

Johna
Johna

Reputation: 1894

You can do it in several ways.

  1. Using a table

<table>
    <tr><td>{{i['source']}}</td><td>{{i['title']}}<td></tr> 
    ... repeat tr
</table>

  1. Using CSS styles

.source{
  display:inline-block;
  width: 200px; /** fixed width **/
}
.title{
  display:inline-block;
  font-weight:bold;
}
<div class="line">
  <div class="source">{{i['source']}}</div>
  <div class="title">{{i['title']}}</div>
</div>

You may need to tweak the CSS to get the desired appearance & behavior.

Upvotes: 1

caiovisk
caiovisk

Reputation: 3809

You can use display:table property and make your div's behave like a HTML table.

See docs https://www.w3schools.com/cssref/pr_class_display.asp

.listing  {
  display: table;
}
.listing > div {
  display: table-row;
}
.listing > div > span {
  display: table-cell;
}
.listing > div > span:nth-child(2):before {
  content: '| ';
}
<div class="listing">
  <div><span>SOURCE NAME number 1</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 23</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 4357</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 1111111</span><span>This is some more demo text</span></div>
  <div><span>SOURCE NAME number 55</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 639</span><span>This is some demo text</span></div>
</div>

Upvotes: 3

Related Questions