CODEWITHSUNDEEP
css
JD Sanders
JD Sanders

Reputation: 82

Checkbox labels wrapping

I can't seem to figure out how to stop the labels from wrapping here. Any thoughts?

                <div>
                <h4>Risk Category</h4>
                <ul class="checkbox-grid">
                    <li><input type="checkbox" id="chkStrategic" value="Strategic" /><label>Strategic</label></li>
                    <li><input type="checkbox" id="chkEnvironmental" value="Environmental" /><label>Environmental</label></li>
                    <li><input type="checkbox" id="chkMarket" value="Market" /><label>Market</label></li>
                    <li><input type="checkbox" id="chkCredit" value="Credit" /><label>Credit</label></li>
                    <li><input type="checkbox" id="chkOperational" value="Operational" /><label>Operational</label></li>
                    <li><input type="checkbox" id="chkCompliance" value="Compliance" /><label>Compliance</label></li>
                    <li><input type="checkbox" id="chkBenefit" value="Benefit" /><label>Benefit</label></li>
                    <li><input type="checkbox" id="chkValue" value="Value" /><label>Value Delivery</label></li>
                    <li><input type="checkbox" id="chkProject" value="Project" /><label>Project Delivery</label></li>
                    <li><input type="checkbox" id="chkService" value="Service" /><label>Service Delivery</label></li>
                    <li><input type="checkbox" id="chkSecurity" value="Security" /><label>Security</label></li>
                </ul>
            </div>

Code Pen Showing the Problem

Thank you in advance. JD

Upvotes: 1

Views: 1843

Answers (2)

Luca Detomi
Luca Detomi

Reputation: 5716

Simply add the following rules:

#dialog-form .checkbox-grid input,
#dialog-form .checkbox-grid label
{
  display:inline;
}

The reason is that a previous rule set display:block to all label and input.

These new rules reset behaviour only for this kind of elements children of .checkbox-grid

Upvotes: 2

m4n0
m4n0

Reputation: 32255

Set the display to inline instead of block. Block level elements tend to expand to their 100% width of the parent. inline or inline-block elements will align with their sibling elements.

#dialog-form label, input {
  display: inline;
}

Updated Codepen

Upvotes: 3

Related Questions