I have this HTML:
<form role="search" method="get" id="bbp-search-form" action="https://www.publictalksoftware.co.uk/support-forums/search/">
<div>
<label class="screen-reader-text hidden" for="bbp_search">Search for:</label>
<input type="hidden" name="action" value="bbp-search-request">
<input tabindex="101" type="text" value="" name="bbp_search" id="bbp_search">
<input tabindex="102" class="button" type="submit" id="bbp_search_submit" value="Search">
</div>
<div class="gdpos-power-link">
Advanced Search
</div>
</form>
At the moment it looks like this:
What I wanted to try and do is move the button to the right and expand the input to fill the space.
I tried using float:right; with the button and it does indeed move to the right.
I then tried applying a width: 100%; to the input but it expands to the very right edge and pushing the button down underneath it.
Is it not possible to do what I what? I am not able to change the HTML at this stage and hope to do what I want via CSS adjustments.
Update
When I try this addition CSS:
#bbp-search-form > div {
display: flex;
}
#bbp-search-form > div input {
flex: 1;
}
I end up with:
Update
I tried:
#bbp-search-form > div:first-child {
display: flex;
}
#bbp-search-form > div:first-child input {
flex: 1;
}
Doesn't seem to work.
Use flex box with flex-grow
.my-row {
display: flex;
}
.my-row input {
flex: 1;
}
<h1>Test</h1>
<div class="my-row">
<input type="text" />
<button>Search</button>
</div>
With your code
#bbp-search-form > div:first-child {
display: flex;
}
input[name="bbp_search"] {
flex: 1;
}
<form role="search" method="get" id="bbp-search-form" action="https://www.publictalksoftware.co.uk/support-forums/search/">
<div>
<label class="screen-reader-text hidden" for="bbp_search">Search for:</label>
<input type="hidden" name="action" value="bbp-search-request">
<input tabindex="101" type="text" value="" name="bbp_search" id="bbp_search">
<input tabindex="102" class="button" type="submit" id="bbp_search_submit" value="Search">
</div>
<div class="gdpos-power-link">
Advanced Search
</div>
</form>
Update
I found this to be the simplest CSS to use:
#bbp-search-form > div:first-of-type { display: flex; }
#bbp-search-form #bbp_search { flex: 1; margin-right: 5px; }
#bbp-search-form #bbp_search_submit { margin-top: 0px; margin-bottom: 0px; }
Related
I want to put the button inline with the label and bellow them to have the full width input.
What I've made is this:
<div class="container">
<label>Tralala</label>
<input type="text" placeholder="Tralalala">
<button type="tooltip" data="This is tralalala">This is tralalala</button>
</div>
<div class="container">
<label>Tralala Tralalala Tralalala</label>
<input type="text" placeholder="Tralala Tralalala Tralalala">
<button type="tooltip" data="This is Tralala Tralalala Tralalala">This is Tralala Tralalala Tralalala</button>
</div>
So there is no posibility for me to put the button inside the label and I have to use CSS to make it.
My CSS looks like this:
.container {
display: flex;
flex-direction: column;
}
.container label { order: 0 }
.container input { order: 2 }
.container button {oder: 1 }
But from here, I don't know how to bring the label and button inline
Like this:
Change the flex-direction to row and allow wrapping.
Change the order so the inputcomes after the other elements and then make it 100% wide.
.container {
display: flex;
flex-wrap: wrap;
margin: 1em;
border: 1px solid green;
padding: 1em;
}
button {
margin-left: 1em;
}
input {
order: 2;
flex: 0 0 100%;
margin-top: 1em;
}
<div class="container">
<label>Tralala</label>
<input type="text" placeholder="Tralalala">
<button type="tooltip" data="This is tralalala">This is tralalala</button>
</div>
<div class="container">
<label>Tralala Tralalala Tralalala</label>
<input type="text" placeholder="Tralala Tralalala Tralalala">
<button type="tooltip" data="This is Tralala Tralalala Tralalala">This is Tralala Tralalala Tralalala</button>
</div>
I currently have the two following forms.
form {
text-align: center;
width: 100%;
}
<form>
<input type="text" name="email">
<input type="submit" value="Submit">
</form>
And
input[type=text] {
width: 80%;
padding: 1vh;
}
<form>
<p>First Name:</p>
<input type="text" name="firstname"><br>
</form>
How can I have different rules for each form? The first one needs the contents centre aligned and the second needs the contents aligned left/padded left.
If I change the css for either the alignment and size change.
Thanks in advance.
I've updated the form, how can I have it so that the text input is only styled for the left form? I don't want any text input rules on the center one.
.form-container {
background-color: #ff8e08;
width: 90%;
margin: auto;
}
.center-form {
text-align: center;
width: 100%;
}
.left-form {
text-align: left;
margin-left: 2vh;
}
input[type=text] {
width: 80%;
}
input[type="text"] {
padding: 1vh;
}
<div class="applicationform">
<br>
<form class="left-form">
<p>First Name:</p>
<input type="text" name="firstname">
</form>
</div>
</div>
<br>
<form class= "center-form">
<input type="text" name="email">
<input type="submit" value="Submit">
</form>
Add different class names for them.
CSS:
.center-form {
/* center-form specific rules here */
}
.left-form {
/* left-form specific rules here */
}
HTML:
<form class="center-form">
<input type="text" name="email">
<input type="submit" value="Submit">
</form>
<form class="left-form">
<p>First Name:</p>
<input type="text" name="firstname"><br>
</form>
And if you want to share some of the CSS rules that they both need:
.form {
/* shared CSS rules */
}
Then, add this form class name to both of them in the HTML like this:
<form class="form center-form">
<input type="text" name="email">
<input type="submit" value="Submit">
</form>
<form class="form left-form">
<p>First Name:</p>
<input type="text" name="firstname"><br>
</form>
Remeber, override class names like center-form and left-form should come after this formutility class name.
For your particular case, change your CSS to:
body {
margin: 0; /* Remove user agent default styles */
}
.center-form {
text-align: center;
width: 100%;
}
.left-form {
text-align: left;
margin-left: 2vh;
}
input[type=text] {
width: 80%;
}
input[type="text"] {
padding: 10px;
}
I have lots of content on my page, along with a form that shows when a user clicks the button. I can center the form using flexbox like so:
.container-column {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
This centers the form, but the problem with this approach is it pushes the rest of my content down, which is visually unappealing. I tried to add a z-index of 999 but this doesn't work. I also used position:absolute but this just stacks the form on top left.
Is there a simple way to place the form in the middle of the page, while leaving the rest of the content as is? I am ok with the form overlaying the rest of the content.
Update 1 Upon request, here is the relevant code:
Form:
return (
<form className="container-column">
<div className="icon ion-ios-close-empty close-btn" onClick={() => this.props.signupBtnClick('close')}></div>
<input type="text" name="firstname" placeholder="firstname" className="form-element"></input>
<input type="text" name="lastname" placeholder="lastname" className="form-element"></input>
<input type="text" name="username" placeholder="username" className="form-element"></input>
<input type="password" placeholder="password" className="form-element"></input>
<input type="password" placeholder="repeat password" className="form-element"></input>
<input type="email" name="email" placeholder="email" className="form-element"></input>
<input type="submit" value="submit" className="form-element btn-form2"></input>
</form>
)
Form is a react component which is used in the index page as follows:
return (
<div>
<section className="section-header">
<div className="container-row signup-login-btns">
<button className="btn btn-form1" onClick={() => this.renderLoginForm()}>Login</button>
<button className="btn btn-form2" onClick={() => this.renderSignupForm()}>Signup</button>
</div>
{this.state.showSignupForm ? <SignupForm signupBtnClick={(type) => this.onSignupClick(type)} />: null }
**other content, which gets pushed down once the form is shown**
The relevant css classes:
.form-element {
border:none;
align-content:center;
text-align:center;
outline:none;
width: 400px;
height: 45px;
margin: 10px;
color: #7f8c8d;
font-size:120%;
border-radius:10px;
}
.section-header {
background: #d53369;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #d53369, #cbad6d);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #d53369, #cbad6d);
margin-top:0px;
padding-top:0px;
padding-bottom:5%;
}
Try this:
body {
position: relative;
}
.container-column {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
For details about this centering method see: Element will not stay centered, especially when re-sizing screen
I'm creating a form and I have several input boxes on the same line.
I'd like to have the email input to take one line. The date, time, and number inputs to take another line. However, I'm not sure how to get the date/time/number inputs to span exactly 100% of the width of the form.
The percentages I have now in the CSS are estimates, so the edge of the number box doesn't vertically align with the email input box.
input[type=email] {
width: 100%;
}
input[type=date] {
width: 22%;
margin-right: 15px;
}
input[type=time] {
margin-right: 15px;
}
input[type=number] {
width: 11.4%
}
<form>
Email: <input type="email"><br>
Date: <input type="date">
Time: <input type="time">
Number in Party: <input type="number">
</form>
I would do it using flex, Here's a working example
I wrapped each line on a div, like this:
<form>
<div>Email: <input type="email"></div>
<div>
<div>Date: <input type="date"></div>
<div>Time: <input type="time"></div>
<div>Number in Party: <input type="number"></div>
</div>
</form>
css
form{
display: flex;
flex-direction: column;
}
form>div{
display: flex;
}
form>div input{
flex-grow: 1;
}
form>div>div{
display: flex;
flex-grow: 1;
}
You can use <label> to give yourself some explicit control the width, padding & margin of the form field labels.
Example:
label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}
label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}
input {
width: 80%;
}
input:nth-of-type(n+2) {
width: 13%;
}
<form>
<label for="email">Email:</label><input type="email" name="email" id="email"><br />
<label for="date">Date:</label><input type="date" name="date" id="date">
<label for="time">Time:</label><input type="time" name="time" id="time">
<label for="number">Number in Party:</label><input type="number" name="number" id="number">
</form>
input[type=email] {
width: 100%;
}
input[type=date] {
width: 21%;
}
input[type=time] {
width: 21%;
margin-right:42px;
}
input[type=number] {
width: 20.9%;
}
<form>
Email: <input type="email"><br><br>
Date : <input type="date">
Time : <input type="time">
Number in Party : <input type="number">
</form>
i have the following layout for a search box with:
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<div id="scope"> Person Name </div>
<input type="text" id="theq" title="Search">
<button id="btnSearch" type="button">Search</button>
</div>
</form>
</div>
(its very much simplified for showing purposes)
The title in the 'scope' is a text that can be variable in length
What i will like is to have the input text element to fill all available space (i.e. yellow space), while keeping the search button at the right.
Full example with the CSS is in a fiddle
Which would be the easiest way to accomplish a solution working in IE7+,FF,Safari,etc... ?
Thanks!
Like this?
DEMO: http://jsfiddle.net/v7YTT/19/
HTML:
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<button id="btnSearch">Search</button>
<label id="scope"> Person Name </label>
<span><input type="text" id="theq" title="Search" /></span>
</div>
</form>
</div>
CSS:
#qsrxSearchbar
{
width: 500px;
height: 100px;
overflow: hidden;
background-color: yellow;
}
#qsrxSearchbar input
{
width: 100%
}
#qsrxSearchbar label
{
float: left
}
#qsrxSearchbar span
{
display: block;
overflow: hidden;
padding: 0 5px
}
#qsrxSearchbar button
{
float: right
}
#qsrxSearchbar input, .formLine button
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
hey you can used focus properties in input field as like this
Css
#emulating_variable_width{
width:500px;
height:100px;
background-color:yellow;
}
input {
width:auto;
/*width:100%;*/
float:left;
width:100px;
font-size: 17px;
}
#scope{float:left;}
button{float:left;}
input:focus{
width:200px;
}
HTML
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<div id="scope"> Person Name </div>
<input type="text" id="theq" title="Search">
<button id="btnSearch" type="button">Search</button>
</div>
</form>
</div>
Live demo http://jsfiddle.net/rohitazad/v7YTT/1/
You need something like this:
#emulating_variable_width{
width:500px;
height:100px;
background-color:yellow;
}
input {
width:320px;
/*width:100%;*/
float:left;
font-size: 17px;
}
#scope{float:left;}
button{float:left;}