logo
down
shadow

Checkboxes aligned in a row


Checkboxes aligned in a row

By : user2955035
Date : November 22 2020, 10:33 AM
Any of those help to all for the knowledge and push in the right direction.
Here is the working solution I found while setting line widths.
code :
<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>
.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;
}


Share : facebook icon twitter icon
Getting checkboxes + labels aligned correctly in form

Getting checkboxes + labels aligned correctly in form


By : cyx32524
Date : March 29 2020, 07:55 AM
I hope this helps . How about something like this?
jsfiddle
Checkboxes and text not aligned

Checkboxes and text not aligned


By : Asif
Date : March 29 2020, 07:55 AM
like below fixes the issue Wrap both the checkbox and the text in the same div element. Then you have a few options.
I'd also recommend styling with CSS instead of style= tags.
code :
<div class="option">
    <input class="chkbox" id="chkOption1" type="checkbox" name="chkOption1" />
    <div class="text">
        <div class="head">Option 1</div> - Attend in person. This is the best way to gain critical knowledge and express your thoughts and opinions.  Ample time will be provided for individual discussions during breaks and at the networking reception. 
    </div>
</div>
.option{
    float: left;
    display: block;
}

.chkbox{
    margin-right: 10px;
    float: left;
}

.text{
    float: float;
}

.head{
    text-decoration: underline;
    font-weight: bold;
    float: left;
}
bootstrap form label not aligned with checkboxes

bootstrap form label not aligned with checkboxes


By : user3115351
Date : March 29 2020, 07:55 AM
this one helps. Remove "col-sm-offset-3" from div. You are already giving col-sm-3 for label.
code :
<div class="form-group">
    <label class="col-sm-3 text-right">Office(s)*</label>
    <div class="col-sm-8 checkbox" id="offices">
        <label>
            <input type="checkbox" id="inlineCheckbox1" value="0">Office 1</label>
        <label>
            <input type="checkbox" id="inlineCheckbox2" value="1">Office 2</label>
        <label>
            <input type="checkbox" id="inlineCheckbox3" value="2">Office 3</label>
        <label>
            <input type="checkbox" id="inlineCheckbox4" value="3">Office 4</label>
        <label>
            <input type="checkbox" id="inlineCheckbox5" value="4">Office 5</label>
    </div>
</div>
How to get checkboxes verticaly aligned with other input fields

How to get checkboxes verticaly aligned with other input fields


By : Adam Poit
Date : March 29 2020, 07:55 AM
will help you Solved. Changed EditorFor to CheckBoxFor, put a label around it, set padding-left to 15.
Bootstrap checkboxes not getting aligned in form

Bootstrap checkboxes not getting aligned in form


By : timooun
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Check out this. The checkbox in this sign in form is awkwardly misplaced. Here is my views/devise/new.html.erb: , Strucutre of bootstrap checkboxes should look like bellow:
Related Posts Related Posts :
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org