Aligning right for the select attribute in html

Aligning right for the select attribute in html - html

I am trying to align one of the select attribute in html to the right side of the page. However i was unable to achieve it. I have attached my codes here.
<!DOCTYPE html>
<html>
<body>
<h1>Java Casting</h1>
<h3>From</h3>
<h3 align="right">To</h3>
<select>
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
<select align="right" >
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
</body>
</html>

This is what you are trying to achieve if i'm not mistaken.
.right {
text-align: right;
float: right;
width: 50%;
}
.left {
float: left;
width: 50%;
}
<h1>Java Casting</h1>
<div class="left">
<h3>From</h3>
<select>
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
</div>
<div class="right">
<h3>To</h3>
<select>
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
</div>

You could try <select style="float:right">
<!DOCTYPE html>
<html>
<body>
<h1>Java Casting</h1>
<h3>From</h3>
<h3 align="right">To</h3>
<select>
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
<select style="float:right">
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
</body>
</html>

Related

I cannot change position and add spaces between selection tags in html

<div class="selection_menu">
<select name="Island" id="select_island" class="select_island">
<option value="1">Island</option>
<option value="2">West Java</option>
<option value="3">Sumatra</option>
<option value="4">Bali Pupuan</option>
</select>
<select name="type" id="select_type" class="select_type">
<option value="1">Type</option>
<option value="2">Arabica</option>
<option value="3">Robusta</option>
</select>
<select name="process_method" id="select_process" class="select_process">
<option value="1">Process Method</option>
<option value="2">Natural</option>
<option value="3">Honey</option>
<option value="4">Dry Hulled</option>
<option value="5">Wet Hulled</option>
<option value="6">Extended Natural</option>
<option value="7">Full Wash</option>
</select>
<select name="select_quality" id="select_quality" class="select_quality">
<option value="1">Quality</option>
<option value="2">Specialty</option>
<option value="3">Premium</option>
</select>
<select name="select_available" id="select_available" class="select_available">
<option value="1">Availability</option>
<option value="2">Available now</option>
<option value="3">Not yet available</option>
</select>
<select name="select_cp" id="select_cp" class="select_cp">
<option value="1">Cupping score</option>
<option value="2">80-85</option>
<option value="3">85.1-90</option>
</select>
My selection tags are in a div and I tried : align-items: center, justify-content: center, justify-content: space-between. But it simply didn't work.
How do I center them and add even spaces between them?
How do I put even spaces between them and center them in my div?

Firstly you dont need to use flexbox system. The form elements are inline elements and you can use text-align: center. But i dont know you entire css and i write the example by using flexbox.
Add only this to your css:
.selection_menu {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
}
.select_island {
display: block;
}
With gap can increase or decrease the space between your elements.
.selection_menu {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
}
.select_island {
display: block;
}
<div class="selection_menu">
<select name="Island" id="select_island" class="select_island">
<option value="1">Island</option>
<option value="2">West Java</option>
<option value="3">Sumatra</option>
<option value="4">Bali Pupuan</option>
</select>
<select name="type" id="select_type" class="select_type">
<option value="1">Type</option>
<option value="2">Arabica</option>
<option value="3">Robusta</option>
</select>
<select name="process_method" id="select_process" class="select_process">
<option value="1">Process Method</option>
<option value="2">Natural</option>
<option value="3">Honey</option>
<option value="4">Dry Hulled</option>
<option value="5">Wet Hulled</option>
<option value="6">Extended Natural</option>
<option value="7">Full Wash</option>
</select>
<select name="select_quality" id="select_quality" class="select_quality">
<option value="1">Quality</option>
<option value="2">Specialty</option>
<option value="3">Premium</option>
</select>
<select name="select_available" id="select_available" class="select_available">
<option value="1">Availability</option>
<option value="2">Available now</option>
<option value="3">Not yet available</option>
</select>
<select name="select_cp" id="select_cp" class="select_cp">
<option value="1">Cupping score</option>
<option value="2">80-85</option>
<option value="3">85.1-90</option>
</select>

