I am trying to get my checkboxes to set up like the image below, but they on top of eachother.
http://puu.sh/cbYli/530825d9e3.png
I have looked and evrything I have tried isnt working. Any help would be appreciated.
I am trying to get my checkboxes to set up like the image below, but they on top of eachother.
http://puu.sh/cbYli/530825d9e3.png
I have looked and evrything I have tried isnt working. Any help would be appreciated.
We need code to look at. A live site would be preferable. It’s easier to do this if we aren’t in the dark
An example of your code could be something like
<label for="whatever"><input type="checkbox" name="whatever"> Palletizer</label>
Style as desired
One of many ways to do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.checkbox input,.checkbox label{
display:inline-block;
vertical-align:middle;
}
.checkbox label{margin-right:20px;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<div class="checkbox">
<input type="checkbox" name="palletizer" id="p1">
<label for="p1">Palletizer</label>
<input type="checkbox" name="palletizer" id="p2">
<label for="p2">Palletizer2</label>
<input type="checkbox" name="palletizer" id="p3">
<label for="p3">Palletizer3</label>
</div>
</form>
</body>
</html>
Sorry guys, I didnt get an email notification that there was a reply.
Right now I am using
HTML
<div class="form-group">
<label class="col-md-3">Interested in</label>
<div class="col-md-7">
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<br>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" > <span>Palletizer</span></label>
<br>
</div> <!-- /.col -->
</div> <!-- /.form-group -->
CSS
label{display:inline-block;margin-bottom:5px;}
label.cats {font-weight: normal;}
Paul, I tried your code and I am getting only a checkbox in front of the first option.
http://puu.sh/cde3Y/59deae0dc7.png
I used your exact code.
Works for me
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
label{display:inline-block;margin-bottom:5px;}
label.cats {font-weight: normal;}
</style>
<title> John_Betong - 002</title>
</head>
<body>
<div class="form-group">
<label class="col-md-3">Interested in</label>
<div class="col-md-7">
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<br>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" > <span>Palletizer</span></label>
<br>
</div> <!-- /.col -->
</div> <!-- /.form-group -->
</body>
</html>
You probably just don’t have enough room. There isn’t enough to replicate. I need a full example.
Would you mind if I PM’d you my skype. I must be missing the smallest thing because I have tried making the area bigger and all and I cant get it going.
I’m at work. Not possible. Is giving a link not possible? It would take a minute.
I knew it was something simple. I went in reverse and took out all the css and I figured out the issue. It was a main div that was putting the < label > in a block instead of inline.
I appreciate everyones help on this.
I will say though, I thought that any css that was on the page overwrote what is in the css file.
I also emailed you that fix …
You might want to look at the other CSS I gave you.
Then you did not use my exact code
Here’s a codepen of my exact code showing it working everywhere.
This is a much neater way of laying out the checkboxes than your slightly convoluted version using a non semantic span for the label. It is also better for accessibility to associate labels with their form controls as in my example.