umair.ashfr
Reputation: 1261
How to get the submit button appear down the page
i am working on this student profile project. it is in the designing phases. The problem i am facing is that the submit button isn't appearing at the bottom of the page. Rather it is appearing right in the first section of the page. can you please help me with it? Best regards,
input[type="button"], input[type="submit"], input[type="reset"], button {
cursor: pointer;
}
.container{
width:700px;
margin:0 auto;
}
label{
display:block;
}
.header{
background: #2196F3;
border: 1px solid #CCCCCC;
border-radius: 2px;
border-width: 1px;
color: #fff;
font-family: Roboto,sans-serif;
font-weight: bold;
font-size: 20px;
margin: 1px auto;
padding: 10px;
display:block;
text-align:center
}
.under_header{
font-family: Roboto,sans-serif;
padding:10px;
font-size: 15px;
}
.segment_header {
text-align:Left;
width: auto;
margin: 1px;
color: #FFF;
background: #2196F3 none repeat scroll 50% 50% / cover;
border-radius: 4px;
font-family:Roboto,sans-serif;
font-weight:bold;
font-size:18px;
padding:0px 0px 0px 10px;
}
.question{
padding: 10px;
margin-bottom: 1px;
margin-left: 1px;
float: left;
display: block;
font-weight: bold;
}
.question .top_question{
display: block !important;
min-height: 19px;
}
.question .text_field{
background: #FAFAFA none repeat scroll 0% 0%;
border: 1px solid #CCC;
border-radius: 2px;
color: #333;
font-family: "Roboto",sans-serif;
font-size: 13px;
margin: 1px 0px;
padding: 10px;
display:block;
}
.question .drop_down {
background: #FAFAFA none repeat scroll 0% 0%;
border: 1px solid #CCC;
border-radius: 2px;
color: #333;
font-family: "Roboto",sans-serif;
font-size: 13px;
margin: 1px 0px;
padding: 9px;
display:block;
}
.question .item_anchor {
position: relative;
top: -15px;
}
.full_width {
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100%;
}
.required .icon{
background-image: none;
background-position: left;
background-repeat: no-repeat;
font-size: 13px;
padding-left: 14px;
}
.question .matrix {
border-collapse: collapse;
margin-right: 3px;
margin-top: 1px;
}
.form_table{
width: 650px;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
border: 0px solid #CCCCCC;
background: #FFFFFF;
background-size: cover;
color: #333333;
overflow: hidden;
box-shadow: 0 1px 6px rgba(0,0,0,0.30);
}
.form_table table {
font-size: 1em;
}
.question .matrix th{
color: #FFFFFF;
background: #64B5F6;
padding: 5px;
font-weight: bold;
text-align: center;
vertical-align: bottom;
}
.question .matrix td{
padding: 5px;
text-align: center;
white-space: nowrap;
height: 26px;
}
.question .matrix td.question{
font-weight: normal;
}
.question .matrix .multi_scale_sub th{
font-weight: normal;
border-top: 1px solid #CCCCCC !important;
background: #999999;
}
.question .matrix .multi_scale_break{
border-right: 1px solid #CCCCCC;
}
.question .matrix_row_dark td{
color: #333333;
background: #FAFAFA;
}
.question .matrix_row_dark td.question{
color: #333333;
background: #FAFAFA;
}
.question .matrix_row_light td{
color: #333333;
background: #FFFFFF;
}
.question .matrix_row_light td.question{
color: #333333;
background: #FFFFFF;
}
.question .rating_ranking td{
padding: 5px;
}
.question .scroller{
border: 1px solid #CCCCCC;
}
.highlight{
background: #FFF9C4 !important;
}
tr.highlight td{
background: #FFF9C4 !important;
}
.outside{
color: #333333;
}
.outside_container{
width: 650px;
padding: 1em 0;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #333333;
}
.submit_button {
display: inline-block;
cursor: pointer;
margin: 5px;
padding: 10px 20px;
font-weight: bold;
text-align: center;
border-width: 1px;
transition: background 0.1s ease-out 0s;
white-space: normal;
}
.outside_container .submit_button{
color: #FFFFFF !important;
background: #FF9800;
background-size: auto;
border-style: none;
border-width: 1px;
border-color: #FFFFFF;
border-radius: 4px;
text-align: center;
font-family: 'Roboto',sans-serif;
font-size: 14px;
font-weight: bold;
min-width: 30%;
padding: 10px 20px;
text-transform: uppercase;
box-shadow: 0 1px 6px rgba(0,0,0,0.30);
}
.buttons_reverse {
direction: rtl;
text-align: center;
}
.outside_container .submit_button:hover{
background: #F57C00;
border-color: #BBBBBB;
background-size: auto;
}
.progressBarWrapper{
border-radius: 4px;
background: #FFFFFF;
background-size: cover;
border-color: #CCCCCC;
}
.progressBarBack{
color: #FFFFFF;
background-color: #FF9800;
}
.progressBarFront{
color: #333333;
}
.ui-widget{
font-family: 'Roboto',sans-serif;
}
.invalid{
background: #FFEEEE;
}
.invalid .invalid_message{
color: #FF0000;
background: #FFEEEE;
border: 1px solid #FF0000;
border-radius: 2px;
}
.form_table.invalid{
border: 2px solid #FF0000;
}
.invalid .matrix .invalid_row{
background: #FFEEEE;
}<form id="FSform" method="post" style="">
<div id="q23" class="question">
<a class="item_anchor" name="ItemAnchor3"></a>
<label class="question top_question" for="RESULT_TextField-3">First Name</label>
<input name="RESULT_TextField-3" class="text_field" id="RESULT_TextField-3" size="22" maxlength="255" value="" type="text">
</div>
<div id="q24" class="question">
<a class="item_anchor" name="ItemAnchor4"></a>
<label class="question top_question" for="RESULT_TextField-4">Last Name</label>
<input name="RESULT_TextField-4" class="text_field" id="RESULT_TextField-4" size="22" maxlength="255" value="" type="text">
</div>
<div id="q49" class="question">
<a class="item_anchor" name="ItemAnchor5"></a>
<label class="question top_question" for="RESULT_RadioButton-5">Class</label>
<select id="RESULT_RadioButton-5" name="RESULT_RadioButton-5" class="drop_down">
<option></option>
<option value="Radio-0">AS Level</option>
<option value="Radio-1">A Level</option>
</select>
</div>
<div id="q21" class="question">
<a class="item_anchor" name="ItemAnchor6"></a>
<label class="question top_question" for="RESULT_RadioButton-5">Gender</label>
<select id="RESULT_RadioButton-5" name="RESULT_RadioButton-5" class="drop_down">
<option></option>
<option value="Radio-0">Male</option>
<option value="Radio-1">Female</option>
</select>
</div>
<div id="q12" class="question">
<a class="item_anchor" name="ItemAnchor7"></a>
<label class="question top_question" for="RESULT_RadioButton-7">Group</label>
<select id="RESULT_RadioButton-7" name="RESULT_RadioButton-7" class="drop_down">
<option></option>
<option value="Radio-0">Engineering</option>
<option value="Radio-1">Medical</option>
<option value="Radio-2">General</option>
</select>
</div>
<div id="q25" class="question">
<a class="item_anchor" name="ItemAnchor8"></a>
<label class="question top_question" for="RESULT_TextField-8">Street Address</label>
<input name="RESULT_TextField-8" class="text_field" id="RESULT_TextField-8" size="52" maxlength="255" value="" type="text">
</div>
<div id="q27" class="question">
<a class="item_anchor" name="ItemAnchor9"></a>
<label class="question top_question" for="RESULT_TextField-9">City</label>
<input name="RESULT_TextField-9" class="text_field" id="RESULT_TextField-9" size="30" maxlength="255" value="" type="text">
</div>
<div id="q28" class="question">
<a class="item_anchor" name="ItemAnchor10"></a>
<label class="question top_question" for="RESULT_RadioButton-10">Province/State</label>
<select id="RESULT_RadioButton-10" name="RESULT_RadioButton-10" class="drop_down">
<option></option>
<option value="Radio-0">Punjab</option>
<option value="Radio-1">KPK</option>
<option value="Radio-2">Sindh</option>
<option value="Radio-3">Baluchistan</option>
</select>
</div>
<div id="q30" class="question">
<a class="item_anchor" name="ItemAnchor11"></a>
<label class="question top_question" for="RESULT_TextField-11">Phone Number</label>
<input name="RESULT_TextField-11" class="text_field" id="RESULT_TextField-11" size="34" maxlength="255" value="" type="text">
</div>
<div id="q31" class="question">
<a class="item_anchor" name="ItemAnchor12"></a>
<label class="question top_question" for="RESULT_TextField-12">Email Address</label>
<input name="RESULT_TextField-12" class="text_field" id="RESULT_TextField-12" size="52" maxlength="255" value="" type="email">
</div>
<div class="outside_container">
<div class="buttons_reverse"><input name="Submit" value="Submit" class="submit_button" id="FSsubmit" type="submit"></div></div>Upvotes: 0
Views: 64
Answers (3)
Naveen Attri
Reputation: 96
In css for outside_container class, add following
clear : both;
This should do the job.
Upvotes: 1
Jinu Kurian
Reputation: 9416
input[type="button"], input[type="submit"], input[type="reset"], button {
cursor: pointer;
}
.container{
width:700px;
margin:0 auto;
}
label{
display:block;
}
.header{
background: #2196F3;
border: 1px solid #CCCCCC;
border-radius: 2px;
border-width: 1px;
color: #fff;
font-family: Roboto,sans-serif;
font-weight: bold;
font-size: 20px;
margin: 1px auto;
padding: 10px;
display:block;
text-align:center
}
.under_header{
font-family: Roboto,sans-serif;
padding:10px;
font-size: 15px;
}
.segment_header {
text-align:Left;
width: auto;
margin: 1px;
color: #FFF;
background: #2196F3 none repeat scroll 50% 50% / cover;
border-radius: 4px;
font-family:Roboto,sans-serif;
font-weight:bold;
font-size:18px;
padding:0px 0px 0px 10px;
}
.question{
padding: 10px;
margin-bottom: 1px;
margin-left: 1px;
float: left;
display: block;
font-weight: bold;
}
.question .top_question{
display: block !important;
min-height: 19px;
}
.question .text_field{
background: #FAFAFA none repeat scroll 0% 0%;
border: 1px solid #CCC;
border-radius: 2px;
color: #333;
font-family: "Roboto",sans-serif;
font-size: 13px;
margin: 1px 0px;
padding: 10px;
display:block;
}
.question .drop_down {
background: #FAFAFA none repeat scroll 0% 0%;
border: 1px solid #CCC;
border-radius: 2px;
color: #333;
font-family: "Roboto",sans-serif;
font-size: 13px;
margin: 1px 0px;
padding: 9px;
display:block;
}
.question .item_anchor {
position: relative;
top: -15px;
}
.full_width {
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100%;
}
.required .icon{
background-image: none;
background-position: left;
background-repeat: no-repeat;
font-size: 13px;
padding-left: 14px;
}
.question .matrix {
border-collapse: collapse;
margin-right: 3px;
margin-top: 1px;
}
.form_table{
width: 650px;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
border: 0px solid #CCCCCC;
background: #FFFFFF;
background-size: cover;
color: #333333;
overflow: hidden;
box-shadow: 0 1px 6px rgba(0,0,0,0.30);
}
.form_table table {
font-size: 1em;
}
.question .matrix th{
color: #FFFFFF;
background: #64B5F6;
padding: 5px;
font-weight: bold;
text-align: center;
vertical-align: bottom;
}
.question .matrix td{
padding: 5px;
text-align: center;
white-space: nowrap;
height: 26px;
}
.question .matrix td.question{
font-weight: normal;
}
.question .matrix .multi_scale_sub th{
font-weight: normal;
border-top: 1px solid #CCCCCC !important;
background: #999999;
}
.question .matrix .multi_scale_break{
border-right: 1px solid #CCCCCC;
}
.question .matrix_row_dark td{
color: #333333;
background: #FAFAFA;
}
.question .matrix_row_dark td.question{
color: #333333;
background: #FAFAFA;
}
.question .matrix_row_light td{
color: #333333;
background: #FFFFFF;
}
.question .matrix_row_light td.question{
color: #333333;
background: #FFFFFF;
}
.question .rating_ranking td{
padding: 5px;
}
.question .scroller{
border: 1px solid #CCCCCC;
}
.highlight{
background: #FFF9C4 !important;
}
tr.highlight td{
background: #FFF9C4 !important;
}
.outside{
color: #333333;
}
.outside_container{
width: 650px;
padding: 1em 0;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #333333;
}
.submit_button {
display: inline-block;
cursor: pointer;
margin: 5px;
padding: 10px 20px;
font-weight: bold;
text-align: center;
border-width: 1px;
transition: background 0.1s ease-out 0s;
white-space: normal;
}
.outside_container .submit_button{
color: #FFFFFF !important;
background: #FF9800;
background-size: auto;
border-style: none;
border-width: 1px;
border-color: #FFFFFF;
border-radius: 4px;
text-align: center;
font-family: 'Roboto',sans-serif;
font-size: 14px;
font-weight: bold;
min-width: 30%;
padding: 10px 20px;
text-transform: uppercase;
box-shadow: 0 1px 6px rgba(0,0,0,0.30);
}
.buttons_reverse {
direction: rtl;
text-align: center;
}
.outside_container .submit_button:hover{
background: #F57C00;
border-color: #BBBBBB;
background-size: auto;
}
.progressBarWrapper{
border-radius: 4px;
background: #FFFFFF;
background-size: cover;
border-color: #CCCCCC;
}
.progressBarBack{
color: #FFFFFF;
background-color: #FF9800;
}
.progressBarFront{
color: #333333;
}
.ui-widget{
font-family: 'Roboto',sans-serif;
}
.invalid{
background: #FFEEEE;
}
.invalid .invalid_message{
color: #FF0000;
background: #FFEEEE;
border: 1px solid #FF0000;
border-radius: 2px;
}
.form_table.invalid{
border: 2px solid #FF0000;
}
.invalid .matrix .invalid_row{
background: #FFEEEE;
}
.form-wrapper{
display: table;
}<form id="FSform" method="post" style="">
<div class="form-wrapper">
<div id="q23" class="question">
<a class="item_anchor" name="ItemAnchor3"></a>
<label class="question top_question" for="RESULT_TextField-3">First Name</label>
<input name="RESULT_TextField-3" class="text_field" id="RESULT_TextField-3" size="22" maxlength="255" value="" type="text">
</div>
<div id="q24" class="question">
<a class="item_anchor" name="ItemAnchor4"></a>
<label class="question top_question" for="RESULT_TextField-4">Last Name</label>
<input name="RESULT_TextField-4" class="text_field" id="RESULT_TextField-4" size="22" maxlength="255" value="" type="text">
</div>
<div id="q49" class="question">
<a class="item_anchor" name="ItemAnchor5"></a>
<label class="question top_question" for="RESULT_RadioButton-5">Class</label>
<select id="RESULT_RadioButton-5" name="RESULT_RadioButton-5" class="drop_down">
<option></option>
<option value="Radio-0">AS Level</option>
<option value="Radio-1">A Level</option>
</select>
</div>
<div id="q21" class="question">
<a class="item_anchor" name="ItemAnchor6"></a>
<label class="question top_question" for="RESULT_RadioButton-5">Gender</label>
<select id="RESULT_RadioButton-5" name="RESULT_RadioButton-5" class="drop_down">
<option></option>
<option value="Radio-0">Male</option>
<option value="Radio-1">Female</option>
</select>
</div>
<div id="q12" class="question">
<a class="item_anchor" name="ItemAnchor7"></a>
<label class="question top_question" for="RESULT_RadioButton-7">Group</label>
<select id="RESULT_RadioButton-7" name="RESULT_RadioButton-7" class="drop_down">
<option></option>
<option value="Radio-0">Engineering</option>
<option value="Radio-1">Medical</option>
<option value="Radio-2">General</option>
</select>
</div>
<div id="q25" class="question">
<a class="item_anchor" name="ItemAnchor8"></a>
<label class="question top_question" for="RESULT_TextField-8">Street Address</label>
<input name="RESULT_TextField-8" class="text_field" id="RESULT_TextField-8" size="52" maxlength="255" value="" type="text">
</div>
<div id="q27" class="question">
<a class="item_anchor" name="ItemAnchor9"></a>
<label class="question top_question" for="RESULT_TextField-9">City</label>
<input name="RESULT_TextField-9" class="text_field" id="RESULT_TextField-9" size="30" maxlength="255" value="" type="text">
</div>
<div id="q28" class="question">
<a class="item_anchor" name="ItemAnchor10"></a>
<label class="question top_question" for="RESULT_RadioButton-10">Province/State</label>
<select id="RESULT_RadioButton-10" name="RESULT_RadioButton-10" class="drop_down">
<option></option>
<option value="Radio-0">Punjab</option>
<option value="Radio-1">KPK</option>
<option value="Radio-2">Sindh</option>
<option value="Radio-3">Baluchistan</option>
</select>
</div>
<div id="q30" class="question">
<a class="item_anchor" name="ItemAnchor11"></a>
<label class="question top_question" for="RESULT_TextField-11">Phone Number</label>
<input name="RESULT_TextField-11" class="text_field" id="RESULT_TextField-11" size="34" maxlength="255" value="" type="text">
</div>
<div id="q31" class="question">
<a class="item_anchor" name="ItemAnchor12"></a>
<label class="question top_question" for="RESULT_TextField-12">Email Address</label>
<input name="RESULT_TextField-12" class="text_field" id="RESULT_TextField-12" size="52" maxlength="255" value="" type="email">
</div>
</div>
<div class="outside_container">
<div class="buttons_reverse"><input name="Submit" value="Submit" class="submit_button" id="FSsubmit" type="submit"></div></div>Upvotes: 0
Rohit Azad Malik
Reputation: 32182
Now define your
.outside_container{ clear:both;}
as like this
Upvotes: 0
Related Questions
- Have the submit button uncentered
- submit button in the middle of form
- html css submit button
- How to position the submit button?
- Putting button outside form but in the same line of submit button
- Position of text in a submit button
- Is possible to submit button be at aright side of input, not below?
- Form Code: How to get submit button next to text box
- How can I style my page so that a form's submit button is always at the bottom of the window?
- How can I get the submit button to be on the same line as the form field?