if your tag selection-menu is a flex container
you can play with justify-contentproperty with value space-betweenor space-evenly
.selection_menu {
width:100%;
border:solid 1px black;
display:flex;
justify-content:space-between;
}
<div class="selection_menu">
<select name="Island" id="select_island" class="select_island">
<option value="1">Island</option>
<option value="2">West Java</option>
<option value="3">Sumatra</option>
<option value="4">Bali Pupuan</option>
</select>
<select name="type" id="select_type" class="select_type">
<option value="1">Type</option>
<option value="2">Arabica</option>
<option value="3">Robusta</option>
</select>
<select name="process_method" id="select_process" class="select_process">
<option value="1">Process Method</option>
<option value="2">Natural</option>
<option value="3">Honey</option>
<option value="4">Dry Hulled</option>
<option value="5">Wet Hulled</option>
<option value="6">Extended Natural</option>
<option value="7">Full Wash</option>
</select>
<select name="select_quality" id="select_quality" class="select_quality">
<option value="1">Quality</option>
<option value="2">Specialty</option>
<option value="3">Premium</option>
</select>
<select name="select_available" id="select_available" class="select_available">
<option value="1">Availability</option>
<option value="2">Available now</option>
<option value="3">Not yet available</option>
</select>
<select name="select_cp" id="select_cp" class="select_cp">
<option value="1">Cupping score</option>
<option value="2">80-85</option>
<option value="3">85.1-90</option>
</select>
</div>

adding flexbox with display:flex; than justify-content:center; for horizontal align to center all the elements, than column-gap: 5rem; to create spaces between columns
.selection_menu {
margin: 1rem;
display: flex;
justify-content: center;
align-items: center;
/* CHANGE HERE */
column-gap: 5rem;
/* CHANGE HERE */
}
<div class="selection_menu">
<select name="Island" id="select_island" class="select_island">
<option value="1">Island</option>
<option value="2">West Java</option>
<option value="3">Sumatra</option>
<option value="4">Bali Pupuan</option>
</select>
<select name="type" id="select_type" class="select_type">
<option value="1">Type</option>
<option value="2">Arabica</option>
<option value="3">Robusta</option>
</select>
<select name="process_method" id="select_process" class="select_process">
<option value="1">Process Method</option>
<option value="2">Natural</option>
<option value="3">Honey</option>
<option value="4">Dry Hulled</option>
<option value="5">Wet Hulled</option>
<option value="6">Extended Natural</option>
<option value="7">Full Wash</option>
</select>
<select name="select_quality" id="select_quality" class="select_quality">
<option value="1">Quality</option>
<option value="2">Specialty</option>
<option value="3">Premium</option>
</select>
<select name="select_available" id="select_available" class="select_available">
<option value="1">Availability</option>
<option value="2">Available now</option>
<option value="3">Not yet available</option>
</select>
<select name="select_cp" id="select_cp" class="select_cp">
<option value="1">Cupping score</option>
<option value="2">80-85</option>
<option value="3">85.1-90</option>
</select>

Select box not showing properly on a survey form

div{
padding: 10px;
}
<div>
Occupation: <select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</div>
I'm not sure what I'm doing wrong and why is the first select box working and the other one isn't
This is what it looks like:

You should close your div and select tags.
div{
padding: 10px;
}
<div>
Occupation: <select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</select>
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</select>
</div>
</div>

You are missing the closing tag of your first <select>:
div{
padding: 10px;
}
<div>
Occupation:
<select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</select> <!-- was missing -->
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</div>

How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

I want to create a centered form.
HTML:
<div id="profileContainer”>…</div>
CSS:
#profileContainer {
border-radius: 25px;
background: #ffffff;
padding: 10px;
width: 100%;
max-width: 760px;
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
The problem is when the screen is vertically shorter, part of the form gets hidden, and no scrollbars appear to make it accessible: JSFiddle.
Question:
How do I get scrollbars to appear when vertical space alone is insufficient, but keep my div centered horizontally and vertically when there is enough space?

