1

I have a primeng grid and p-col inside, base on the example available in link

I am having the data in each row instead of the same row as shown in the link

my HTML

<h5>Basic</h5>
<div class="p-grid">
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">2</div>
    </div>
    <div class="p-col">
        <div class="box">3</div>
    </div>
</div>

my CSS:

   .box {
            background-color: var(--surface-e);
            text-align: center;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-radius: 4px;
            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
        }

My Output: enter image description here

how can I get the data in a single row, I tried display flex and inline even they did not help.

Rasmi
  • 501
  • 1
  • 6
  • 26

1 Answers1

0

The problem is the nesting you've added causes .p-col-6 to no longer be a child of the flexbox parent, .p-grid. Instead, .p-col-6 is a block level element, and will not align side-by-side as would typical row-directional flex children.

<div class="p-grid">                   /* <-- flexbox  parent */
    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-12">12</div>
    </div>

    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-6">          /* <-- NOT a flexbox child */
            6
        </div>
        …
    </div>
</div>
Kavinda Senarathne
  • 1,813
  • 13
  • 15
  • Even if there are p-col-12 they did align side-by-side.. Even tried the above code but still, they won't align side-by-side. – Rasmi Nov 28 '20 at 17:26