0

enter image description here

I'm seeing some weird formatting where it's refusing to expand the Checkbox Button to keep it all on one line and insists on wrapping down to a second line. Please see the "View All" and "Modify All" buttons as examples.

I've tried building the above section as both a form and a grid and I'm seeing the same behavior in both cases. I know I can write a custom styling class to expand the div for the Checkbox but I'd like to keep this as standard as possible and utilize the Lightning CSS.

Has anyone ran into this before and is there a simple fix that eludes me?

Code below:

<div class="slds-col slds-size_2-of-3"></div>
      <fieldset class="slds-form-element slds-float_right">
        <legend class="slds-form-element__legend slds-form-element__label">Permissions</legend>
        <div class="slds-form-element__control">
          <div class="slds-checkbox_button-group">
            <span class="slds-button slds-checkbox_button">
              <input id="read" name="checkbox" type="checkbox" value="read" />
              <label class="slds-checkbox_button__label slds-text-body_small" for="read">
                <span class="slds-checkbox_faux">Read</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input id="edit" name="checkbox" type="checkbox" value="edit" />
              <label class="slds-checkbox_button__label slds-text-body_small" for="edit">
                <span class="slds-checkbox_faux">Edit</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input id="create" name="checkbox" type="checkbox" value="create" />
              <label class="slds-checkbox_button__label slds-text-body_small" for="create">
                <span class="slds-checkbox_faux">Create</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input id="delete" name="checkbox" type="checkbox" value="delete" />
              <label class="slds-checkbox_button__label slds-text-body_small" for="delete">
                <span class="slds-checkbox_faux">Delete</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input id="viewAll" name="checkbox" type="checkbox" value="viewAll" />
              <label class="slds-checkbox_button__label slds-text-body_small" for="viewAll">
                <span class="slds-checkbox_faux">View All</span>
              </label>
            </span>
            <span class="slds-button slds-checkbox_button">
              <input id="modifyAll" name="checkbox" type="checkbox" value="modifyAll" />
              <label class="slds-checkbox_button__label slds-text-body_small" for="modifyAll">
                <span class="slds-checkbox_faux">Modify All</span>
              </label>
            </span>
          </div>
        </div>
      </fieldset>
    </div>
0

Try adding the css property white-space: nowrap; to the <span class="slds-button slds-checkbox_button">

Which is something like <span class="slds-button slds-checkbox_button" style="white-space: nowrap;">


Alternatively, you can create a CSS class

.noWrapCls{
white-space: nowrap;
}

and then add it to every button that you want to prevent from wrapping. Example, <span class="slds-button slds-checkbox_button noWrapCls">

0

Actually I was able to correct this by adding slds-grow-none to the class for the Column which contains the Checkbox Button Group.

<div class="slds-col slds-grow-none">

Thanks for your answer!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.