I would change the CSS rule for #profileContainer like this:
#profileContainer {
border-radius: 25px;
background: #ffffff;
padding: 10px;
width: 90%;
max-width: 760px;
display: block;
position: relative;
margin: 30px auto 0;
}
position: relative instead of fixed, less width, since 100% plus the padding exceeds the container width. margin: 0 auto to center horizontally instead of left: 50% and transformX(-50%). Fixed margin top instead of vertical centering to avoid the effect you describe.
Fiddle: http://jsfiddle.net/qacv17gq/1/
Addition: Except with javascript/jQuery you won't be able to center a container vertically and not have parts of it hidden with no scrollbar when the window/screen height is less than the container's height.

This can easily be achieved with flexbox by simply removing all of the positioning from #profileContainer and adding the following rules to body:
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
The first three rules will center #profileContainer while the last one makes sure that the body will always be at least the full height of the view.
JSFiddle doesn't show the last rule correctly and your example is too big to embed it here, so I moved it over to codepen.
As a side note, you have an extra closing div tag just before you close main.

It's 2016, everyone! Time to start relying on CSS Flexbox to center our elements and retire our beloved translate(-50%, -50%) hack.
CodePen
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#profileContainer {
width: 760px;
max-width: 100vw;
max-height: 100vh;
overflow-y: scroll;
}
The <body> serves as our flex container. justify-content: center and align-items: center will center the form. max-width and max-height will keep the form from exceeding the boundaries of the window.
No positioning needed!

