0

Bear with me as I'm not well versed with front end design. How can I get the following checkboxes aligned and stacked neatly as in the picture?

enter image description here

Right now I have them in a row of 9 checkboxes but they're not aligned and are spaced according to the length of the text.

As seen here: JSFiddle

HTML:

<div class="tags">
<div class="col">
<label>
    <input type="checkbox" rel="accounting" />Accounting</label>
<label>
    <input type="checkbox" rel="courier" />Courier</label>
<label>
    <input type="checkbox" rel="project-management" />Project Management</label>
<label>
    <input type="checkbox" rel="video-games" />Video Games</label>
<label>
    <input type="checkbox" rel="dentistry" />Dentistry</label>
<label>
    <input type="checkbox" rel="librarian" />Librarian</label>
<label>
    <input type="checkbox" rel="programmer" />Programmer</label>
<label>
    <input type="checkbox" rel="architect" />Architect</label>
</div>
<div class="col">
<label>
    <input type="checkbox" rel="photographer" />Photographer</label>
<label>
    <input type="checkbox" rel="it" />IT</label>
<label>
    <input type="checkbox" rel="artist" />Artist</label>
<label>
    <input type="checkbox" rel="web-developer" />Web Developer</label>
<label>
    <input type="checkbox" rel="web-designer" />Web Designer</label>
<label>
    <input type="checkbox" rel="neurologist" />Neurologist</label>
<label>
    <input type="checkbox" rel="veterinarian" />Veterinarian</label>
<label>
    <input type="checkbox" rel="teacher" />Teacher</label>
</div>
<div class="col">
<label>
    <input type="checkbox" rel="character-animator" />Character Animator</label>
<label>
    <input type="checkbox" rel="salesman" />Salesman</label>
<label>
    <input type="checkbox" rel="telemarketing" />Telemarketeing</label>
<label>
    <input type="checkbox" rel="construction" />Construction</label>
<label>
    <input type="checkbox" rel="lawyer" />Lawyer</label>
<label>
    <input type="checkbox" rel="actor" />Actor</label>
<label>
    <input type="checkbox" rel="policeman" />Policeman</label>
<label>
    <input type="checkbox" rel="forestry" />Forestry</label>
</div>
</div>
<!-- end tags -->

CSS:

.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
float: left;
}
.col {
width: 100%;
display: block;
margin-right: 10px;
}

label{
vertical-align: top;
float: left;
width: 160px;
}

Edit enter image description here

Kincsem
  • 127
  • 2
  • 11

5 Answers5

3

I'd use a table layout. Simply add the following CSS:

.tags {
    display: table;
}
.col {
    display: table-row;
}
.col label {
    display: table-cell;
}

Updated fiddle: http://jsfiddle.net/5sz6qdos/13/

Others might use flexbox but I have never used it myself, so not sure how to implement that.

I would probably go a different route, however, to make it more semantic and setup to be more flexible:

<ul class="tags">
    <li class="tag"><label>...
    ....<!--put ALL of your label elements in a single parent element-->
</ul>

and

.tag {
    display: block;
    float: left;
    width: 25%; /*for if you want 4 columns, or*/
    width: 120px; /*if you want specific widths*/
}
.tags:after { content: ""; display: table; clear: both; } /*clearfix*/

Using percentages will flex all the columns, or using fixed pixels will allow the elements to flow (my preference).

Phil Tune
  • 3,154
  • 3
  • 24
  • 46
  • I'm gonna friggin' smack whoever is voting down perfectly good answers and not leaving comments. The downvote button is not for if you don't agree with the answer or don't particularly like the method, but rather if it is irrelevant or not useful. – Phil Tune Dec 30 '14 at 21:27
  • This doesn't provide adequate enough styles to be used with OPs JSfiddle. Not sure if I would say 100% as perfectly good answer, but it is a start. – Cayce K Dec 30 '14 at 21:31
  • @CayceK, I understand, but your expectations are wrong. Answers here don't need to replicate the OP's entire code, but they should point out relevant code or concepts to fix the issue. No one here is going to write a completed code set for every question asked, that would be ridiculous and a waste of time. – Phil Tune Dec 30 '14 at 21:39
  • That is true in most cases, but the explanation in itself should support a quick implementation so that the OP can apply the technique quickly without much change. Since the OP provided a fiddle it is more common to practice your code on that and provide it so that you can have a proof of concept. – Cayce K Dec 30 '14 at 21:42
  • 1
    @CayceK, good point. I provided an updated fiddle in my answer. – Phil Tune Dec 30 '14 at 21:42
  • Thanks philtune, I've tried both solutions and the checkboxes still do not line up with the varying lengths of the text. How would I go about setting the line lengths limit for each checkbox as a possible solution? – Kincsem Dec 31 '14 at 03:34
