Question 184295 in CSS Question posted in
Some basic documentation can be found here.

Css – How to center text elements in an Angular fluent-UI drop-down?

I am trying to center-align text elements in my Angular fluent-UI dropdown. I’ve tried using text-align and text-align-last, but no luck.

Here is the CSS:

.fluent-select {
  text-align-last: center;
  text-align: center;
  min-width: 0;
  flex: 1;
}

.fluent-select-option {
  text-align: center;
  text-align-last: center;
}

Here is the HTML:

<fluent-select
  title="Please select here"
  [(ngModel)]="mySelection"
  (ngModelChange)="executeSelection()"
  name="myChoice"
  class="fluent-select"
  ngDefaultControl
>
  <fluent-option class="fluent-select-option">{{ mySelection }}</fluent-option>
  <fluent-option
    *ngFor="let choice of choices; let i = index"
    [value]="choice.path"
  >{{ choice.title }}</fluent-option>
</fluent-select>

I have tried using the CSS properties text-align: center and text-align-last: center, but no matter what I try the text is always aligned on the left.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The problem was that I was using .fluent-select-option instead of fluent-option (no dot). Here is what my working code looks like now:

    .fluent-select {
  text-align-last: center;
  text-align: center;
  min-width: 0;
  flex: 1;
}

fluent-option {
  display: block;
  text-align: center; 
}

  2. 0

    Fluent UI components have their own CSS rules and styling. Therefore, applying general CSS properties like text-align and text-align-last might not work as expected. Instead, you can use the specific styling options provided by the Fluent UI dropdown component

    To center-align the text elements in your Fluent UI dropdown, you can modify the styles of the Fluent UI components directly like.

    .fluent-select-option .ms-Button-flexContainer {
  justify-content: center;
}

    hope it helpful..

    Login or Signup to reply.
  3. 0 
    fluent-option {
    display: block;
    text-align: center; 
}

    Or

    fluent-option {
   display: flex;
   justify-content: center;
}

    https://stackblitz.com/edit/fluent-select-example-hss8ie?file=index.ts,index.html

    Do you also want to style select button dropdown?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search