I think this is the answer you are looking for... Just go through this code
If you have any query ask me
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="profileContainer" class="container-fulid">
<div class="col-md-8 col-xs-8 col-xs-offset-2 col-md-offset-2" style="border:1px solid #000;padding:0px;border-radius:4px">
<header>
<nav class="navbar navbar-inverse" style="">
<div class="navContainer">
<div id="navbar">
<div id="leftNavSection">
</div>
<div id="rightNavSection" style="color:#fff">
Logged in as Dave A
<a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container-fulid">
<!-- User's profile -->
<div id="profile" >
<div class="col-lg-12">
<div class="col-md-8 col-md-offset-2">
<h2>Profile Information</h2>
<form class="edit_user" id="edit_user_38" action="/users/38" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="wh3mbAtBBAMrOqPUdqGMY5aHns3EZ/tVQDRHhcA1A2ZqXKgDE+VKG7Gj/NyjySKngvorjjq8rVMc/n8LOE4Pgg==" />
<div class="profileField">
<label for="user_first_name">First name</label><br/>
<div class="field"><input size="20" class="textField form-control" type="text" value="Dave" name="user[first_name]" id="user_first_name" style="width:50%"/></div>
</div>
<div class="profileField">
<label for="user_last_name">Last name</label><br/>
<div class="field"><input size="20" class="textField form-control" type="text" value="A" name="user[last_name]" id="user_last_name" style="width:50%"/></div>
</div>
<div class="profileField">
Birthday<br/>
<div class="col-lg-4">
<select id="user_dob_2i" name="user[dob(2i)]" class="form-control">
<option value="">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col-lg-4">
<select id="user_dob_3i" name="user[dob(3i)]" class="form-control">
<option value="">Select Day</option>
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-lg-4">
<select id="user_dob_1i" name="user[dob(1i)]" class="form-control">
<option value="">Select Year</option>
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
<option value="1907">1907</option>
<option value="1908">1908</option>
<option value="1909">1909</option>
<option value="1910">1910</option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
</div>
<div class="profileField address">
<label for="user_address_attributes_address">Home Town</label><br/>
<div class="col-lg-4">
<div class="field"><input placeholder="City" class="textField form-control" type="text" name="user[address_attributes][city]" id="user_address_attributes_city" /></div>
</div>
<div class="col-lg-4">
<select class="selectField selectMenu form-control" name="user[address_attributes][state_id]" id="user_address_attributes_state_id"><option value="">Select State</option>
<option value="3526">Alabama</option>
<option value="3556">Alaska</option>
<option value="3547">Arizona</option>
<option value="3510">Arkansas</option>
<option value="3542">California</option>
<option value="3543">Colorado</option>
<option value="3527">Connecticut</option>
<option value="3512">Delaware</option>
<option value="3513">Florida</option>
<option value="3514">Georgia</option>
<option value="3555">Hawaii</option>
<option value="3548">Idaho</option>
<option value="3529">Illinois</option>
<option value="3530">Indiana</option>
<option value="3528">Iowa</option>
<option value="3515">Kansas</option>
<option value="3557">Kentucky</option>
<option value="3516">Louisiana</option>
<option value="3531">Maine</option>
<option value="3517">Maryland</option>
<option value="3558">Massachusetts</option>
<option value="3532">Michigan</option>
<option value="3533">Minnesota</option>
<option value="3519">Mississippi</option>
<option value="3518">Missouri</option>
<option value="3549">Montana</option>
<option value="3534">Nebraska</option>
<option value="3545">Nevada</option>
<option value="3535">New Hampshire</option>
<option value="3536">New Jersey</option>
<option value="3544">New Mexico</option>
<option value="3537">New York</option>
<option value="3520">North Carolina</option>
<option value="3550">North Dakota</option>
<option value="3538">Ohio</option>
<option value="3521">Oklahoma</option>
<option value="3551">Oregon</option>
<option value="3559">Pennsylvania</option>
<option value="3539">Rhode Island</option>
<option value="3522">South Carolina</option>
<option value="3552">South Dakota</option>
<option value="3523">Tennessee</option>
<option value="3524">Texas</option>
<option value="3546">Utah</option>
<option value="3540">Vermont</option>
<option value="3560">Virginia</option>
<option value="3553">Washington</option>
<option value="3511">Washington, D.C.</option>
<option value="3525">West Virginia</option>
<option value="3541">Wisconsin</option>
<option value="3554">Wyoming</option></select>
</div>
<div class="col-lg-4">
<select id='user[address]_country_id' name='user[address][country_id]' class="form-control">
<option value="0">-- Select --</option><option value="38">Canada</option><option value="233" selected>United States</option><option value="0" disabled="disabled">----------------------------</option><option value="3">Afghanistan</option>
<option value="15">Aland Islands</option>
<option value="6">Albania</option>
<option value="62">Algeria</option>
<option value="11">American Samoa</option>
<option value="1">Andorra</option>
<option value="8">Angola</option>
<option value="5">Anguilla</option>
<option value="9">Antarctica</option>
<option value="4">Antigua and Barbuda</option>
<option value="10">Argentina</option>
<option value="7">Armenia</option>
<option value="14">Aruba</option>
<option value="13">Australia</option>
<option value="12">Austria</option>
<option value="16">Azerbaijan</option>
<option value="32">Bahamas</option>
<option value="23">Bahrain</option>
<option value="19">Bangladesh</option>
<option value="18">Barbados</option>
<option value="36">Belarus</option>
<option value="20">Belgium</option>
<option value="37">Belize</option>
<option value="25">Benin</option>
<option value="27">Bermuda</option>
<option value="33">Bhutan</option>
<option value="29">Bolivia</option>
<option value="30">Bonaire, Saint Eustatius and Saba </option>
<option value="17">Bosnia and Herzegovina</option>
<option value="35">Botswana</option>
<option value="34">Bouvet Island</option>
<option value="31">Brazil</option>
<option value="106">British Indian Ocean Territory</option>
<option value="239">British Virgin Islands</option>
<option value="28">Brunei</option>
<option value="22">Bulgaria</option>
<option value="21">Burkina Faso</option>
<option value="24">Burundi</option>
<option value="117">Cambodia</option>
<option value="47">Cameroon</option>
<option value="38">Canada</option>
<option value="52">Cape Verde</option>
<option value="125">Cayman Islands</option>
<option value="41">Central African Republic</option>
<option value="215">Chad</option>
<option value="46">Chile</option>
<option value="48">China</option>
<option value="54">Christmas Island</option>
<option value="39">Cocos Islands</option>
<option value="49">Colombia</option>
<option value="119">Comoros</option>
<option value="45">Cook Islands</option>
<option value="50">Costa Rica</option>
<option value="98">Croatia</option>
<option value="51">Cuba</option>
<option value="53">Curacao</option>
<option value="55">Cyprus</option>
<option value="56">Czech Republic</option>
<option value="40">Democratic Republic of the Congo</option>
<option value="59">Denmark</option>
<option value="58">Djibouti</option>
<option value="60">Dominica</option>
<option value="61">Dominican Republic</option>
<option value="221">East Timor</option>
<option value="63">Ecuador</option>
<option value="65">Egypt</option>
<option value="210">El Salvador</option>
<option value="88">Equatorial Guinea</option>
<option value="67">Eritrea</option>
<option value="64">Estonia</option>
<option value="69">Ethiopia</option>
<option value="72">Falkland Islands</option>
<option value="74">Faroe Islands</option>
<option value="71">Fiji</option>
<option value="70">Finland</option>
<option value="75">France</option>
<option value="80">French Guiana</option>
<option value="176">French Polynesia</option>
<option value="216">French Southern Territories</option>
<option value="76">Gabon</option>
<option value="85">Gambia</option>
<option value="79">Georgia</option>
<option value="57">Germany</option>
<option value="82">Ghana</option>
<option value="83">Gibraltar</option>
<option value="89">Greece</option>
<option value="84">Greenland</option>
<option value="78">Grenada</option>
<option value="87">Guadeloupe</option>
<option value="92">Guam</option>
<option value="91">Guatemala</option>
<option value="81">Guernsey</option>
<option value="86">Guinea</option>
<option value="93">Guinea-Bissau</option>
<option value="94">Guyana</option>
<option value="99">Haiti</option>
<option value="96">Heard Island and McDonald Islands</option>
<option value="97">Honduras</option>
<option value="95">Hong Kong</option>
<option value="100">Hungary</option>
<option value="109">Iceland</option>
<option value="105">India</option>
<option value="101">Indonesia</option>
<option value="108">Iran</option>
<option value="107">Iraq</option>
<option value="102">Ireland</option>
<option value="104">Isle of Man</option>
<option value="103">Israel</option>
<option value="110">Italy</option>
<option value="44">Ivory Coast</option>
<option value="112">Jamaica</option>
<option value="114">Japan</option>
<option value="111">Jersey</option>
<option value="113">Jordan</option>
<option value="126">Kazakhstan</option>
<option value="115">Kenya</option>
<option value="118">Kiribati</option>
<option value="123">Kosovo</option>
<option value="124">Kuwait</option>
<option value="116">Kyrgyzstan</option>
<option value="127">Laos</option>
<option value="136">Latvia</option>
<option value="128">Lebanon</option>
<option value="133">Lesotho</option>
<option value="132">Liberia</option>
<option value="137">Libya</option>
<option value="130">Liechtenstein</option>
<option value="134">Lithuania</option>
<option value="135">Luxembourg</option>
<option value="149">Macao</option>
<option value="145">Macedonia</option>
<option value="143">Madagascar</option>
<option value="157">Malawi</option>
<option value="159">Malaysia</option>
<option value="156">Maldives</option>
<option value="146">Mali</option>
<option value="154">Malta</option>
<option value="144">Marshall Islands</option>
<option value="151">Martinique</option>
<option value="152">Mauritania</option>
<option value="155">Mauritius</option>
<option value="246">Mayotte</option>
<option value="158">Mexico</option>
<option value="73">Micronesia</option>
<option value="140">Moldova</option>
<option value="139">Monaco</option>
<option value="148">Mongolia</option>
<option value="141">Montenegro</option>
<option value="153">Montserrat</option>
<option value="138">Morocco</option>
<option value="160">Mozambique</option>
<option value="147">Myanmar</option>
<option value="161">Namibia</option>
<option value="170">Nauru</option>
<option value="169">Nepal</option>
<option value="167">Netherlands</option>
<option value="251">Netherlands Antilles</option>
<option value="162">New Caledonia</option>
<option value="172">New Zealand</option>
<option value="166">Nicaragua</option>
<option value="163">Niger</option>
<option value="165">Nigeria</option>
<option value="171">Niue</option>
<option value="164">Norfolk Island</option>
<option value="121">North Korea</option>
<option value="150">Northern Mariana Islands</option>
<option value="168">Norway</option>
<option value="173">Oman</option>
<option value="179">Pakistan</option>
<option value="186">Palau</option>
<option value="184">Palestinian Territory</option>
<option value="174">Panama</option>
<option value="177">Papua New Guinea</option>
<option value="187">Paraguay</option>
<option value="175">Peru</option>
<option value="178">Philippines</option>
<option value="182">Pitcairn</option>
<option value="180">Poland</option>
<option value="185">Portugal</option>
<option value="183">Puerto Rico</option>
<option value="188">Qatar</option>
<option value="42">Republic of the Congo</option>
<option value="189">Reunion</option>
<option value="190">Romania</option>
<option value="192">Russia</option>
<option value="193">Rwanda</option>
<option value="26">Saint Barthelemy</option>
<option value="200">Saint Helena</option>
<option value="120">Saint Kitts and Nevis</option>
<option value="129">Saint Lucia</option>
<option value="142">Saint Martin</option>
<option value="181">Saint Pierre and Miquelon</option>
<option value="237">Saint Vincent and the Grenadines</option>
<option value="244">Samoa</option>
<option value="205">San Marino</option>
<option value="209">Sao Tome and Principe</option>
<option value="194">Saudi Arabia</option>
<option value="206">Senegal</option>
<option value="191">Serbia</option>
<option value="250">Serbia and Montenegro</option>
<option value="196">Seychelles</option>
<option value="204">Sierra Leone</option>
<option value="199">Singapore</option>
<option value="211">Sint Maarten</option>
<option value="203">Slovakia</option>
<option value="201">Slovenia</option>
<option value="195">Solomon Islands</option>
<option value="207">Somalia</option>
<option value="247">South Africa</option>
<option value="90">South Georgia and the South Sandwich Islands</option>
<option value="122">South Korea</option>
<option value="68">Spain</option>
<option value="131">Sri Lanka</option>
<option value="197">Sudan</option>
<option value="208">Suriname</option>
<option value="202">Svalbard and Jan Mayen</option>
<option value="213">Swaziland</option>
<option value="198">Sweden</option>
<option value="43">Switzerland</option>
<option value="212">Syria</option>
<option value="228">Taiwan</option>
<option value="219">Tajikistan</option>
<option value="229">Tanzania</option>
<option value="218">Thailand</option>
<option value="217">Togo</option>
<option value="220">Tokelau</option>
<option value="224">Tonga</option>
<option value="226">Trinidad and Tobago</option>
<option value="223">Tunisia</option>
<option value="225">Turkey</option>
<option value="222">Turkmenistan</option>
<option value="214">Turks and Caicos Islands</option>
<option value="227">Tuvalu</option>
<option value="240">U.S. Virgin Islands</option>
<option value="231">Uganda</option>
<option value="230">Ukraine</option>
<option value="2">United Arab Emirates</option>
<option value="77">United Kingdom</option>
<option selected="selected" value="233">United States</option>
<option value="232">United States Minor Outlying Islands</option>
<option value="234">Uruguay</option>
<option value="235">Uzbekistan</option>
<option value="242">Vanuatu</option>
<option value="236">Vatican</option>
<option value="238">Venezuela</option>
<option value="241">Vietnam</option>
<option value="243">Wallis and Futuna</option>
<option value="66">Western Sahara</option>
<option value="245">Yemen</option>
<option value="248">Zambia</option>
<option value="249">Zimbabwe</option></select>
</div>
</div>
<div class="profileField">
<label for="user_automatic_import">
<input name="user[automatic_import]" type="hidden" value="0" /><input type="checkbox" value="1" name="user[automatic_import]" id="user_automatic_import" />
Automatically Save Results Matching My Name, Age, and Home Town
</label> </div>
<div class="profileField" style="margin:10px 0px;">
<span class="buttonContainer"><a class="btn btn-danger" data-no-turbolink="true" href="/races/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn btn-success" /></span>
</div>
</form>
</div>
</div>
</main>
</div>
</div>
</body>
</html>

