I'm using Primeng and I can't display correctly this menu when the button is clicked. As you can see on this image, the menu displays outside of the table header far away from the button. What I need is the menu displays just below from the button as this prototype.
<ng-template pTemplate="caption">
<div class="flex align-items-center justify-content-between mb-2">
<h3 class="m-0"> Lista de evaluaciones
</h3>
<button pButton pRipple label="Agregar evaluación" icon="pi pi-folder" (click)="menu.toggle($event)"
class="p-button-primary mr-2"></button>
</div>
<p-menu #menu [popup]="true" [model]="items"></p-menu>
</ng-template>
I thought the problem was the p-menu outside de div but if it's in there the flex align-item-center justify-content-between of Primeflex moves the elements. Thanks for the help.
The solution is to put the p-menu element outside of the caption, where the table styles cannot affect it:
<p-table [value]="customers" dataKey="id" [rows]="10">
<ng-template pTemplate="caption">
<div class="flex align-items-center justify-content-between mb-2">
<h3 class="m-0">Lista de evaluaciones</h3>
<button
pButton
pRipple
label="Agregar evaluación"
icon="pi pi-folder"
(click)="menu.toggle($event)"
class="p-button-primary mr-2"
></button>
</div>
</ng-template>
</p-table>
<p-menu #menu [popup]="true" [model]="items"></p-menu>
StackBlitz
Related
For some reason when I added the third button, the buttons started showing in a column manner.
html:
<div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator">
<div *ngIf="isChannelEditable">
<button mat-raised-button color="accent" type="button" (click)="openDialog()">Add field </button>
<div *ngIf="isChannelReadyForBids">
<button mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for
bidding
</button>
</div>
<button mat-raised-button color="accent" type="submit">Save Channel</button>
</div>
<div *ngIf="form.value.state=='in progress'&&userId === channel.creator">
<button mat-raised-button color="accent" type="button" (click)="setState('new')">Edit channel </button>
</div>
</div>
css:
.creator-button-container{
background-color: red;
display: inline-block;
flex-direction: row;
}
I though the 'display: inline-block' would work but its not working
I looked at this solution but i didnt understand it: Angular - display buttons in rows of two
its weird because as soon as i added the third button, the buttons started being displayed as a column
Add buttons in div tag because div is block level element.
Something like this:
<div>
<div><button class="btn">B1</button></div>
<div><button class="btn">B2</button></div>
<div><button class="btn">B3</button></div>
</div>
I needed to add a span to my HTML with an ID to be able to go to it after clicking Reply button. I needed it only for the last element on the page. It works but I'm getting 2 errors in the console. Could anyone tell me what have I done wrong and how can I get rid of them?
<div class="comment">
<app-user-image></app-user-image>
<div class="position-relative d-inline-block flex-fill">
<div class="d-flex justify-content-between align-items-center">
<div><strong>{{comment.author.name}} / {{comment.author.id}}</strong><span
class="date">{{comment.created | krakenDateTime}}</span></div>
<div class="actions">
<button *ngIf="this.hateoas.supports(comment, 'update') && !edit"
type="button" class="bg-transparent border-0" title="Edit"
(click)="toggleEdit()"><i class="icon-kraken icon-kraken-edit"></i></button>
<button *ngIf="this.hateoas.supports(comment, 'delete')"
type="button" class="bg-transparent border-0" title="Delete"
(click)="displayDeletionConfirmation()"><i class="icon-kraken icon-kraken-trash"></i></button>
</div>
</div>
<textarea *ngIf="edit; else readonlyComment"
#textarea
class="d-block w-100"
style="min-height: 7rem;"
[rows]="rows()"
[(ngModel)]="commentContent"></textarea>
<ng-template #readonlyComment>
<div [innerHTML]="commentContentHtml()"></div>
</ng-template>
<strong *ngIf="showReplyButton"
class="reply-button"
(click)="toggleReplyComponent()">Reply</strong>
</div>
here is the onInit method but I have not touched it
ngOnInit(): void {
if (this.comment) {
this.textArea.nativeElement.focus()
}
}
I'm presuming textArea is a #ViewChild reading the #textarea ref
That textarea component is in an ngIf, so it won't be available during ngOnInit
Also, the ngIf specifically removes the textarea if the comment is displayed - so your logic seems a bit off
<textarea *ngIf="edit; else readonlyComment" ...>
On my react project i want align my components to vertical. But when i use div and make it flex , my component width is changing and looking bad. what should i do ? I using tailwindcss but if you dont know it you can tell normal css too. I can use normal css too. My component :
<div className="">
<div className="mt-6 ml-5 bg-gray-50 border rounded-lg border-gray-200 shadow-md w-3/12 h-full mb-10">
<div className="flex mt-2">
<div className="border border-gray-500 ml-2 mt-2 pl-1 pr-1 pt-2 ">
<FontAwesomeIcon icon={faEtsy} className="text-2xl text-red-600" />
</div>
<div className="relative">
<span className="ml-3 pt-2 relative text-xl font-medium">
{prop.PharmacyName}
</span>
<br />
<span className="ml-4 text-blue-800">{prop.PharmacyNumber}</span>
</div>
</div>
<Divider />
<div className="">
<p className="px-2 py-1 font-medium text-base text-gray-700">
{prop.PharmacyAdress}
</p>
</div>
</div>
</div>
How i calling my component :
data.map((x, index) => {
return (
<div className="flex align-center">
<PharmacyCard className="relative" key={index} props={x} />
</div> )})
How its looks like : https://prnt.sc/1covi9m
How i want : https://prnt.sc/1cow1sq
I using that component like 30-40 times with mapping. So i want to see like 3 component in a row. Thanks for all replies!
So i want to see like 3 component in a row.
Since you have clear idea about the layout, I suggest to wrap you components in another div with grid and three columns; something like this:
<div className="grid grid-cols-3">
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}
</div>
Depending on your design, you may add gap class as well.
Also consider removing w-3/12 class from components so they fill grid's width.
You just need to put the .flex in upper level like the below:
<div className='flex align-center'>
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}</div>
hope this link will assist you to get the flexbox better
https://codepen.io/enxaneta/full/adLPwv
I have the following HTML code in my landing page
<div class="col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text" href="#billing">Tell Me More</a>
</div>
<div id="billing" class="billing-section">
//show some billing options
</div>
when clicking on btn know-more-btn for the first time the screen flickers and nothing happens only from the second click it "jumps" to the right location on the page (the billing section)
Not sure why this happens
Also is there a way to turn the "jump" into simulation of fast scroll to that section
Try this
html
<div class="col-12 text-center mt-4 mb-4" (click)="toSec()">
<a class="btn know-more-btn text">Tell Me More</a>
</div>
ts
toSec() {
document.getElementById("billing").scrollIntoView();
}
for smooth scrolling adding this to main style file
css
html {
scroll-behavior: smooth;
}
this will not work will with the router Tell Me More ,it will trigger the router to redirect to some page or reload the page.
so one way to solve it by useing template variable and call scrollIntoView method to apply scrolling.
<div class="basic c-pointer col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text"
(click)="billingElm.scrollIntoView({behavior: 'smooth'})" >
Tell Me More 👇
</a>
</div>
<div #billingElm class="billing-section">
//show some billing options
</div>
stackblitz demo 🚀🚀
for reusability this the directive way
#Directive({
selector: '[scrollTo]'
})
export class ScrollToDirective {
#Input('scrollTo') elm:HTMLElement;
#HostListener('click') onClick(){
if(this.elm){
this.elm.scrollIntoView({behavior:'smooth'});
}
}
}
template
<div class="col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text" [scrollTo]="billingElm" >Tell Me More 👇</a>
</div>
<div #billingElm class="billing-section">
//show some billing options
</div>
stackblitz demo 🌟🌟
check this Passive Link in Angular 2 - equivalent to
get more details about how this problem.
I've got a very simple bootstrap page that has a div with a column of buttons in it. For no apparent reason the buttons are shifted slightly to the right:
The containing div (as highlighted above) has no padding or margin:
and the buttons have the same margin applied on both sides:
associated html:
<div class="cinema-list" style="max-width: 700px;" class="m-auto">
<h2>Select Cinema</h2>
<div class="form-group">
<label for="cinemaSearchInput">Search</label>
<input
type="text"
class="form-control"
id="cinemaSearchInput"
placeholder="Cinema name..."
[(ngModel)]="searchString"
>
</div>
<div *ngIf="cinemaList != null">
<button
*ngFor="let cinema of cinemaList"
type="button"
class="btn btn-primary cinema-button m-1 w-100"
(click)="selectCinema(cinema)"
>
<span>{{cinema.name}}</span>
<i
*ngIf="isFavoriteCinema(cinema)"
class="fa fa-heart pl-1 heart"
aria-hidden="true"></i>
</button>
</div>
<div
*ngIf="cinemaList == null"
class="d-flex align-items-center pt-2">
<span class="spinner-border text-primary mr-2"></span>
<span>Loading...</span>
</div>
</div>
and scss:
.cinema-list{
.cinema-button{
display: block;
}
.cinema:hover{
background-color: $primary;
}
}
I can't see any reason why the buttons are shifted. Is this a bug with bootstrap?
This is boostrap 4.3.1
Thanks
It is because you added class m-1 in the button. please remove that class from it.
Replace
class="btn btn-primary cinema-button m-1 w-100"
With
class="btn btn-primary cinema-button w-100"
Hope this will help you.
Please use my-1 and mx-0 class instead of m-1 class.
<button
*ngFor="let cinema of cinemaList"
type="button"
class="btn btn-primary cinema-button my-1 mx-0 w-100"
(click)="selectCinema(cinema)"
>
<span>{{cinema.name}}</span>
<i
*ngIf="isFavoriteCinema(cinema)"
class="fa fa-heart pl-1 heart"
aria-hidden="true"></i>
</button>
Alok Mali's answer fixes the issue.
I can't see any reason why the buttons are shifted. Is this a bug with bootstrap?
No, this is how CSS is designed.
This is the root cause why this is happen.
In Bootstrap by default all elements have box-sizing:border-box;
This is done by reset.scss
*,
*::before,
*::after {
box-sizing: border-box; // 1
}
For border-box the width and height properties of an element include the content, padding, and border, but do not include the margin. In your case you have a margin of .25em when you applied class m-1, thats why your element (button in this case) overlflowed.
More read of box-sizing here
Hope this helps.