Tell us what’s happening:
Check-box elements:
I could not find a way to place them there without locking them into block type where the text would always go underneath.
Your code so far
body {
background-color: #1b1b32;
color: #f5f6f7;
font-family: Poppins;
font-size: 1rem;
border: none;
padding: 2rem;
}
fieldset {
text-align: center;
padding: 0;
}
form {
margin: 20 70 30 70;
background-color: rgba(211, 211, 211, 0.1);
padding: 1rem;
}
div {
margin-top: 2rem;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input[type="radio"] {
vertical-align: middle;
margin: 0 0.5em 0 0;
width: 18;
}
input[type="submit"] {
display: block;
border-color: green;
width: 60%;
margin: 2em auto;
height: 2em;
font-size: 1.1rem;
min-width: 300px;
background-color: green;
color: white;
}
input[type="checkbox"] {
display: block;
}
Then make sure they are before the text in the HTML. We really need to see your HTML in order to help you better.
Sorry I could not edit my original text and putting it down here as a full code, does not work. I had to remove last parts (>) so the whole code would be seen.
My apologies, it does not look tidy nor easy to read, i guess.
…
<div for="improvement" What would you like to see improved? (Check all that apply)</div
<label for="front-end" <input value="front-end" type="checkbox" name="front-end" class="inline" / Front-end Projects</label
<label for="back-end" <input value="back-end" type="checkbox" name="back-end" class="inline" / Back-end Projects</label
...
Not sure how/ where else i can put the text so it’d be on the opposite side
Sorry, I’m not seeing your HTML.
I guess a picture would be easier in this case:
No, actual code pasted in here is easier. I don’t feel like retyping everything in that pic
To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.
<label for="front-end"><input value="front-end" type="checkbox" name="front-end" class="inline" /> Front-end Projects</label>
<label for="back-end"><input value="back-end" type="checkbox" name="back-end" class="inline" /> Back-end Projects</label>
I would reconsider adding a width of 100% to these checkbox inputs.
And there really is no reason to be giving them a display of block if you want them to be on the same line as the text. A block display forces a hard return after the element.
Yeah, I removed the display property and added width but sadly it did not fix it
Djeyhoun:
and added width
You don’t want to add a width to the checkboxes.
Ah okay… I missed the other input property having width as well.
Yes, now the boxes are on the left side!
E.g. Checkbox - Text
instead of
Checkbox - Text Checkbox - Text Checkbox - Text
Yes. You might want to play around with the display property on the element that contains both the input and its text.
Yeah i have been trying but the ones that work keep getting the text at the bottom…
You’ll have to show us what you have tried. We can’t help unless we can see what you are doing.
This is my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>freeCodeCamp Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<fieldset>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description"> <em>Thank you for taking the time to help us improve the platform.</em>
</p>
</fieldset>
<form id="survey-form">
<label for="name" id="name-label">Name <input id="name" name="name" type="text" required placeholder="Enter your name"/></label>
<label for="email" id="email-label">Email <input id="email" name="email" type="email" required placeholder="Enter your Email"/></label>
<label for="age" id="number-label">Age <input id="number" name="age" required placeholder="Age" type="number" min="13" max="100"/></label>
<label for="current-role">Which option best describes your current role?
<select id="dropdown" name="current-role">
<option value="">Select current role</option>
<option value="1">Student</option>
<option value="2">Full Time Job</option>
<option value="3">Full Time Learner</option>
<option value="4">Prefer not to say</option>
<option value="5">Other</option>
</select>
</label>
<div for="recommendation">Would you recommend freeCodeCamp to a friend?</div>
<label for="definitely">
<input id="definitely" type="radio" name="recommendation" class="inline" value="1"/>Definitely</label>
<label for="maybe">
<input id="maybe" type="radio" name="recommendation" class="inline" value="2"/>Maybe</label>
<label for="not-sure">
<input id="not-sure" type="radio" name="recommendation" class="inline" value="3"/>Not sure</label>
<div for="favourite-feature">What is your favourite feature of freeCodeCamp?</div>
<select id="favourite-feature" name="favourite-feature">
<option value="">Select an option</option>
<option value="1">Challenges</option>
<option value="2">Projects</option>
<option value="3">Community</option>
<option value="4"> Open Source</option>
</select>
<div for="improvement">What would you like to see improved? (Check all that apply)</div>
<label for="front-end"><input value="front-end" type="checkbox" name="front-end" class="inline" /> Front-end Projects</label>
<label for="back-end"><input value="back-end" type="checkbox" name="back-end" class="inline" /> Back-end Projects</label>
<label for="visualization"><input value="visualization" type="checkbox" name="visualization" class="inline" /> Data Visualization</label>
<label for="challenges"><input value="challenges" type="checkbox" name="challenges" class="inline" /> Challenges</label>
<label for="community"><input value="community" type="checkbox" name="community" class="inline" /> Open Source Community</label>
<label for="help-rooms"><input value="help-rooms" type="checkbox" name="help-rooms" class="inline" /> Gitter help rooms</label>
<label for="videos"><input value="videos" type="checkbox" name="videos" class="inline" /> Videos</label>
<label for="meetups"><input value="meetups" type="checkbox" name="meetups" class="inline" /> City Meetups</label>
<label for="wiki"><input value="wiki" type="checkbox" name="wiki" class="inline" /> Wiki</label>
<label for="forum"><input value="forum" type="checkbox" name="forum" class="inline" /> Forum</label>
<label for="additional"><input value="additional" type="checkbox" name="additional" class="inline" /> Additional Courses</label>
<div for="comments">Any comments or suggestions?
<textarea id="comments" name="comments" rows="5" cols="30" placeholder="Enter your comment here..."></textarea>
</div>
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
body {
background-color: #1b1b32;
color: #f5f6f7;
font-family: Poppins;
font-size: 1rem;
border: none;
padding: 2rem;
}
fieldset {
text-align: center;
padding: 0;
}
form {
margin: 20 70 30 70;
background-color: rgba(211, 211, 211, 0.1);
padding: 1rem;
}
div {
margin-top: 2rem;
}
input,
textarea,
select {
margin: 10px 0 0 0;
min-height: 2em;
}
input[type="radio"] {
vertical-align: middle;
margin: 0 0.5em 0 0;
width: 18;
}
input[type="checkbox"] {
display: block;
}
input[type="submit"] {
display: block;
border-color: green;
width: 60%;
margin: 2em auto;
height: 2em;
font-size: 1.1rem;
min-width: 300px;
background-color: green;
color: white;
}
Remove display: block from the checkbox selector and put it on a label selector instead (all or targeted to specific labels).
Add the checkbox element to the selector where you are setting vertical-align on the radio buttons (so it is a selector list with both element types).
1 Like
Yess, that was it! Thank you lasjorg!
and you too bbsmooth!
system
January 12, 2024, 8:09pm
18
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