You should change position to absolute.
Update
Change #profileContainer for those 3:
position: absolute;
top: 0;
left: 0;
Remove:
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Update
See how you center element:
#container {
display: table;
position: absolute;
height: 100%;
width: 100%;
background: #000;
}
#cell {
display: table-cell;
vertical-align: middle;
background: #ff0000;
}
#profileContainer {
margin: 0 auto;
width: 300px;
height: 300px;
background: #fff;
}
<div id="container">
<div id="cell">
<div id="profileContainer">
<h2>Profile Information</h2>
<p>Form</p>
</div>
</div>
</div>

Add this to the styling of the element.
#profileContainer {
overflow: scroll;
}
Also, try to nest your content between a div inside the div#profileContainer, in case it doesn't work.

I think if you modify #profileContainer style like as follow then you can achieve the effect you want:
#profileContainer {
border-radius: 25px;
background: #ffffff;
padding: 10px;
width: 100%;
max-width: 760px;
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: scroll;
overflow-x: hidden;
max-height: 70vh;
}
I did two things, first is added an vertical scroll and second is specified the maximum height that the #profileContainer can take which is 70vh i.e. 70% of the view-port height. You can adjust it as per your needs.

You could add this css's:
#profileContainer {overflow:auto; max-height:100%;}
html, body {height:100%; margin:0;}
JSFIDDLE

