htmlcsscheckboxradio-button
Checkbox list to a new line
I want to move the list of my choices in the checkbox to a new line without exceeding 100% of the form.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<legend class="form-label">Votre profession<i class="note-form">*</i></legend>
<div class="form-check-inline" id="profession_emprunteur">
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_0" name="profession_emprunteur" required="required" type="radio" value="employe"/>
<label class="form-check-label required font-normal label-special" for="profession_emprunteur_0">Employé</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_1" name="profession_emprunteur" required="required" type="radio" value="fonctionnaire"/>
<label class="form-check-label required font-normal label-special" for="profession_emprunteur_1">Fonctionnaire</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_2" name="profession_emprunteur" required="required" type="radio" value="cadre"/>
<label class="form-check-label required font-normal label-special" for="profession_emprunteur_2">Cadre</label>
</div>
.....
</div>
</div>
</div>
</div>
Thenk's
Solution
Change the display to the element of id profession_emprunteur and add the property float:left to the choices, so they will be displayed beside each other, but when the line is full the next ones will be displayed on the next line etc.
<html lang="fr">
<head>
<title>Form</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.form-lite {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 5px 5px 5px 5px;
border-width: 1px 1px 1px 1px;
background-color: #fcfcfc;
border-style: solid;
border-color: #979797;
margin-top: 50px;
padding: 50px 50px 30px 50px;
color: #1b1e21;
}
.note-form {
color: #e37d5a;
font-size: 14px;
font-weight: 900;
}
.radio-special {
visibility: hidden;
height: 0;
width: 0;
}
.radio-special:active + label,
.radio-special:checked + label {
background-color: #292780;
color: #fff;
box-shadow: none;
}
.form-label {
font-weight: bold;
margin-top: 18px;
margin-bottom: 5px;
color: #292780;
}
.label-special {
vertical-align: middle;
text-align: center;
cursor: pointer;
background-color: #fff;
color: #292780;
padding: 5px 10px;
margin-right: 0;
margin-left: 5px;
border: solid 1px #292780;
border-radius: 3px;
white-space: nowrap;
}
.label-special:hover {
background-color: #4ba0e5;
color: #fff;
border: solid 1px #4b92e4;
}
.form-check-inline#profession_emprunteur {
display: inherit;
}
.form-check-inline#profession_emprunteur .form-check {
float: left;
margin-bottom: 0.2em;
}
</style>
</head>
<body>
<main class="main-content">
<section class="section">
<div class="container">
<div class="row">
<div class="col-md-8 offset-2">
<form class="form-lite input-round" method="post">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<legend class="form-label">Votre profession<i class="note-form">*</i></legend>
<div class="form-check-inline" id="profession_emprunteur">
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_0"
name="profession_emprunteur" required="required" type="radio"
value="employe"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_0">Employé</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_1"
name="profession_emprunteur" required="required" type="radio"
value="fonctionnaire"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_1">Fonctionnaire</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_2"
name="profession_emprunteur" required="required" type="radio"
value="cadre"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_2">Cadre</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_3"
name="profession_emprunteur" required="required" type="radio"
value="retraite"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_3">Retraité</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_4"
name="profession_emprunteur" required="required" type="radio"
value="profession-liberale"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_4">Profession libérale</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_5"
name="profession_emprunteur" required="required" type="radio"
value="enseignant"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_5">Enseignant</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_6"
name="profession_emprunteur" required="required" type="radio"
value="artisan"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_6">Artisan</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_7"
name="profession_emprunteur" required="required" type="radio"
value="commercant"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_7">Commerçant</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_8"
name="profession_emprunteur" required="required" type="radio"
value="chef-entreprise"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_8">Chef d'entreprise</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_9"
name="profession_emprunteur" required="required" type="radio"
value="etudiant"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_9">Etudiant</label>
</div>
<div class="form-check">
<input class="radio-special form-check-input" id="profession_emprunteur_10"
name="profession_emprunteur" required="required" type="radio"
value="agriculteur"/>
<label class="form-check-label required font-normal label-special"
for="profession_emprunteur_10">Agriculteur</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
</body>
</html>- Set the background color of the entire webpage (the browser's window)
- HTML/CSS Flip Card Works on Desktop but not Mobile
- Javascript onload and onunload
- How to adjust kerning for the unicode flat symbol
- jQuery button click not showing/hiding content
- Force div to have an even width and height?
- How to set min width on content but still never exceed parent container width
- How to download older versions of Chrome from a google official site
- 2 colors in one placeholder of input field
- How can I align my Bootstrap container to fit the full width of the webpage?
- HTML+CSS A4 page with automatic page breaks
- How do I use the reverse border radius at the top of a card? (CSS)
- Pagination where the number of pages is automatically discovered from a specific folder on the server
- stop iframe from affecting load times
- Is there a simple way to make a HTML relational selection?
- Disable double-tap "zoom" option in browser on touch devices
- Resize image with javascript canvas (smoothly)
- How to redirect to new page when image is clicked? (html)
- I want to change the url in the base url but by removing the %20 character in the url
- Title tag is not working
- How to render raw html in the PyHTML library
- Line break in HTML with '\n'
- How to achieve a CSS footer "curtain" effect?
- How To Serve Image Size Based on Container, Not Screen Size
- Set the default value of an input field
- How to allow only English letters in input fields?
- ASCII 3D Text looks glitchy when used for a HTML Website
- How to style HTML5 audio tag?
- table with sticky header and horizontal scroll
- move words into a specific area