hi there, i am confused about how i can create one column with rows for all the children elements:
I thought putting display:flex and flex direction as column in the body and flex direction column in the div (child element) would’ve moved everything into a column format. what am i missing?
<style>
#body {
display: block;
}
#container {
display: block;
}
#title{
display: block;
}
#description{
display: block;
}
#survey-form {
display: block;
}
#role{
display: block;
}
#radio-header {
display: block;
}
#title-referral {
display: block;
}
#text {
display: block;
}
</style>
<html>
<head>
<title>
Survey
</title>
</head>
<body id="body">
<div id="container">
<h1 id="title"></h1>
<p id="description"></p>
<form id="survey-form">
<input type="text" id="name" id="name-label" placeholder="Name" />
<input type="email" id="email" id="email-label" placeholder="email" />
<input
type="number"
id="number"
min="1"
max="100"
id="number-label"
placeholder="age"
/>
<select name="role" id="role">
<option value="">Select a role</option>
<option value="student">Student</option>
<option value="learner">Learner</option>
<option value="retired">Retired</option>
<option value="part time">Part Time</option>
</select>
<h3 id="radio-header">How likely would you recommend xxx?</h3>
<label for="definitely">
<input id="definitely" type="radio" name="confirm" />Definitely
</label>
<label for="maybe">
<input id="maybe" type="radio" name="confirm" />Maybe
</label>
<label for="no">
<input id="no" type="radio" name="confirm" />No
</label>
<h3 id="title-referral">How did you hear about us?</h3>
<label for="Google">
<input id="Google" type="checkbox" name="refer" value="Google" />
Google
</label>
<label for="Friend">
<input
id="Friend"
type="checkbox"
name="personality"
value="Friend"
/>
Friend
</label>
<label for="Other">
<input id="Other" type="checkbox" name="personality" value="Other" />
Other
</label>
<textarea id="text">Please input any other suggestions here</textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
thanks
pjonp
December 3, 2019, 7:41am
2
I like to add background-color: XX for all my CSS/Style and try to put it all together visually.
All the CSS/Style you have, is basically the default value and not needed. Add some colors to things and hopefully you can see what’s happening
hey there thanks. the color actually helped (i didnt think it would haha)
May i ask if you know how to vertically align the bullet points and checkboxes?
(css on the fly - next time i will group things together to save much more time)
<style>
label {
display: block;
font-family: sans-serif;
color: white;
}
#role {
display: block;
text-align: center;
margin: auto;
font-family: sans-serif;
color: #495057;
width: 75%;
font-size: 1rem;
}
#radio-header {
justify-content: center;
text-align: center;
font-family: sans-serif;
color: white;
color: white;
}
.wrap {
display: flex;
align-items: center;
flex-direction: column;
}
#title-referral {
justify-content: center;
text-align: center;
font-family: sans-serif;
color: white;
}
#textarea {
text-align: left;
font-family: sans-serif;
margin-bottom: 15px;
width: 75%;
font-size: 1rem;
}
</style>
<html>
<select name="role" id="role">
<option class="options" value="">Select a role</option>
<option class="options" value="student">Student</option>
<option class="options" value="learner">Learner</option>
<option class="options" value="retired">Retired</option>
<option class="options" value="part time">Part Time</option>
</select>
<h3 id="radio-header">How likely would you recommend xxx?</h3>
<div class="wrap">
<label for="definitely" class="rbuttons">
<input id="definitely" type="radio" name="confirm" />Definitely
</label>
<label for="maybe" class="rbuttons">
<input id="maybe" type="radio" name="confirm" />Maybe
</label>
<label for="no" class="rbuttons">
<input id="no" type="radio" name="confirm" />No
</label>
</div>
<h3 id="title-referral">How did you hear about us?</h3>
<label for="Google">
<input id="Google" type="checkbox" name="refer" value="Google" />
Google
</label>
<label for="Friend">
<input
id="Friend"
type="checkbox"
name="personality"
value="Friend"
/>
Friend
</label>
<label for="Other">
<input id="Other" type="checkbox" name="personality" value="Other" />
Other
</label>
pjonp
December 3, 2019, 9:35am
4
Good work!
Making all the divs/containers colors has helped me learn the best with CSS. I still do it and it looks ugly to start but helps me see whats going on…
Anyways, you have this:
<div class="wrap">
<label>
<input>
</label>
<label>
<input>
</label>
<label>
<input>
</label>
</div>
&
.wrap {
display: flex;
align-items: center;
flex-direction: column;
}
All of your labels are centered. look at the other align-items & justify-content options.
Personally, I’d wrap them all in a new container (green in the image below).
So 3 CSS objects can handle them all:
Red is Center/Center like you already have.
When done this way, you could have 100 questions & 100 options each and all can use the same 3 CSS objects, looking the same.
hi coders. pls this is for my survey form. if i enter a non-number in the html input,i will see an html validation error. pls
lasjorg
December 3, 2019, 12:23pm
6
@ngoclaire Please make your own forum thread for this question, thanks.
hi there,
thanks for this. I wasn’t looking at it this way before! I will look into this later.
haha actually my dad used to work for a big IT company and he was called into the office once for having saved some xls files as xxx.xls xxx1.xls etc. apparently, the automated filter caught him out and he had to explain what these files actually meant
I’m laughing at your 'How likely would you recommend…" in the image above.