1

first of all change your html code like that:

<input type="checkbox" name="accounting" id="accounting" rel="accounting" />
<label for="accounting">Accounting</label>

Do this for every checkbox.

Then Do the follwoing css

.tags{clear:both}
.col{float:left;width:120px;/*adjust your width */}
.col lable, .col input{display:inline-block;}
.col label{width:120px;/*adjust your width */}
.col input{width:20px;/*adjust your width */}
coderpol
  • 303
  • 3
  • 12
0

So you're kinda having the same problem I mentioned belwo... the text can't be what you're basing off of. You have to set an actual width.

http://jsfiddle.net/tueez7bx/6/

This works, but extends past your limits. You should really consider my other options I provide below.

Also, you can't use ids the way you are. That is incorrect. You'll need to change all the #col to .col.

Second Edit

So based on a comment provided below I have come to realize the goal of what you're trying. Sadly because of the flexibility of text and items you would need to have defined widths for each to line up perfectly. If you don't know what the longest string will be then you will have a problem with risking that string breaking below the words or running into the next checkbox.

You can see that here: http://jsfiddle.net/5sz6qdos/22/

However.. if you extend the width of your container and just have a greater width you will be able to avoid this...

You can see what I am imagining you're asking here: http://jsfiddle.net/5sz6qdos/28/

Before Edit

You're doing well overall...

http://jsfiddle.net/5sz6qdos/3/

.col {
   width: 160px;
   float: left;
   margin-right: 10px;
}

label{
    display: block;
}

This does define a width and doesn't allow for full flexibility. It does however give you the option of going to responsive layouts with this data.

To get the boxes the way you want them you cannot use pure CSS. You will need a mix of Javascript. Checkboxes themselves can not be edited with CSS directly. You will need to hide the checkbox with display: none and add an image for the boxes themselves. Once you have done this you will need to use jQuery to check and uncheck each box. That is the only way to get the exact look.

SO has a lot of answers out there for the jQuery part.

