Genie Discord forum

[Solved] How to set the separator at the bottom of the column?

1/15/2024, 5:39:05 PM

Hi, I do have a row containing two columns, like in the picture. I want to have the orange separator at the bottom of the columns. How can I achieve this? Here is my code so far:

<div class="row q-col-gutter-sm" style="border: 2px dashed green">
      <div class="col-12 col-sm-6">
         <div class="column">
            <div class="col">
              One of two rows
            </div>
            <div class="col">
              <p>One of two rows</p>
              <q-separator color="orange" size="3px"></q-separator>
            </div>
        </div>
      </div>

      <div class="col-12 col-sm-6">
        <div class="column">          
          <div class="col">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make
          </div>
          <div class="col">
            <q-separator color="orange" size="3px"></q-separator>
          </div>
        </div>
      </div>
    </div>

marius.drulea

1/15/2024, 5:43:21 PM

see this second picture, there is a separator/border for each item in the row and the separators are all at the same level; this is what I'm trying to achieve with the quasar/stipple framework

marius.drulea

1/15/2024, 6:13:26 PM

I have found a solution: I had to use a div with class="column col" and also a col-grow div. It looks a bit weird to me to have a div being both column and col. Here is the full code:

marius.drulea

1/15/2024, 6:46:11 PM

<div class="row q-col-gutter-sm" style="border: 2px dashed green">
      <div class="column col-12 col-sm-6">
              <div class="col">
                One of two rows
              </div>
              <div class="col-grow">
                <p>One of two rows</p>
                <q-separator color="orange" size="3px"></q-separator>
              </div>
      </div>

      <div class="column col-12 col-sm-6">
          <div class="col">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.             
          </div>
          <div class="col-grow">
            <p>One of two rows</p>
            <q-separator color="orange" size="3px"></q-separator>
          </div>
      </div>
    
    </div>

marius.drulea

1/15/2024, 6:46:51 PM

marius.drulea

1/15/2024, 7:09:29 PM

While this works, I think is not a nice solution. There shall be a better way.

marius.drulea

1/15/2024, 7:25:32 PM

I do get the same result with any of the following options. So we just need a col with a flex display and flex-direction as column. Seem fine to me in the end.

<div class="col" style="display: flex; flex-direction: column">
<div class="column col">

marius.drulea

1/15/2024, 8:06:31 PM

An here you can find an additional answer from the quasar discord group:

.col specifies how it behaves as a child of its flex parent, .row|.column specifies how it behaves as a parent for its children

marius.drulea

1/15/2024, 8:06:51 PM

so the combination column col seem to be ok

Pere

1/16/2024, 10:53:57 AM

Glad to see you figured it out @marius.drulea, thanks for sharing your solution!

marius.drulea

1/17/2024, 12:11:22 AM

Changed the channel name: Solved How to set the separator at the bottom of the column?