CODEWITHSUNDEEP
htmlcssoffice-ui-fabricoffice-fabric
Plasma
Plasma

Reputation: 2912

Fabric UI Checkbox Label Alignment

I'm trying to add a checkbox to an Excel Add-In task pane but even when using a straight copy and paste of the sample code from the MS site, the label for the checkbox is on the line below. How do I make this so that the text is on the same line as the Check Box?

<div class="ms-CheckBox">
  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
    <span class="ms-Label">Checkbox</span> 
  </label>
</div>

The task pane is plenty wide enough but the labels always appear on the line below.

enter image description here

Upvotes: 0

Views: 1444

Answers (1)

seantunwin
seantunwin

Reputation: 1778

Set a CSS property for .ms-Checkbox where display: flex; This will default to a row layout which will make the children of .ms-Checkbox to be displayed inline.

.ms-CheckBox {
  display: flex;
}
<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" rel="stylesheet"/>
<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" rel="stylesheet"/>

<div class="ms-CheckBox">
  <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
  <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
    <span class="ms-Label">Checkbox</span> 
  </label>
</div>

Upvotes: 1

Related Questions