Working on a project right now creating a bet page that I just can't get to format properly. I have tried encasing everything in its own div and putting those elements into a flex-container but when I do, everything seems to get thrown on-top of each other.
Im currently trying to get everything between the breaks into their own rows with 4 separate columns.
Any insight as to what I should look into using to get this formatted properly?
It is probably worth nothing that any JS is a little out of the scope of this project.
<!DOCTYPE html>
<html>
<style>
#chuckPage
{
margin:auto;
height: 50%;
width: 50%;
overflow: auto;
background-color: white;
padding: 25px;
border: 5px solid #ac5353;
text-align: center;
}
body
{
background-color: #59a659;
}
</style>
<head>
<meta charset="ISO-8859-1">
<title>Chuck-A-Luck</title>
</head>
<body>
<div id="chuckPage">
<h1>Choose your bets!</h1>
<h2>Current Purse: $1,000.00</h2>
<form action="Die" method="post">
<input type="checkbox" name="singleDie"> Single
<label>Die Select </label>
<select name="dieSelect">
<option value ="1">1</option>
<option value ='2'>2</option>
<option value ='3'>3</option>
<option value ='4'>4</option>
<option value ='5'>5</option>
<option value ='6'>6</option>
</select>
<input type="number" name="singleBetAmt" value="0" min="0" max="1000.0">
<p>1 Correct Die, 1:1, 2 Correct Dice, 2:1, 3 Correct Dice, 12:1</p>
<br><br>
<input type="checkbox" name="tripleDie"> Triple
<p>Any of the triples</p>
<input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
<p>30:1</p>
<br><br>
<input type="checkbox" name="bigDie"> Big
<p>Sum of dice is 11 or higher (Doesn't work on triples)</p>
<input type="number" name="bigBetAmt" value="0" min="0" max="1000.0">
<p>1:1</p>
<br><br>
<input type="checkbox" name="smallDie"> Small
<p>Sum of dice is 10 or lower (Doesn't work on triples)</p>
<input type="number" name="smallBetAmt" value="0" min="0" max="1000.0">
<p>1:1</p>
<br><br>
<input type="checkbox" name="fieldDie"> Field
<p>Sum of dice is outside of or 8 and 12</p>
<input type="number" name="fieldBetAmt" value="0" min="0" max="1000.0">
<p>1:1</p>
<br><br>
<input type = "submit" name="sendData" value="Place Your Bet!">
</form>
</div>
</body>
</html>
Here is an example I was given to work towards.
Click me to see the example i was given
Tables are definitely a viable way to go—but let's consider flexbox. With a little tweaking in the HTML, we can create rows and columns and add responsiveness. Adding responsiveness with tables is possible, but not a pleasant developer experience.
In the following example, I set up the flex row columns to assume 25% of available row space. When the screen is smaller than 750px, there's no room for 4 columns of data and I change the column width to 50%.
Make sure to test in Full page mode.
#chuckPage {
margin: auto;
height: 50%;
overflow: auto;
background-color: white;
padding: 25px;
border: 5px solid #ac5353;
text-align: center;
}
body {
background-color: #59a659;
}
form[action="Die"] {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
form[action="Die"] .row {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 2px solid gray;
}
form[action="Die"] .col {
flex-basis: 25%;
text-align: left;
}
#media screen and (max-width: 750px) {
form[action="Die"] .col {
flex-basis: 50%;
}
}
<div id="chuckPage">
<h1>Choose your bets!</h1>
<h2>Current Purse: $1,000.00</h2>
<form action="Die" method="post">
<div class="row">
<div class="col">
<input type="checkbox" name="singleDie"> Single
<label>Die Select </label>
</div>
<div class="col">
<select name="dieSelect">
<option value="1">1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
</div>
<div class="col">
<input type="number" name="singleBetAmt" value="0" min="0" max="1000.0">
</div>
<div class="col">
<p>1 Correct Die, 1:1, 2 Correct Dice, 2:1, 3 Correct Dice, 12:1</p>
<br><br>
</div>
</div>
<div class="row">
<div class="col">
<input type="checkbox" name="tripleDie"> Triple
</div>
<div class="col">
<p>Any of the triples</p>
</div>
<div class="col">
<input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
</div>
<div class="col">
<p>30:1</p>
<br><br>
</div>
</div>
<div class="row">
<div class="col">
<input type="checkbox" name="tripleDie"> Triple
</div>
<div class="col">
<p>Any of the triples</p>
</div>
<div class="col">
<input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
</div>
<div class="col">
<p>30:1</p>
<br><br>
</div>
</div>
<div class="row">
<div class="col">
<input type="checkbox" name="tripleDie"> Triple
</div>
<div class="col">
<p>Any of the triples</p>
</div>
<div class="col">
<input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
</div>
<div class="col">
<p>30:1</p>
<br><br>
</div>
</div>
<div class="row">
<div class="col">
<input type="checkbox" name="tripleDie"> Triple
</div>
<div class="col">
<p>Any of the triples</p>
</div>
<div class="col">
<input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
</div>
<div class="col">
<p>30:1</p>
<br><br>
</div>
</div>
</form>
</div>
If you want the result page to look same as the sample image, you can explore Table tag and specify every item in rows and columns of the table respectively.
Hope this helps!!
Related
I have 3 rows with 2 columns in each row on my HTML page with some labels and inputs.
I see a lot of space between the rows which I tried removing but didn't work. Is there a way to do it?
Here's the HTML Code :
<div >
<h1>
New Patient Record
</h1>
</div>
<div class="row" style="padding-bottom: 0px;">
<div class="column"></div>
<div class="column">
<label > <strong>Date</strong> </label>
<input type="date" name="date" id="date" class="form-control" [(ngModel)]="institutes.date">
</div>
</div>
<div class="row" style="padding-top:0px" >
<div class="container" style="padding-left: 7.5%" >
<form #institutesForm="ngForm" (ngSubmit)="instituteLogins(institutesForm)">
<div class="form-group">
<div class="row">
<div class="column">
<h2><strong> Symptoms</strong> </h2>
<input type="text" name="symtoms" id="symtoms" class="form-control"[(ngModel)]="institutes.symtoms">
<br>
<h2><strong>Diagnosis</strong></h2>
<label> <strong>Condition</strong> </label>
<input type="text" name="condition" id="condition" class="form-control"[(ngModel)]="institutes.condition">
<label><strong> Advice </strong></label>
<input type="text" name="advice" id="advice" class="form-control"[(ngModel)]="institutes.advice">
<br>
</div>
<div class="column">
<h2> <strong>Prescription</strong> </h2>
<br>
<label><strong> Medication </strong></label>
<input type="text" name="medication" id="medication" class="form-control"[(ngModel)]="institutes.medication">
<label><strong> Medicine Type </strong></label>
<input type="text" name="type" id="type" class="form-control"[(ngModel)]="institutes.type">
<label><strong>Course</strong></label>
<input type="text" id="course" name="course" class="form-control"[(ngModel)]="institutes.course">
<label><strong> How many per day? </strong></label>
<input type="text" name="cday" id="cday" class="form-control"[(ngModel)]="institutes.cday">
<br>
</div>
<div class="row">
<div class="column"></div>
<div class="column">
<button id="record" class="btn btn-primary" type="submit" >Add Record</button>
</div>
</div>
</div>
<br><br>
</div>
</form>
</div>
Here's what all I tried: I tried to adjust row spacing using margins, and padding but none of them worked. Is there any other alternative for this?
.modal-dialog.cascading-modal.modal-avatar .modal-header img {
width: 130px;
margin-left: auto;
margin-right: auto;
}
.modal-dialog.cascading-modal.modal-avatar .modal-header {
margin: -6rem 2rem -1rem 2rem;
}
.More{
color: blue;
margin-right: 100px;
}
.column{
margin : 100px;
}
.row{
margin:0;
padding:0;
align-items: baseline;
}
Changing:
.column{
margin: 100px;
}
To
.column{
margin-left : 100px;
margin-right: 100px;
}
Will remove the space between the rows. Is that the end result you're looking for?
Adjusting the margin-left helped me solve the issue.
Also using to add number of empty spaces vertically solved my UI design issues.
For the space between both rows, you can add the padding-bottom
style="margin-top:-50px"
I'm trying to find a way to line up the input boxes for Name, Email, Age. The boxes are lined up for name and email. However, how do I change the width or margin to line up the input box to match that of name and email.
Also, how do I make the option value box bigger that accompany "Which option best describes your current role" label?
I have tried to adjust the width, margin to try to get the box to line up to email/age however it does not work. It seems that when I do margin-left it moves the label further away from the input box.
#Title{
text-align: center;
}
#description{
text-align: center;
}
body{
background-color: #a9d7d1;
margin: 50px 200px 20px 200px;
}
#Survey-form{
background-color: #f0f0f0;
text-align: center;
}
#Name{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
#Email{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
#Age{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
label[for=role]{
margin-left: -345px;
width: 40px;
select required {
width: 450px;
margin: 10px;
}
div{
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<link href="SurveyForm.css" rel=stylesheet>
</head>
<body>
<h1 id="Title"> Survey Form </h1>
<form id="Survey-form">
<p id="description">Let us know how we can improve freeCodeCamp </p>
<!-- <p> -->
<div>
<br /> <label>Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name">
</div>
<div>
<br /> <label>Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email"><br>
</div>
<div>
<br /> <label> Age:</label>
<input type="number" min = "18" max="110" name="Age" id="Age" placeholder="Age">
</div>
<div>
<br /> <label for="role">Which option best describes your current role?</label>
<select required>
<option value="selected disabled">Select an option </option>
<option value="Student">Student</option>
<option value="FullTimeJob">Full Time Job</option>
<option value="FullTimeLearner">Full Time Learner</option>
<option value="NotToSay">Prefer Not to Say</option>
<option value="Other">Other</option>
</select>
</div>
<p>How likely is that you would recommend
<br>freeCodeCamp to a friend?
<br><input type="radio" name="recommend" class="recommend" value="Definetly"> Definetly
<br> <input type="radio" name="recommend" class="recommend" value="Maybe"> Maybe
<br> <input type="radio" name="recommend" class="recommend" value="NotSure"> Not Sure
<p> <label for="FCC">What do you like most in FCC: </label>
<select required>
<option value="selected disabled">Select an option </option>
<option value="Challenges">Challenges</option>
<option value="Projects">Projects</option>
<option value="Community">Community</option>
<option value="Open Source">Open Source</option>
</select>
<p>Things that should be improved in the future.<br />(Check all that apply):
<br /> Front-end Projects: <input type="checkbox" name="sports" value="Front-end Projects">
<br /> Back-end Projects: <input type="checkbox" name="sports" value="Back-end Projects" >
<br /> Challenges: <input type="checkbox" name="sports" value="Challenges">
<br /> Open Source Community: <input type="checkbox" name="sports" value="Open Source Community">
<br /> Gitter help rooms: <input type="checkbox" name="sports" value="Gitter help rooms" >
<br /> Videos: <input type="checkbox" name="sports" value="Videos" >
<br /> City Meetups: <input type="checkbox" name="sports" value="City Meetups" >
<br /> Wiki: <input type="checkbox" name="sports" value="Wiki" >
<br /> Forum: <input type="checkbox" name="sports" value="Forum" >
<br /> Additional Courses: <input type="checkbox" name="sports" value="Additional Courses" >
<p>
Any Comments or Suggestions?
<textarea rows="4" cols="44" name="comment" form="usrform">
Enter your comment here...</textarea>
</p><input type="submit" value="Submit">
</form>
</body>
</html>
The boxes should line up and I want to make the select an option box bigger for the label Which option best describes your current role?
Here you go, Wrap your input elements using wrapper .row then divide into two columns .right, .left set relevent widths accordingly and use display: inline-block; to create grid.
You can use ul to create radio and checkbox list like I did below and get rid of <br/>
.form {
max-width: 900px;
width: 75%;
padding: 10px;
background: #fff;
}
div.row {
display: block;
margin-bottom: 10px;
}
div.right {
width: 45%;
display: inline-block;
text-align: left;
vertical-align: middle;
}
div.left {
width: 30%;
display: inline-block;
text-align: right;
vertical-align: top;
}
.input-list {
display: block;
list-style: none;
padding: 0;
}
.radio-li, .checkbox-li {
display: block;
padding-bottom: 10px;
}
.radio, .checkbox {
float: left;
margin-right: 5px;
background: #000;
}
<div class="row">
<div class="left">
<label>Name:</label>
</div>
<div class="right">
<input type="text" name="name" class="input" placeholder="Enter your name">
</div>
</div>
<div class="row">
<div class="left">
<label for="role">Which option best describes your current role?</label>
</div>
<div class="right">
<select>
<option value="selected disabled">Select an option </option>
<option value="Student">Student</option>
<option value="FullTimeJob">Full Time Job</option>
<option value="FullTimeLearner">Full Time Learner</option>
<option value="NotToSay">Prefer Not to Say</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<label for="role">How likely is that you would recommend freeCodeCamp to a friend?</label>
</div>
<div class="right">
<ul class="input-list">
<li class="radio-li"><label>Definetly<input type="radio" name="recommend" class="recommend radio" value="Definetly"></label></li>
<li class="radio-li"><label>Maybe <input type="radio" name="recommend" class="recommend radio" value="Maybe"></label></li>
<li class="radio-li"><label>Not Sure <input type="radio" name="recommend" class="recommend radio" value="NotSure"></label></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">
<label for="role">Things that should be improved in the future.(Check all that apply):</label>
</div>
<div class="right">
<ul class="input-list">
<li class="checkbox-li"><label>Front-end Projects: <input type="checkbox" name="sports" class="checkbox" value="Front-end Projects"></label></li>
<li class="checkbox-li"><label>Back-end Projects: <input type="checkbox" name="sports" class="checkbox" value="Back-end Projects" ></li>
<li class="checkbox-li"><label>Challenges: <input type="checkbox" name="sports" class="checkbox" value="Challenges"></label></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">
<label for="role"> Any Comments or Suggestions?</label>
</div>
<div class="right">
<textarea rows="4" cols="30" name="comment" form="usrform">Enter your comment here...</textarea>
</div>
</div>
I am trying to design the following form where there will be 2 column. Each column can have any number of form field like left column can have only one form field and right column can have also one form field only or left column can have two form field and right column can have three form field and vice versa.
The way i am doing does not separates two columns. Here is what i have done
Here is what i tried using flex
.row {
display: flex;
}
.input-wrapper {
flex: 1;
padding-left: 15px;
}
<div class="row">
<div class="input-wrapper">
<label>Additional Space</label>
<select>
<option>hello</option>
</select>
</div>
<div class="input-wrapper">
<label>Size</label>
<input type="text" placeholder="length" />
</div>
<div class="input-wrapper">
<label></label>
<input type="text" placeholder="width" />
</div>
<div class="input-wrapper">
<label></label>
<select>
<option>hello</option>
</select>
</div>
</div>
<br/><br/><br/><br/><br/>
<div class="row">
<div class="input-wrapper">
<label>Additional Space</label>
<select>
<option>hello</option>
</select>
</div>
<div class="input-wrapper">
<label>Size</label>
<input type="text" placeholder="length" />
</div>
</div>
Here is the design
First, you need to set width: 100% to the input type you want to span. In your layout, the container already takes the full width.
You should also use display:flex on your input-wrapper and set
flex-direction: column;
justify-content: flex-end;
In order for the text to be shown first and the inputs on the second line.
.row {
display: flex;
}
.input-wrapper {
flex: 1;
padding-left: 15px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
select{
width: 100%;
}
select, input{
border: 1px solid #e1e1e1;
padding: 6px;
border-radius: 3px;
}
label{
font-size: 14px;
color: #d1d1d1;
margin-bottom: 4px;
}
<div class="row">
<div class="input-wrapper">
<label>Additional Space</label>
<select>
<option>hello</option>
</select>
</div>
<div class="input-wrapper">
<label>Size</label>
<input type="text" placeholder="length" />
</div>
<div class="input-wrapper">
<label></label>
<input type="text" placeholder="width" />
</div>
<div class="input-wrapper">
<label></label>
<select>
<option>hello</option>
</select>
</div>
</div>
<br/><br/><br/><br/><br/>
<div class="row">
<div class="input-wrapper">
<label>Additional Space</label>
<select>
<option>hello</option>
</select>
</div>
<div class="input-wrapper">
<label>Size</label>
<input type="text" placeholder="length" />
</div>
</div>
can anyone please give me an example of fixed px size and what is the use of it.
and also can u please help me wrapping those input and labels inside a div element and making the box different sizes
<label for="Year">Year :</label>
<input type="text" id="Year" name="year" placeholder="(YYYY)">
<label for="LicencePlate">Licence Plate:</label>
<input type="text" id="LicencePlate" name="licencePlate" placeholder="LicencePlate">
<label for="DateBooked">Date Booked:</label>
<input type="text" id="DateBooked" name="dateBooked" placeholder="24/10/2017">
<label for="TimeBooked">Time Booked:</label>
<input type="text" id="TimeBooked" name="timeBooked" placeholder="14:00">
#container .subcontainer .label{
display:inline-block;
width:100px
}
#container .subcontainer .input{
display:inline-block;
width:200px;
}
#container .subcontainer{
padding:5px;
}
<div id='container'>
<div class='subcontainer'>
<div class='label'><label for="Year">Year :</label></div>
<div class='input'><input type="text" id="Year" name="year" placeholder="(YYYY)"></div>
</div>
<div class='subcontainer'>
<div class='label'><label for="LicencePlate">Licence Plate:</label></div>
<div class='input'><input type="text" id="LicencePlate" name="licencePlate" placeholder="LicencePlate"></div>
</div>
<div class='subcontainer'>
<div class='label'><label for="DateBooked">Date Booked:</label>
</div>
<div class='input'><input type="text" id="DateBooked" name="dateBooked" placeholder="24/10/2017"></div>
</div>
<div class='subcontainer'>
<div class='label'><label for="Year">Year :</label></div>
<div class='input'><input type="text" id="Year" name="year" placeholder="(YYYY)"></div>
</div>
<div class='subcontainer'>
<div class='label'><label for="TimeBooked">Time Booked:</label>
</div>
<div class='input'><input type="text" id="TimeBooked" name="timeBooked" placeholder="14:00"></div>
</div>
</div>
I hope above code will help you.
can anyone please give me an example of fixed px size
Here is a box with a described size.
element {
width: 20px;
height: 20px;
background: red;
}
and what is the use of it.
To tell the browser how to display the element
and also can u please help me wrapping those input and labels inside a div element and making the box different sizes
An example of how you should markup and style lists of input fields
https://jsfiddle.net/sheriffderek/at2m1r6v/
I have designed a HTML for with the tabindex set to the fieds. There are 3 fieldsets. The lower fieldset contains the submit tab with the proper tabindex specified. But the tab is not pointing to the tag. After fieldset2 it is moving directly to fieldset.
Please find the following code described:
<form action="#" method="post" id="registrationfrm">
<fieldset id="personalinfo">
<div class="fieldwrapper">
<label for="register_firstname">first name</label>
<div class="inputwrapper">
<input type="text" tabindex="201" value="" name="register_firstname" id="register_firstname">
</div>
</div>
<div class="fieldwrapper">
<label for="register_lastname">last name</label>
<div class="inputwrapper">
<input type="text" tabindex="202" name="register_lastname" id="register_lastname">
</div>
</div>
<div class="clear"></div>
<div class="fieldwrapper">
<label for="register_industry">industry</label>
<div class="inputwrapper">
<select tabindex="203" id="register_industry" name="register$industry">
<option value="">--- please select an industry ---</option>
<option value="adagency">Ad Agency/Public Relations</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="fieldwrapper">
<label for="register_role">role</label>
<div class="inputwrapper">
<select tabindex="204" id="register_role" name="register_role">
<option value="">--- please select a role ---</option>
<option value="Education">Educator/Student</option>
<option value="MktSales">Marketing/Sales</option>
</select>
</div>
</div>
<div class="clear"></div>
<div class="fieldwrapper">
<label for="register_loginname">user name</label>
<div class="inputwrapper">
<input type="text" tabindex="205" name="register_loginname" id="register_loginname">
</div>
</div>
<div class="fieldwrapper">
<label for="register_emailaddress">email address</label>
<div class="inputwrapper">
<input type="text" tabindex="206" name="register_emailaddress" id="register_emailaddress">
</div>
</div>
<div class="clear"></div>
<div class="fieldwrapper">
<label for="register_password">password</label>
<div class="inputwrapper">
<input type="password" value="" tabindex="207" name="register_password" id="register_password">
</div>
</div>
<div class="fieldwrapper">
<label for="register_passwordconfirm">confirm password</label>
<div class="inputwrapper">
<input type="password" tabindex="208" value="" name="register_passwordconfirm" id="register_passwordconfirm">
</div>
</div>
<div class="clear"></div>
<div class="fieldwrapper">
<label for="register_securityquestion">security question</label>
<div class="inputwrapper">
<select tabindex="209" id="register_securityquestion" name="register$securityquestion">
<option value="">--- please select a question ---</option>
<option value="School">What was the name of your elementary school?</option>
</select>
</div>
</div>
<div class="fieldwrapper">
<label for="register_securityanswer">security answer</label>
<div class="inputwrapper">
<input type="text" tabindex="210" title="security answer" value="" name="register_securityanswer" id="register_securityanswer">
</div>
</div>
<div class="clear"></div>
</fieldset>
<fieldset id="registrationcheckboxes">
<label for="register_agree"><input type="checkbox" name="register_agree" id="register_agree" class="checkbox {validate:{required:true, messages:{required:'Please review and accept the terms and conditions. If you do not agree to the terms and conditions please use the website as our guest.'}}}" tabindex="211" value="true"> I accept Neenah's terms and conditions.</label>
<div id="register_agreetoterms_exception"></div>
<label for="register_receiveemails"><input type="checkbox" checked="" name="register_receiveemails" id="register_receiveemails" tabindex="212" value="true"> YES, I would like to receive occassional emails about Neenah Paper news and special offers.</label>
</fieldset>
<fieldset id="submitsection">
<a tabindex="213" id="registration_submit" href="#">register account</a>
</fieldset>
</form>
CSS
#registration .fieldwrapper {
display:inline;
float:left;
padding:0 3px;
}
.inputwrapper {
display:block;
font-size:12px;
padding-bottom:10px;
}
a#registration_submit {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/global/CreateNewAccountSubmit.png) no-repeat scroll 0 0;
float:left;
height:21px;
position:relative;
text-indent:-9000px;
width:160px;
}
I would be very glad to have your sugestion.
Thanks,
Nirmal
I tried your code, and it does give focus to the registration link. But the registration link isn't shown due to the text indentation being set to -9000px. In order to do so, you can use the focus pseudo class and remove the text indentation. E.g.
a#registration_submit:focus {
text-indent:0;
}
Keep in mind that this doesn't work in the older IE browsers. To fix that, you might have to resort to JavaScript.