CODEWITHSUNDEEP
htmlcssangularprimeng
Rüdiger
Rüdiger

Reputation: 943

Align PrimeNG-components next to each other instead of below each other

I am using PrimeNG-components pInputText and p-dropdown that I'd like to be aligned next to each other. I've got the following code:

<div class="main-div">
  <div class="block-div">
  <h4 class="input-description">Enter Information:</h4>
  <span class="ui-float-label">
    <input id="psp-input" type="text" pInputText [(ngModel)]="pspNumber"/>
    <label for="psp-input">{{projectNumber}}.{{pspNumber}}</label>
  </span>
  <h4 class="input-description">Select Type:</h4>
  <p-dropdown [options]="orderTypes" [(ngModel)]="selectedOrderType" [optionLabel]="Typ"></p-dropdown>
  </div>
</div>

which produces (confusingly for me) the following output:

enter image description here

How can I make them aligned next to each other? I wanted to align them in an inline-block in my div:

.block-div {
    display: inline-block;
}

which worked for native Angular elements, but not for these. I also tried to modify the width or align them to two different div's and align them next to each other, which did also not work out. How can I make this work for PrimeNG-Components?

Upvotes: 0

Views: 7119

Answers (2)

hagay
hagay

Reputation: 2560

Try to group by table and tr and td tags it is reslove similar problem in p-calendar tags in Edge browser.

Upvotes: -2

SeleM
SeleM

Reputation: 9648

Try to group each part (component and its heading) within a simple div tag:

  <div class="block-div">

    <div>

     <h4 class="input-description">Enter Information:</h4>
     <span class="ui-float-label">
      <input id="psp-input" type="text" pInputText [(ngModel)]="pspNumber"/>
      <label for="psp-input"></label>
     </span>

    </div>

    <div>

      <h4 class="input-description">Select Type:</h4>
      <p-dropdown [options]="orderTypes" [(ngModel)]="selectedOrderType" optionLabel="Typ"></p-dropdown>

    </div>

  </div>

Then change your css to :

 .block-div {
   display: inline-flex;
 }

Working demo.

Upvotes: 4

Related Questions