1

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.

Sam
  • 19
  • 2

3 Answers3

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..

Nikhil Makwana
  • 605
  • 2
  • 10
  • 21
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?

Eugene_Kr
  • 109
  • 3
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; 
}
Sam
  • 19
  • 2