I'm wanting to create a form where the input and textarea elements fill the remaining space on the line but do not go to the next line. Here is my current (unworking) jsfiddle https://jsfiddle.net/xz7uq18j/1/
thanks for any help
code:
<div style="border: #000000 thin solid; text-align: left; padding: 10px; margin: 10px; width: 500px;">
Name: <input style="width: 100%"type="text" name="Name" value="Mr John Smith">
Address:<textarea style="width: 100%" name="Address" rows="6" cols="50">1 Road Street
Town
Postcode</textarea> <br>
Primary Phone:<input style="width: 100%" type="text" name="PrimaryPhone" value="***"><br>
Secondary Phone:<input style="width: 100%" type="text" name="SecondaryPhone" value="N/A"><br>
Email Address:<input style="width: 100%" type="text" name="EmailAddress" value="N/A"><br>
</div>
Wrap the two elements you want together on one line in a div, and make that div a flex-box, with the display:flex; property in CSS.
.one-line{
display:flex;
}
<div style="border: #000000 thin solid; text-align: left; padding: 10px; margin: 10px; width: 500px;">
<div class="one-line">
Name: <input style="width: 100%"type="text" name="Name" value="Mr John Smith">
Address:<textarea style="width: 100%" name="Address" rows="6" cols="50">1 Road Street
Town
Postcode</textarea>
</div> <br>
Primary Phone:<input style="width: 100%" type="text" name="PrimaryPhone" value="***"><br>
Secondary Phone:<input style="width: 100%" type="text" name="SecondaryPhone" value="N/A"><br>
Email Address:<input style="width: 100%" type="text" name="EmailAddress" value="N/A"><br>
</div>
Related
I have created a web form to allow users to fill in information about books they want to search. I just want to know how to automatically fit a text box into the form when I split my screen to the side of my laptop. On fullscreen it would fit just fine. For the details of Author's name, the text boxes should also be in a single line. But when i split screen, the boxes lump together. Is this a limitation in css?
Screenshot of web form in split screen
Screenshot of web form in fullscreen
<style>
#rcorners2 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 400px;
height: 5px;
}
</style>
<style>
#rcorners3 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 100px;
height: 5px;
}
</style>
<div class="column" style="background-color:#6EFFFF;">
<center>Enter Advanced Search Terms: </center><br>
<center> Keywords: <br>
<input type="text" id="rcorners2" name="keyword" size="50"><br />
Title Words: <br>
<input type="text" id="rcorners2" name="titlewords" size="50"><br />
<br>
<br>
Author's Name: <br></center>
<br>
<td>
<tr>
<center>
Last name
<input type="text" id="rcorners3" name="titlewords" size="10">
First name
<input type="text" id="rcorners3" name="titlewords" size="10">
Initial
<input type="text" id="rcorners3" name="titlewords" size="10">
<center>
</tr>
</td>
It seems that you are beginner in web development. I will suggest you to use percentage but not pixels for width. As you asked, that's not a limitation in css. The width will remain the same in any device or resolution from which you access the page. If you want to make your site responsive, use only percentage in width and pixels only in height.
Another suggestion : You're not needed to use two style elements. You can include both the classes in one style.
<style>
#rcorners2 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 100%;
height: 5px;
}
#rcorners3 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 100%;
height: 5px;
}
</style>
<div class="column" style="background-color:#6EFFFF;">
<center>Enter Advanced Search Terms: </center><br>
<center> Keywords: <br>
<input type="text" id="rcorners2" name="keyword"
size="50"><br />
Title Words: <br>
<input type="text" id="rcorners2" name="titlewords"
size="50"><br />
<br>
<br>
Author's Name: <br></center>
<br>
<td>
<tr>
<center>
Last name
<input type="text" id="rcorners3" name="titlewords"
size="10">
First name
<input type="text" id="rcorners3" name="titlewords"
size="10">
Initial
<input type="text" id="rcorners3" name="titlewords"
size="10">
<center>
</tr>
</td>
I hope this will help you.
This isn't a limitation of css per say. You have not given your HTML enough structure or css to properly format the inputs as the size changes.
There are a lot of ways to tackle this. Is this for a homework assignment?
In your css you are setting a static size which will overflow the container that is housing the input field. If you change that to a percentage it will go a long way.
width: 80%;
I would suggest spending some time over at w3 or some other website and learn a little about responsive layouts.
https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/html/html_responsive.asp
Try This:
#rcorners2 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 90%;
height: 5px;
}
#rcorners3 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 25%;
height: 5px;
}
<div class="column" style="background-color:#6EFFFF;">
<center>Enter Advanced Search Terms: </center><br>
<center> Keywords: <br>
<input type="text" id="rcorners2" name="keyword" size="50"><br />
Title Words: <br>
<input type="text" id="rcorners2" name="titlewords" size="50"><br />
<br>
<br>
Author's Name: <br></center>
<br>
<td>
<tr>
<center>
Last name
<input type="text" id="rcorners3" name="titlewords" size="10">
First name
<input type="text" id="rcorners3" name="titlewords" size="10">
Initial
<input type="text" id="rcorners3" name="titlewords" size="10">
</center>
</tr>
</td>
</div>
I am trying to align 2 divs horizontally inside one div.
Here is codepen link Check Here. When I add margin-top to left div it is not moving up.
What am I doing wrong?
<footer id="contact">
<div class="reservation" style="display: block;border:1px solid red; ">
<div class="reserve-address-div" style="display: inline-block;width:45%;border:1px solid red;margin-top:-40px;">
<h4>51 Area, Barmuda Triangle, Mars</h4>
<h4>0165466546</h4>
<h4>vivek.tarun17#gmail.com</h4>
</div>
<div class="reserve-booking-div" style="display: inline-block; width:45%;border:1px solid red; ">
<form>
<input type="text" name="name" placeholder="Name" /><br>
<input type="email" name="email" placeholder="Email"/><br>
<input type="text" name="subject" placeholder="Subject"/><br>
<textarea placeholder="message" rows="5"></textarea><br>
<input type="button" value="Submit">
</form>
</div>
</div>
</footer>
Please try to use vertical-align: top something like this:
<div class="reservation">
<div class="reserve-address-div" style="display: inline-block; ... vertical-align:top">
...
</div>
<div class="reserve-booking-div" style="display: inline-block; ... vertical-align:top">
...
vertical-align property is useful.
You can put inline-blocks along with the top of parent element, e.g., div.
The reason .reserve-address-div is being pushed down is because the default vertical-align value is set to baseline. As another poster mentioned, setting the vertical-align property to top for .reserve-address-div will remove the space above that div.
You can read more about the issue here.
An alternate solution would be to use flexbox on the .reservation container, as I've demonstrated in the snippet below.
Hope this helps!
.reservation {
border: 1px solid red;
display: flex;
align-content: center;
justify-content: center;
width: 100%;
}
.reserve-address-div {
display: inline-block;
width: 45%;
border: 1px solid red;
}
.reserve-booking-div {
display: inline-block;
width: 45%;
border: 1px solid red;
}
<footer id="contact">
<div class="reservation">
<div class="reserve-address-div">
<h4>51 Area, Barmuda Triangle, Mars</h4>
<h4>0165466546</h4>
<h4>vivek.tarun17#gmail.com</h4>
</div>
<div class="reserve-booking-div">
<form>
<input type="text" name="name" placeholder="Name" /><br>
<input type="email" name="email" placeholder="Email" /><br>
<input type="text" name="subject" placeholder="Subject" /><br>
<textarea placeholder="message" rows="5"></textarea><br>
<input type="button" value="Submit">
</form>
</div>
</div>
</footer>
How about the Flexbox solution:
.reservation {
display: flex;
padding: 2.5px;
border: 1px solid red;
}
.reserve-address-div, .reserve-booking-div {
flex: 1;
margin: 2.5px;
padding: 5px;
border: 1px solid red;
}
<footer id="contact">
<div class="reservation">
<div class="reserve-address-div">
<h4>51 Area, Barmuda Triangle, Mars</h4>
<h4>0165466546</h4>
<h4>vivek.tarun17#gmail.com</h4>
</div>
<div class="reserve-booking-div">
<form>
<input type="text" name="name" placeholder="Name"><br>
<input type="email" name="email" placeholder="Email"><br>
<input type="text" name="subject" placeholder="Subject"><br>
<textarea placeholder="message" rows="5"></textarea><br>
<input type="button" value="Submit">
</form>
</div>
</div>
</footer>
Adjust margins and padding to your needs.
So, I've got a requirement to have two forms in a dialog, where there are four sections.
I'll attach an image.
I want the first form to contain the orange blocks, and the second form to contain only the green block.
Is there any way to achieve this?
Forms are natively blocks, so that means that if I try, the green block will be put below the bottom-left block, which is now what I want.
In short
.outer {
width: 224px;
}
.inset {
float: left;
margin: 6px;
padding: 6px;
background-color: green;
width: 200px;
}
.outset {
float: left;
margin: 6px;
padding: 6px;
background-color: orange;
width: 200px;
}
<div class="outer" style="width:448px;">
<form action="login.php" method="post">
<div class="outer" style="float: left;">
<div class="outset" style="height: 100px;">Top Left
<input type="text" name="user">
</div>
<div class="outset" style="height: 50px;">Bottom Left
<input type="password" name="password">
</div>
</div>
<div class="outer" style="float: left;">
<div class="outset" style="height: 50px;">Top Right
<input type="submit" value="Login">
</div>
</div>
</form>
<form action="register.php" method="post">
<div class="inset" style="height: 100px;">Bottom right
<input type="text" name="user">
<input type="password" name="password">
<input type="submit" value="Register">
</div>
</form>
</div>
I made a form with Bootstrap 3 and I would like to set the same width to all the labels.
From this:
To this:
I made a fiddle for this: http://jsfiddle.net/52VtD/4262/
<form id="create_new_campaign" name="create_new_campaign" action="kampagnen.php" method="post" enctype="multipart/form-data">
<div class="input-group">
<span class="input-group-addon">Kennzeichen</span>
<input type="text" class="form-control" placeholder="Kennzeichen" name="data[kennzeichen]" id="kennzeichen">
</div>
...
</form>
This should do the trick:
.input-group{
width: 100%;
}
.input-group-addon{
width: 45%;
text-align: left;
}
.form-control {
width: 55%;
}
Here's the forked fiddle:
http://jsfiddle.net/6K8sF/
<form id="create_new_campaign" name="create_new_campaign" action="kampagnen.php" method="post" enctype="multipart/form-data">
<div class="input-group" style="width: 100%;">
<span class="input-group-addon"style="width: 35.1%;">Kennzeichen</span>
<input type="text" class="form-control" placeholder="Kennzeichen" name="data[kennzeichen]" id="kennzeichen">
</div>
<div class="input-group"style="width: 100%;">
<span class="input-group-addon" style="width: 35.1%;">von</span>
<input type="text" class="form-control span2" id="von">
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-addon" style="width: 35.1%;">bis</span>
<input type="text" class="form-control span2" id="bis">
</div>
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-addon" style="width: 35.1%;">Verantwortlicher Produktmanager</span>
<input type="text" class="form-control" placeholder="Produktmanager" name="data[prod_manager]" id="prod_manager">
</div>
<div class="input-group"style="width: 100%;">
<span class="input-group-addon" style="width: 35.1%;">Verantwortlicher Fachbereich</span>
<input type="text" class="form-control" placeholder="Fachbereich" name="data[fachbereich]" id="fachbereich">
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-addon" style="width: 35.1%;">Ansprechpartner Fachbereich</span>
<input type="text" class="form-control" placeholder="AnsprechpartnerFachbereich" name="data[ap_fachbereich]" id="ap_fachbereich">
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-addon" style="width: 35.1%;">Ansprechpartner Vertrieb</span>
<input type="text" class="form-control" placeholder="AnsprechpartnerVertrieb" name="data[ap_vertrieb]" id="ap_vertrieb">
</div>
<div class="input-group" align="center" style="width: 100%;">
<br />
<button type="submit" class="btn btn-primary">Speichern</button>
<input type="reset" value="Reset" class="btn btn-warning">
</div>
</form>
http://jsfiddle.net/52VtD/4264/
their are two ways to set all the labels of same size.
DEMO
1) CSS
.input-group-addon {
width: 253px;
}
But if the label value text is increase or decrease dynamically, you need to fixed this issue using jQuery.
DEMO
2) jQuery
var max = 0;
$(".input-group-addon").each(function(){
if ($(this).width() > max)
max = $(this).width();
});
$(".input-group-addon").width(max);
This is the example I did:
<span class="input-group-addon" style="width: 20%;">Last Name</span>
<input id="lname" type="text" class="form-control input-lg" name="lname" placeholder="Last Name">
I did not alter or made customization on the bootstraps' classes because it affects globally. I hate to see my login page with the same width I stated in the emplyee entry module.
Alright, this is ages old but I still stumbled upon this same problem. Instead of giving it a non-dynamic width I wanted to actually make it "proper" and adjust to the width of the given content.
While I don't know if this goes against the intended use-cases of Bootstrap, I did achieve dynamic behavior through the use of a grid in which I define two columns - one for the label (width of content) and the other for the input (remaining width).
HTML:
<div class="input-group grid-container">
<span class="input-group-text">Your Name</span>
<input type="text" class="form-control" name="name" placeholder="Kimi No Na Wa">
<span class="input-group-text">Your Age</span>
<input type="text" class="form-control" name="age" placeholder="42">
<span class="input-group-text">Your Unnecessarily Long Label That Still Fits Inside Here</span>
<input type="text" class="form-control" name="wow" placeholder="Yay">
</div>
CSS:
.grid-container {
display: grid;
width: 100%;
grid-template-columns: max-content 1fr;
}
.grid-container .form-control {
width: 100%;
}
Here's my fiddle: https://jsfiddle.net/r8jm7Lqu/
try this:
.input-group>.input-group-prepend {
flex: 0 0 20%;
}
.input-group .input-group-text {
width: 100%;
}
I found this solution at this site, and totally works for me:
bootstrap-4-input_group-prepend-equal-width
I have 2 DIVs. Something like below:
<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
<div class="leftcolumn">
<div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
<div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
</div>
<div class="rightcolumn">
<div>
<label style="text-align: right;">Owner:</label>
<input type="text" name="owner" id="owner" style="width: 100px;">
</div>
<div>
<label style="text-align: right;">Estimate:</label>
<input type="text" name="estimate" id="estimate" style="width: 100px;">
</div>
</div>
</div>
And then css I am using is given below:
.leftcolumn { width: auto; border: 1px solid red; float: left}
.rightcolumn { width: 200px; border: 1px solid red; float: right}
Given below a screenshot for the issue I'm facing:
change css to:
.leftcolumn { width: auto; border: 1px solid red; margin-right: 204px;}
.rightcolumn { width: 200px; border: 1px solid red; float: right}
and replace right and left in html:
<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
<div class="rightcolumn">
<div>
<label style="text-align: right;">Owner:</label>
<input type="text" name="owner" id="owner" style="width: 100px;">
</div>
<div>
<label style="text-align: right;">Estimate:</label>
<input type="text" name="estimate" id="estimate" style="width: 100px;">
</div>
</div>
<div class="leftcolumn">
<div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
<div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
</div>
</div>
SEE FIDDLE
Instead of using a float for the left column, why not set the right margin to 200px (or 210px if you want some spacing);
.leftcolumn { margin-right: 210px; border: 1px solid red}
This will allow the right column to float into place within the margin.
You will also need to reverse the order of the divs in your html. You want the right column to come before the left. This will give you the fluid layout you want regardless of the width of "myForm".