Here you are... this is a cross-browser solution, works everywhere, verified and tested, pure css, no-js, clean solution.
I have added the necessary code at the top and commented out what was needed to your main element.
I wrapped everything in a table / table-cell wrapper (styled below)
<div class="profile-wrapper">
<div>
(..your elem)
</div>
</div>
Then styled them as follows:
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
.profile-wrapper {
display:table;
width:100%;
height:100%;
}
.profile-wrapper > div {
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
text-align:center;
}
Html and body elements have to be given a height:100% to achieve what is requested.
What this does is it creates a table - and it's table-cell inside of it - that occupies the whole screen. Then using the text-align:center and vertical-align:middle you center both horizontally and vertically any display:inline-block element. Since tables expand automatically depending on the content, in case your element is larger than the table-cell dimensions, scrollbars occur..
Here is your updated fiddle.
http://jsfiddle.net/c9btschs/1/

Add following CSS properties along with the #profileContainer
max-height: 85%;
overflow: auto;
This will gives you a scrollbar only if the content is overflown, and the 85% ensures the UI responsive & good looking on all screens
JSFiddle Working Example

Yo need to just change the styles of your profile container:
#profileContainer {
border-radius: 25px;
background: #ffffff;
padding: 10px 2%;
width: 96%;
max-width: 760px;
margin: 0 auto;
}
Try this http://jsfiddle.net/kiroslim/tcou4dk3/10/!

How to place to divs with drop down lists in them next to each other?

<div style="width: 100%; overflow: hidden;">
<div style="margin-left: 100px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style=" margin-left: 350px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style="margin-left: 620px; width: 600px; float: left;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
I want the three divs with the drop down lists to be next to each other horizontally. I have tried using float, inline and inline block. How can it be done in HTML.

Use inline-block and put properly your all divs.
Here is an example:
.selection {
display: inline-block;
}
h1{
display: inline-block;
font-size: 14px;
}
<div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>

<div style="float:left">
dropdown1
</div>
<div style="float:left">
dropdown2
</div>
<div style="float:left">
dropdown3
</div>
This will definitely work.
Problem in your code is over width. Better is you give width into % instead of px.

First of all, your code is really badly formatted.
Your are using 7 Div but you are missing 2 Div closing tags. Close the Div tags properly.
You are also fixing the width of all 3 divisions, so if the screen size is smaller than the combined width of the 3 div, your div's will no longer be displayed horizontally. Give width relative like width:30%.
Also remove margin from the elements. Use Padding instead to give space between div's.
<html>
<body>
<div style="width: 100%; overflow: hidden;">
<div style=" width: 33%;float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style="float: left;width: 33%;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style=" float: left;width: 33%;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
</body>
</html>

