Text formating

Support MB Views Text formatingResolved

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24602
    toni birdtoni bird
    Participant

    Hi Guys,
    I´m having trouble to format a text out of an array in views. (Image below)
    First items OK, date OK, but the description at the end is long and uses more than one line, so my table becomes messy. Question: Is there a way to format the first items to suit the lines of the description, so it keeps the same alignment at the table?
    Many thanks

    messy table

    and code

    <div class="row text-white ">
         <div class="col-2 bg-secondary border border-right-0 border-dark"> <h8>SETOR</h8></div>
        <div class="col-3 bg-secondary border border-right-0 border-dark"> <h8>NOME ATIVIDADE</h8></div>
        <div class="col-1 bg-secondary text-nowrap border border-right-0 border-dark"> <h8>DATA INICIO</h8></div>
        <div class="col-1 bg-secondary border border-right-0 border-dark"> <h8>DATA FIM</h8></div>
        <div class="col-2 bg-secondary border border-dark"> <h8>STATUS </h8></div>
        <div class="col-3 bg-secondary border border-left-0 border-dark"> <h8>DESCRICAO</h8></div></div>
        <div class="row bg-light "> 
        <div class="col-2 border border-right-0 border-dark"><h7>{% for clone in post.group_atividade %}
                             -- {{ clone.setor_atividade }} <br>
            {% endfor %} </h7> </div>
        <div class="col-3 border border-right-0 border-dark"><h7>{% for clone in post.group_atividade %}
                              {{ clone.nome_atividade }} <br>
                              {% endfor %} </h7></div>
        <div class="col-1 border border-right-0 border-dark">{% for clone in post.group_atividade %}
        {{ clone.data_inicio }} <br>
    {% endfor %}</div>
        <div class="col-1 border border-right-0 border-dark">{% for clone in post.group_atividade %}
                               {{ clone.data_fim }}<br>
                               {% endfor %}</div>
        <div class="col-2 border border-dark">{% for clone in post.group_atividade %}
                             {{ clone.atividade_status }}<br>
                              {% endfor %}</div>
        <div class="col-3 border border-left-0 border-dark">{% for clone in post.group_atividade %}
                              {{ clone.desc_atividade }}<br>---<br>
                              {% endfor %}</div>
        
                </div></div></div>

    many thanks

    #24609
    Long NguyenLong Nguyen
    Moderator

    Hi Toni,

    I recommend using the table to keep lines in one row.
    https://css-tricks.com/complete-guide-table-element/
    https://www.w3schools.com/html/html_tables.asp

    #24645
    toni birdtoni bird
    Participant

    Hi Long,
    Seems to be the best option,will go that route. Many thanks.

    cheers

    #24833
    toni birdtoni bird
    Participant

    Hi Long,

    Group Itens are sharing the same cell, different rows, but same cell any ideas how to get it on the next cell ?

    <table class="tg">
    <thead>
      <tr>
        <th class="tg-zlqz"><h9>SETOR</h9></th>
        <th class="tg-zlqz"><h9>NOME ATIVIDADE</h9></th>
        <th class="tg-zlqz"><h9>DATA INÍCIO</h9></th>
        <th class="tg-zlqz"><h9>DATA FIM</h9></th>
        <th class="tg-zlqz"><h9>STATUS</h9></th>
        <th class="tg-zlqz"><h9>DESCRIÇÃO</h9></th>
      </tr>
    </thead>
        
    <tbody>
        
      <tr>
        <td class="tg-0pky"><h9>{% for clone in post.group_atividade %}  {{ clone.setor_atividade }} <br>
            {% endfor %}</h9></td>
        <td class="tg-0pky"><h9>{% for clone in post.group_atividade %}   {{ clone.nome_atividade }} <br>
            {% endfor %}</h9> </td>
        <td class="tg-0pky"><h9>{% for clone in post.group_atividade %}   {{ clone.data_inicio }} <br>
            {% endfor %}</h9></td>
        <td class="tg-0pky"><h9>{% for clone in post.group_atividade %}  {{ clone.data_fim }}<br>
            {% endfor %}</h9></td>
        <td class="tg-0pky"><h9>{% for clone in post.group_atividade %}  {{ clone.atividade_status }}<br>
             {% endfor %}</h9></td>
        <td class="tg-0pky"><h9>{% for clone in post.group_atividade %}  {{ clone.desc_atividade }}<br>
             {% endfor %}</h9></td>
      </tr>
         <tr>
        <td class="tg-0pky"></td>
        <td class="tg-0pky"></td>
        <td class="tg-0pky"></td>
        <td class="tg-0pky"></td>
        <td class="tg-0pky"></td>
        <td class="tg-0pky"></td>
      </tr>
        
    </tbody>
        
    </table>

    table

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.