-1

I made a form with some check boxes and the check boxes with their texts are displayed inline:

enter image description here

What I'm trying to do is to display one checkbox with it's text per row so I tried creating a class for all the check boxes and within the CSS, added display: block:

 .checkbox {

          display: block; 

 }

From what I've read, it's better to avoid using br tags all the time in your HTML and attempt to do your styling as much as you can within your CSS.

However, this is what happens:

enter image description here

When trying to search online for this issue, I just get results on how to align multiple check boxes/ fields into the same row.

Here is the HTML:

<p>What would you like to see improved? (Check all that apply)</p>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
    <input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
    <input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
    <input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
    <input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
    <input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
    <input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
    <input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
    <input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
    <input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>
Sebastian Hotoi
  • 13
  • 5
  • 5
    what does your HTML look like? the styling will depend heavily on what you have for your HTML – Jhecht Aug 13 '20 at 07:41
  • can you provide some `HTML` code? – Kirubel Aug 13 '20 at 07:43
  • Does this answer your question? [How to align checkboxes and their labels consistently cross-browsers](https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) – David Nithael Torres Lima Aug 13 '20 at 07:49
  • put every checkbox with the label inside a div. (the div is a block element.) See your wanted result here: https://developer.mozilla.org/de/docs/Web/HTML/Element/Input/checkbox – jasie Aug 13 '20 at 07:51
  • please close ```label``` tag perfectly – Rayees AC Aug 13 '20 at 08:03

3 Answers3

2

Something like this could work, but there other ways

    label {
        display: block;
    }
<label>
    <input type="checkbox" name="" id="">
    Ola3
</label>

<label>
    <input type="checkbox" name="" id="">
    Ola1
</label>

<label>
    <input type="checkbox" name="" id="">
    Ola2
</label>
David Nithael Torres Lima
  • 375
  • 8
1

Put your <input type="checkbox"> and <label> for that checkbox in a <div>.

<div>
    <input type="checkbox" id="first">
    <label for="first">First</label>
</div>

<div>
    <input type="checkbox" id="second">
    <label for="second">Second</label>
</div>

This way you don't need to style you container because <div> has display: block by default.

Edit: mistake on my end pointed out in comments. Added id to inputs.

Marfee
  • 135
  • 6
  • There is a small error in this one. The "for" attribute refers to an input's id, not name. You can avoid attribute linking by putting the input inside the label though, in which case you no longer need the div wrapper – Th3S4mur41 Aug 13 '20 at 07:59
0

Method -1 - using a display:block;

label  {display:block;}
<p>What would you like to see improved? (Check all that apply)</p>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>

Method -2 : using a <br>

<p>What would you like to see improved? (Check all that apply)</p>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
    <br>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>
Rayees AC
  • 4,008
  • 3
  • 6
  • 27
  • Any tips on which is better or the use cases for each? I am trying to take into consideration best practices, code readability, conventions and so on. – Sebastian Hotoi Aug 14 '20 at 07:12