CODEWITHSUNDEEP
angularbuttonprimeng
Nitin Avula
Nitin Avula

Reputation: 349

Buttons are overlapping using primeng

I'm using primeng buttons and when I use two buttons inside a div, they are getting overlapped.

I tried using several css classes to have the spacing. But, I guess you don't need css class for the spacing between 2 buttons if you're using pButton. The styling is properly imported and I have also imported the ButtonModule of primeng, as I'm able to see the styling of the buttons.

Can someone help?buttonoverlap

Upvotes: 1

Views: 4470

Answers (3)

Mohamed A M-Hassan
Mohamed A M-Hassan

Reputation: 443

With me all other answers doesn't work with me.

[ngStyle] working with me, I just add it to the first button like this:

<p-button label="Submit" type="submit" (click)="onSubmit('save')" icon="pi pi-thumbs-up"
                    styleClass="p-button-success" [ngStyle]="{'margin-right':'8px'}"  ></p-button>

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24414

you can add a margin in the right and the left for the button tp solve this

style.css

.ui-button {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

all primeng button has this class so this will affect all button in your project

Upvotes: 1

Happy Coder
Happy Coder

Reputation: 1423

Add to both your buttons style 

style="margin-left:5px;margin-top:2px;text-align: center"

Happy codding!

Upvotes: 1

Related Questions