Problem is with your code you have 3 unclosed div tags and a lot of left margin plus try to use width and margin both in %
[Check pen] (http://codepen.io/anon/pen/gPzJpr)

for your html
<div class="container">
<div id="firstDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="secondDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="thirdDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
for your css:
div{
display: inline-block;
position: relative;
margin: 5px;
padding: 15px;
}
#firstDiv{
background-color: #ccc;
}
#secondDiv{
background-color: #eee;
}
#thirdDiv{
background-color: #aaa;
}
Just like what #Maihan Nijat said, use external CSS to make it easier for you to debug.

I made a few changes to your code. The absolute easiest way to solve this problem is to ensure that the width of each element could fit next to each other on the screen. Not only does this require that the text is not too large, but also that the width you explicitly define does not overflow.
The simple solution to your problem is to place display: inline-block; on the elements which you would like side by side.
.left {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</body>
</html>

How to prevent newline/line break within a <form></form>?

This is my code.
<form name="publish">
<?php include 'location.selector.html'; ?>
<input type="submit" value="submit"/> </form>
When displayed, there is a newline preceding the
submit
button, how to eliminate this newline/line break?
The HTML content of location.selector.html is
<table><tr><td>都道府県を選択してください</td>
<td>市区町村を選択してください</td></tr>
<tr><td align="center">
<SELECT name="pref" onChange="changePref(true)">
<OPTION VALUE="99">全国
<OPTION VALUE="0">北海道
<OPTION VALUE="1">青森県
<OPTION VALUE="2">岩手県
<OPTION VALUE="3">宮城県
<OPTION VALUE="4">秋田県
<OPTION VALUE="5">山形県
<OPTION VALUE="6">福島県
<OPTION VALUE="7">茨城県
<OPTION VALUE="8">栃木県
<OPTION VALUE="9">群馬県
<OPTION VALUE="10">埼玉県
<OPTION VALUE="11">千葉県
<OPTION VALUE="12">東京都
<OPTION VALUE="13">神奈川県
<OPTION VALUE="14">新潟県
<OPTION VALUE="15">富山県
<OPTION VALUE="16">石川県
<OPTION VALUE="17">福井県
<OPTION VALUE="18">山梨県
<OPTION VALUE="19">長野県
<OPTION VALUE="20">岐阜県
<OPTION VALUE="21">静岡県
<OPTION VALUE="22">愛知県
<OPTION VALUE="23">三重県
<OPTION VALUE="24">滋賀県
<OPTION VALUE="25">京都府
<OPTION VALUE="26">大阪府
<OPTION VALUE="27">兵庫県
<OPTION VALUE="28">奈良県
<OPTION VALUE="29">和歌山県
<OPTION VALUE="30">鳥取県
<OPTION VALUE="31">島根県
<OPTION VALUE="32">岡山県
<OPTION VALUE="33">広島県
<OPTION VALUE="34">山口県
<OPTION VALUE="35">徳島県
<OPTION VALUE="36">香川県
<OPTION VALUE="37">愛媛県
<OPTION VALUE="38">高知県
<OPTION VALUE="39">福岡県
<OPTION VALUE="40">佐賀県
<OPTION VALUE="41">長崎県
<OPTION VALUE="42">熊本県
<OPTION VALUE="43">大分県
<OPTION VALUE="44">宮崎県
<OPTION VALUE="45">鹿児島県
<OPTION VALUE="46">沖縄県
</SELECT></td><td align="center">
<SELECT NAME="city">
<OPTION VALUE="99" SELECTED>全地区
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
</SELECT></td></tr></table>

Include the table before your form tag or use try using below CSS:
<style type="text/css">
form, table {
display:inline;
margin:0px;
padding:0px;
}
</style>

It's been awhile since I did CSS but try the
display:inline
style.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Aligning right for the select attribute in html - html

Related

I cannot change position and add spaces between selection tags in html

Select box not showing properly on a survey form

How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

How to place to divs with drop down lists in them next to each other?

How to prevent newline/line break within a <form></form>?

Categories

Resources