Cayce K
  • 2,288
  • 1
  • 22
  • 35
  • This is misinformation. You do NOT need javascript to achieve the desired results. – Waxi Dec 30 '14 at 21:31
  • @slime I'm going for the box look as well. The only way to do that with CSS is an image. You can't edit a checkbox I explained that. – Cayce K Dec 30 '14 at 21:32
  • That's not true. Checkboxes still function even if you 'hide' their default appearance. With a combination of background-images and padding they will work just fine, with your custom graphic and not require any fancy javascript. – Waxi Dec 30 '14 at 21:37
  • Ok, I've tried this and added in the div for the box that the checkboxes are in and am getting the following: [JSFiddle](http://jsfiddle.net/5sz6qdos/9/) – Kincsem Dec 30 '14 at 21:37
  • @Kincsem because I floated the items you need to add float to your css http://jsfiddle.net/5sz6qdos/10/ – Cayce K Dec 30 '14 at 21:38
  • @slime you are correct they hold their usage and everything, BUT we have to assume since he changed 1 aspect of how the boxes look he will want to change ALL the aspects. Because of that I am leaving my explanation that "fancy" javascript will need to be used to do something like that. Otherwise you cannot have a trigger click event to change the look of the checkbox. – Cayce K Dec 30 '14 at 21:39
  • Alternatively, `position: absolute` on the parent "filter" div will prevent it from collapsing below the columns. Might not want to float it left. – mc01 Dec 30 '14 at 21:45
  • I guess I should of been more clear, I am trying to get 8 checkboxes in a row for each line. (not exactly 3 in a row as in the picture, I'm just trying to get them lined up as you have in your example) – Kincsem Dec 30 '14 at 21:47
  • that is true. I chose float left for quick implementation. Thank you. – Cayce K Dec 30 '14 at 21:47
  • @CayceK, (re: your comment to slime) I really think you're complicating a simple question: `"[my checkboxes are] not aligned and are spaced according to the length of the text."` OP's not asking to imitate the look of the checkboxes. Even if they were, there's still no reason to use Javascript... you can emulate boxes using CSS alone. – Phil Tune Dec 30 '14 at 21:48
  • @Kincsem are you wanting infinite number of rows as long as each row has 8? – Cayce K Dec 30 '14 at 21:50
  • @philtune I say again that the checkboxes part with javascript is only a mention because of the fact that the way the image looks. You are correct that javascript is not required if he doesn't want to touch the checkboxes, but checkboxes alone cannot be edited with CSS to change all aspects. To change all aspects you need to use images which cannot be added to checkboxes default CSS. The javascript allows for the changing of the images that would occur from clicking and displaying the new checkbox. – Cayce K Dec 30 '14 at 21:51
  • Yes, my main problem was aligning the checkboxes as shown in the example but with 8 items per row as I had in my original JSFiddle. In my example I have 8 in a row but the boxes do not line up as they have different text lengths per box. – Kincsem Dec 30 '14 at 21:53
  • @CayceK, not trying to be a jerk, but I made something for you: http://jsfiddle.net/m3s539r5/ CSS-only – Phil Tune Dec 30 '14 at 21:59
  • @philtune .. Bit speechless on that. Can you do anything and everything though? Can you make it a check mark that extends outside of the box and make it pink? This is a serious question that I'm actually trying to learn. – Cayce K Dec 30 '14 at 22:04
  • @Kincsem check the answer out again and let me know if I'm closer / wrong – Cayce K Dec 30 '14 at 22:05
  • There are some CSS-shape wizzes out there who probably could make a checkmark, but I've never been that great at it. Take a look at http://css-tricks.com/examples/ShapesOfCSS/... and this chick is just insane: http://a.singlediv.com/. You could also use SVG shapes, but I've never gotten into that. Lots of no-js solutions. My thought is if it's visual, and you only have to support IE9+, there's almost nothing you can't do with CSS. – Phil Tune Dec 30 '14 at 22:14
  • Ok in this [JSFiddle](http://jsfiddle.net/5sz6qdos/31/) it's all aligned nicely, however in my code there are still alignment issues. See the screenshot at the bottom of my question. – Kincsem Dec 30 '14 at 22:20
  • @Kincsem do you have `text-align:center` any where?? When I add that to the fiddle you just provided it shows exactly what you have. – Cayce K Dec 31 '14 at 13:31
  • I do, I removed this, but still getting mis-aligned boxes, (updated the pic in the question) how do I set the line length to resolve this? – Kincsem Dec 31 '14 at 19:33
  • Where is the jsfiddle? Didn't see it posted. – Kincsem Dec 31 '14 at 19:37
  • oh sorry! asking if you could post one more of what you have with your most updated code so I can touch that instead of trying to get to where you are now. – Cayce K Dec 31 '14 at 19:38
  • Relook at answer. I don't know if the way you're going is oging to be right unless you consider my initial answer. That is probably one of the better options. – Cayce K Dec 31 '14 at 20:05
  • Well all the solutions (including the one in the latest jsfiddle) I've tried still yield the same results that the text length still offsets the alignment of the checkboxes. Just trying to find a way to limit the line length as you suggested and to give it proper spacing so it's all uniform. – Kincsem Dec 31 '14 at 20:26
0

For starters, you're using the label tag wrong. They should not have an input inside them. And how I would do what you're trying to do is something like this:

<div class="col">
    <label>Job</label>
    <input>

    <label>Job</label>
    <input>
</div>

<div class="col">
    <label>Job</label>
    <input>

    <label>Job</label>
    <input>
</div>

Then in your CSS...

.col {
    display: inline-block;
    width: 33.3%;
    vertical-align: top;}

label {
    display: inline-block;
    width: 100px;}

input {
    display: inline-block;
    width: calc(100% - 100px);}

To make sure the columns, labels, and inputs all touch nicely, you have to remove the whitespace. You can either remove it from the code itself, connect elements with comment tags, or set the font-size to 0 on the container. And it wouldn't hurt to throw this in your CSS:

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;}
Waxi
  • 1,641
  • 2
  • 14
  • 20
  • 3
    Umm. It is perfectly valid HTML to wrap a label around its associated control. http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag – bowheart Dec 30 '14 at 21:33
  • Interesting, I did not know that, but I wouldn't recommend that usage. What's the point of having a label if your input is your label? – Waxi Dec 30 '14 at 21:41
  • I totally agree, and I never do it that way. I'm just pointing out that it is perfectly valid. – bowheart Dec 30 '14 at 21:43
  • Bootstrap also needs you to [wrap checkboxes with the label](http://getbootstrap.com/css/#forms) by the way... – Marcel Gwerder Dec 30 '14 at 21:46
  • Hmm, I just go with whatever the design calls for, regarding wrapping/not-wrapping. Though, if you don't wrap, you need to make sure to use `` for accessibility. – Phil Tune Dec 30 '14 at 21:52
  • Semantically it doesn't make sense to wrap inputs in a label tag, because at that point you're just using it as a container, which if that's the case why not use something like a div? Also, wrapping your inputs in a label makes it very hard to style if there is text inside the label. This just seems like bad practice, but can someone explain as to why you would do it like that? – Waxi Dec 30 '14 at 21:56
0

Thanks to all for the knowledge and push in the right direction.

Here is the working solution I found while setting line widths.

JSFiddle

HTML

<div class="filter">
<h3 style="text-align: center;">Blog Profession Filters</h3>
<ul class="checkbox">
    <li>
        <input type="checkbox" id="cb1" rel="accounting" value="accounting" />
        <label for="cb1">Accounting</label>
    </li>
    <li>
        <input type="checkbox" id="cb2" rel="project-management" value="project-management" />
        <label for="cb2">Project Management</label>
    </li>
    <li>
        <input type="checkbox" id="cb3" rel="information technology" value="information-technology" />
        <label for="cb3">Information Technology</label>
    </li>
    <li>
        <input type="checkbox" id="cb4" rel="courier" value="courier" />
        <label for="cb4">Courier</label>
    </li>
    <li>
        <input type="checkbox" id="cb5" rel="video-games" value="video-games" />
        <label for="cb5">Video Games</label>
    </li>
    <li>
        <input type="checkbox" id="cb6" rel="web-development" value="web-development" />
        <label for="cb6>">Web Development</label>
    </li>
    <li>
        <input type="checkbox" id="cb7" rel="veterinarian" value="veterinarian" />
        <label for="cb6>">Veterinarian</label>
    </li>
    <li>
        <input type="checkbox" id="cb8" rel="web-designer" value="web-designer" />
        <label for="cb6>">Web Designer</label>
    </li>
    <li>
        <input type="checkbox" id="cb9" rel="attorney" value="attorney" />
        <label for="cb9>">Attorney</label>
    </li>
    <li>
        <input type="checkbox" id="cb10" rel="medical-practitioner" value="medical-practitioner" />
        <label for="cb10>">Medical Practitioner</label>
    </li>
    <li>
        <input type="checkbox" id="cb11" rel="telemarketing" value="telemarketing" />
        <label for="cb11>">Telemarketing</label>
    </li>
    <li>
        <input type="checkbox" id="cb12" rel="construction" value="construction" />
        <label for="cb12>">Construction</label>
    </li>
</ul>
</div>
<div id="results">
<ul class="results">
    <li class="accounting" style="list-style-type:none"> <a href="" style="text-decoration: none">Accounting</a>

    </li>
    <li class="project-management" style="list-style-type:none"> <a href="{{ path('job3') }}" style="text-decoration: none">Game QA Project Management</a>

    </li>
    <li class="information-technology" style="list-style-type:none"> <a href="" style="text-decoration: none">Information Technology</a>

    </li>
    <li class="courier" style="list-style-type:none"> <a href="{{ path('job1') }}" style="text-decoration: none">Courier / Parcel Delivery</a>

    </li>
    <li class="video-games" style="list-style-type:none"> <a href="" style="text-decoration: none">Video Games</a>

    </li>
    <li class="web-development" style="list-style-type:none"> <a href="" style="text-decoration: none">Web Development</a>

    </li>
    <li class="veterinarian" style="list-style-type:none"> <a href="http://cnn.com" style="text-decoration: none">Veterinarian</a>

    </li>
    <li class="web-designer" style="list-style-type:none"> <a href="" style="text-decoration: none">Wed Designer</a>

    </li>
    <li class="attorney" style="list-style-type:none"> <a href="" style="text-decoration: none">Attorney</a>

    </li>
    <li class="medical-practitioner" style="list-style-type:none"> <a href="" style="text-decoration: none">Medical Practitioner</a>

    </li>
    <li class="telemarketing" style="list-style-type:none"> <a href="" style="text-decoration: none">Telemarketing</a>

    </li>
    <li class="construction" style="list-style-type:none"> <a href="" style="text-decoration: none">Construction</a>

    </li>
</ul>
</div>

CSS

.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}
ul.checkbox {
margin: 0;
padding: 0;
margin-left: 20px;
list-style: none;
}
ul.checkbox li input {
margin-right: .25em;
}
ul.checkbox li {
border: 1px transparent solid;
display:inline-block;
width:12em;
}
ul.checkbox li label {
margin-left:;
}
ul.checkbox li:hover, ul.checkbox li.focus {
background-color: lightyellow;
border: 1px gray solid;
width: 12em;
}
.results {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}
Kincsem
  • 127
  • 2
  • 11