I have a form that is styled with CSS as a table. However the two input elements are shown to be on top of each other and not side by side. How can I get them to be side by side?
As noted in the comments this might be browser related. I am running it on IE 11.0.14393.0 on Windows 10.
div,
a {
font-family: Segoe, "Segoe UI", sans-serif
}
.FormContainer form {
display: table;
}
.FormContainer form div {
display: table-row;
}
.FormContainer form div label,
.FormContainer form div input {
display: table-cell;
margin: 5px 0px;
}
.FormContainer form div label {
vertical-align: middle;
padding-right: 10px;
}
.FormContainer form div input[type=text] {
min-width: 200px;
}
<body>
<div>
<p><font size="6"><u><strong>Search Users</strong></u></font></p>
<p>Search for...</p>
</div>
<div class="FormContainer">
<form action="SearchNewestUsers.php" method="post">
<div>
<label for="UserCount">Newest users</label>
<input type="text" name="UserCount" id="UserCount" placeholder="Enter number of users...">
<input type="submit" name="SearchButton" id="SearchButton" value="Search">
</div>
</form>
</div>
</body>
The snippet above produces the following output for me:
So the fault is with IE, and it doesn't seem to like the display: table-cell that you have. The solution I've found is to change to inline-block for the two inputs.
div,
a {
font-family: Segoe, "Segoe UI", sans-serif
}
.FormContainer form {
display: table;
}
.FormContainer form div {
display: table-row;
}
.FormContainer form div label,
.FormContainer form div input {
display: table-cell;
margin: 5px 0px;
}
.FormContainer form div input {
display: inline-block!important;
margin: 5px 0px;
}
.FormContainer form div label {
vertical-align: middle;
padding-right: 10px;
}
.FormContainer form div input[type=text] {
min-width: 200px;
}
<body>
<div>
<p><font size="6"><u><strong>Search Users</strong></u></font>
</p>
<p>Search for...</p>
</div>
<div class="FormContainer">
<form action="SearchNewestUsers.php" method="post">
<div>
<label for="UserCount">Newest users</label>
<input type="text" name="UserCount" id="UserCount" placeholder="Enter number of users...">
<input type="submit" name="SearchButton" id="SearchButton" value="Search">
</div>
</form>
</div>
</body>
Related
I am trying to emulate this website:
To do this I have the following html code:
<div class= "grid">
<div class= "contact" id= "title">
<h2 class= "heading font-x2"> Contact message </h2>
</div>
<div class= "contact">
<img src="01130_bigsurlighthouse_1920x1080.jpg" width="auto" height="200">
</div>
<div class="contact" id= "contact" style = "color: steelblue">
<p class = "contact">Here, the input field gets a color when it gets focus (clicked on):</p>
<form id = "">
<input type="text" id="fname" name="fname" placeholder="First Name">
</form>
<form id = "form">
<input type="text" id="lname" name="lname" placeholder="Last Name">
</form>
</form>
</div>
And my CSS file looks like this:
.contact {
color: black;
background: white;
font-family:Georgia, "Times New Roman", Times, serif;
}
.heading{margin-bottom:20px; font-size:4rem;}
#title{
grid-column: 1 / 3;
font-family:Georgia, "Times New Roman", Times, serif;
text-align: center;
}
.font-x2{font-size:1.6rem;}
#service{
color:green;
float:center; margin:0 0 20px 0;
display: inline-block;
border: 0px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#form {
border: 2px solid #ccc;
box-sizing: 203px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div:nth-child(even) {
background-color: red;
}
.grid div:nth-child(odd) {
background-color: green;
}
This produces a contactus page which looks like this:
I understand the color is not right to say the least. What I am wondering is how can i make the text field large in CSS stylesheet. As you can see they did not increase the font size to increase the size of the input field.
My second question is that I had to create 2 forms so have the input field stacked. Is there a way to stack the input field in CSS itself ?
Could you please advise how this can be accomplished?
You would like to use display: flex on container for right side to have children aligned vertically, and align-items: stretch helps to make them as wide as possible. I've also combined input and p under the form and fixed id (in css you were referencing non-existing #form id).
.contact {
color: black;
background: white;
font-family:Georgia, "Times New Roman", Times, serif;
}
.heading {
margin-bottom:20px; font-size:4rem;
}
#title {
grid-column: 1 / 3;
font-family:Georgia, "Times New Roman", Times, serif;
text-align: center;
}
.font-x2 {
font-size: 1.6rem;
}
#service{
color:green;
float:center; margin:0 0 20px 0;
display: inline-block;
border: 0px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#names {
display: flex;
flex-direction: column;
align-items: stretch;
}
#names > * {
padding: 0.5em;
margin: 0 1em 1em;
}
#names input {
font-size: 1.1em;
border: 0;
outline: 0;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div:nth-child(even) {
background-color: red;
}
.grid div:nth-child(odd) {
background-color: green;
}
<div class= "grid">
<div class= "contact" id= "title">
<h2 class= "heading font-x2"> Contact message </h2>
</div>
<div class="contact">
</div>
<div class="contact" id="contact" style="color: steelblue">
<form id="names">
<p class="contact">
Here, the input field gets a color when it gets focus (clicked on):
</p>
<input type="text" id="fname" name="fname" placeholder="First Name">
<input type="text" id="lname" name="lname" placeholder="Last Name">
</form>
</div>
</div>
Hey regarding you second question you can just put them inside one form. This comes handy in case you submit the form, as you have to submit only one and not multiple forms.
<form id = "contact-form">
<input type="text" id="fname" name="fname" placeholder="First Name">
<input type="text" id="lname" name="lname" placeholder="Last Name">
</form>
Then you can style the contact form in your css #contact-form in order to stack or put the forms in column. I would suggest display:block or display:flex + flex-direction: column (I prefer flex as it is more useful as you can also align-items where you want inside the div e.g align-items: center or use justify-content: space-between or space-around to play where your elements will be placed inside your div.
#contact-form {
display: flex;
flex-direction: column;
}
Now, back to your first question. To change the input size you can directly apply css to your input tags. Note that input can be of different type e.g text, email, password etc. In order to apply different style to different fonts you can access them input[text] on your css. You can also apply same style to all inputs by just selecting input on css. For instance you can try the following:
input[type="text"] {
font-size: 16px;
width=150px
height=20px
}
You can also specify the width and height in your input tag directly on your html file with inline style.
<input type="text" id="name" style="width: 200px; height: 40px">
You can define the size (i.e width) inside the input tag as below:
<input type="text" id="name" size="200">
In your input you can also define different constraints as well e.g minlength = minimum length allowed to that input field, or required so the filed will be required when you submit the form, etc...
Furthermore you can also use javascript to style the iinput if you are interested. Have a look https://www.techiedelight.com/set-width-input-textbox-html-css-javascript/
add this to your CSS to increase the font size of your input field
input {
font-size: 4em;
}
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
I have a responsive form element which is supposed to be inline with a title, like so:
which is fine in Firefox because this is what I'm looking for.
But when we see the same code in Chrome (edit, same results in Blisk, Yandex and maybe all webkit browsers, along with MS Edge and IE11), this is what I get:
The code:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: table-cell;
}
.field,
input {
width: 100%;
}
input,
.btn {
padding: 10px 16px;
box-sizing: border-box;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
Or, take a look at the code here (Codepen.io).
Does FF and Chrome handle the CSS differently? I feel that Chrome is showing the correct layout considering that the .field class has display: table-cell;, but I'm not sure about that. Is there a way to achieve what Firefox has shown in Chrome as well without removing the responsive nature of the input field?
Thanks.
Just remove the property: table-cell and make sure that everything is inline-block:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: inline-block; /* instead of table-cell > inline-block */
}
input,
.btn {
padding: 10px 16px;
}
SEE demo here: CODEPEN
There is no need to use table-cell just use float:left and remove the width from field class.
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
float: left;/* Use floating here */
}
.field,
input {
/*width: 100%;*/
}
input,
.btn {
padding: 10px 16px;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
I'm trying to get certain elements of this form to be displayed on the same line: I want the output of the form to be displayed on the same line as "Total: $ " - (I still want the price per lb ($1.00 in this example) to be displayed on the line above and the number spinner to be displayed to the right). I tried to wrap the whole thing in a <span> that I set the CSS of to be display:inline but it didn't work (& I've tried a few other things as well which also didn't work).
Here's a selection of my code:
HTML:
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant"><p><label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline"><p>Total:$<output name="amount" for="quantity"></output></p></span>
</form>
</div>
CSS:
legend { float: left;
margin-top: 35px;
padding-top: 20px;
margin-bottom: 5px;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
margin-top: 25px;
padding-bottom: 5px;
margin-bottom: 10px;
}
legend { float: left;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
}
form > * { border:1px solid red; line-height:2em }
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant">
<label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity">
</span>
<span>Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
Get rid of your p tags. Try not to use dispensable containers and classes. Your code would be more readable. You can change the line-height value of form > *
I have created 4 column grid in my html form. i want to have last label and textbox field to be align right side of the page.
I have tried using float:right property but it doesn't seem to work
In fiddle example it is not in single line.
.row {
margin: 10px;
}
.elements {
padding: 10px;
margin-left: 50px;
margin-top: 10px;
border-bottom: ridge;
border-bottom-color: #1f6a9a;
padding-left: 0;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
label {
display: inline-block;
}
input {
background-color: transparent;
border: 0px solid;
height: 25px;
width: 60px;
color: #b6d6ed;
text-align: center;
}
/* I Tried Below Line to Right Align */
.row > .elements:nth-child(2) {
float:right;
}
<div class="row">
<span class="elements">
<label class="field" for="Title">Title</label>
<input id="Title" name="Title" type="text">
</span>
<span class="elements">
<label class="field" for="DateOfBirth">Date of Birth</label>
<input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker">
</span>
</div>
jsfiddle
Float the first span to the left:
.row > .elements:first-child {
float: left;
}
See it here: http://jsfiddle.net/3DtqB/2/
You have to put the elements class into a <div class=".."></div> and add an CSS command
.elements {
float: right;
margin-top: -[x]px
}
Also you should use two id's instead of a class elements like left_box and right_box and add the commands to the right box.
Simple fix, just add white-space:nowrap; to the .elements class.