(I re-edit the question following the comment of Naga Sai A)
The following code shows a toggle description (on the left), the toggle and its labels (on the right) in one line:
<html>
<head>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
</head>
<body class="ms-font-m">
<div class="padding">
<div class="ms-Toggle">
<span class="ms-Toggle-description" style="display:inline; float:left;"><font size="3">Activate / Deactivate</font></span>
<input type="checkbox" id="toggle" class="order ms-Toggle-input">
<label for="toggle" class="order ms-Toggle-field" style="display:inline; float:right;">
<span class="order ms-Label ms-Label--off">Off</span>
<span class="order ms-Label ms-Label--on">On</span>
</label>
</div>
</div>
</body>
</html>
Here is the JS Bin.
However, we could see, from the output of JS Bin, the labels (ie, off or on) have past the right border:
Does anyone know what is the right way to make the toggle and its labels right aligned?
PS: I have tried to add margin-right: 40px; in style="display:inline; float:right;", it did help. However, I really want to avoid constant px and find a good solution for exact right-aligned.
Aucun commentaire:
Enregistrer un commentaire