I had to adapt a code written by someone else. Using Tailwind and Angular. I had to add an optional text line, so there would be 1 or 2 lines. Both lines should align just right of some title. And a button should remain at the far right end of the container.
My first version was this. This renders fine, but this is very ugly code, I don’t like the use of inline visibility:hidden
used to keep text aligned and also the fact that the button has defined twice, but one or the other is removed based on conditions.
<div class="mt-4 flex space-x-2">
<p class="font-dotSemiBold text-sm">{{label_title}}</p>
<p class="text-sm">{{some_text}}</p>
<button *ngIf="!{{some_condition}}" mat-stroked-button class="!me-0 !ms-auto" [routerLink]="route">{{some_text}}</button>
</div>
<div class="mt-4 flex space-x-2" *ngIf="{{some_condition}}">
<p class="font-dotSemiBold text-sm" style="visibility:hidden">{{label_title}}</p>
<p class="text-sm">{{some_text}}</p>
<button mat-stroked-button class="!me-0 !ms-auto" [routerLink]="route">{{ button_text}}</button>
</div>
Current version: I tried with 3 columns. First 2 columns work fine, but, after trying various things, there’s no way to send this button to the right. How am I supposed to do this?
<div class="columns-3 mt-4 flex space-x-2">
<div>
<p class="font-dotSemiBold text-sm">{{label_title}}</p>
</div>
<div>
<p class="text-sm">{{some_text}}</p>
<p *ngIf="some_condition" class="text-sm">{{some_text}}</p>
</div>
<div class="flex items-end">
<button mat-stroked-button class="!me-0 !ms-auto" [routerLink]="route">{{ button_text}}</button>
</div>
</div>
I tried content-end
, item-end
, text-right
, object-right
… on the the div or the button, or both, it depends. Haven’t found the right way. I’m not a Tailwind I expert. I could probably solve this easily in vanilla CSS but looking for a Tailwind solution in the context of this application.
2
Answers
All the CSS classes you’ve listed are to be used with
display: grid;
if I am not mistaken.What you would want to use is
ml-auto
on the element you want to be place at end.Find attached a link to an example, make sure your container stretches to the desired length.
https://play.tailwindcss.com/nsDfrOXBLJ
EDIT:
Your
space-x-2
class also seems to force a specific margin, I would recommend usinggap-2
instead.In your case it should be as follow:
Not sure why you’ve placed "dot" in some of your classes?
You need to use
gap-2
insteadspace-x-2
because it put margin right and left each child element and you don’t can use a margin left as auto. Here an example: