I'm trying to modify a search box to have it to be centered and stretch until a max wdth while I the browser window.
I'm not good at coding, but I tried to modify the ccs. Now it is centered in the container but it doesn't stretch to a max width (like 400px or so) Actual css of the containervis:
.jr-form-adv-search-module {
margin: auto;
margin-top:10px;
width:50% ;
}
the search module has a search box and a button.
.jrKeywords
.jrButton
I want the button to stay the same witdh but the search box (the text input part) to stretch until it reaches 400px while I resize the window. Now only the container ".jr-form-adv-search-module" follows the window while .jrKeywords stays small. I tried a lot of combinations but I can't get it to stretch.
Search box
This is the search bar. To resume I want the white text input to stretch until 400px while the search button and him stays centered. At the moment only the gray container follows the window.
This is the searchbox code
<div class="jr-page jrPage jrAdvSearchModule jrRoundedPanel jrForm">
<form class="jr-form-adv-search-module" action="/wp-admin/admin-ajax.php?action=jreviews_ajax" method="post" data-live-search="1" data-live-search-hide="1" data-module-id="jreviewsadvsearchwidget-2">
<div class="jrFieldDiv jrLeft" style="">
<input type="text" class="jrKeywords" name="data[keywords]" value="" style="height:37px;">
</div>
<div class="jrFieldDiv jrLeft">
<button class="jr-search jrButton" style="margin:0; font-size:120%; background: #289dcc;color:#ffffff; border-color:#289dcc;">
<span class="jrIconSearch"></span><span>Search</span>
</button>
</div>
<div class="jrClear"></div>
<input name="data[contentoptions][]" type="hidden" value="title">
<input name="data[contentoptions][]" type="hidden" value="introtext">
<input name="data[contentoptions][]" type="hidden" value="fulltext">
<input name="data[search_query_type]" type="hidden" value="all">
<input type="hidden" name="data[controller]" value="search">
<input type="hidden" name="data[action]" value="_process">
<input type="hidden" name="data[menu_id]" value="">
<input type="hidden" name="data[dir]" value="">
<input type="hidden" name="data[Search][criteria_id]" value="1">
<input type="hidden" name="data[form_id]" value="JreviewsAdvSearch_jreviewsadvsearchwidget-2">
<input type="hidden" name="data[module_id]" value="jreviewsadvsearchwidget-2">
</form>
<div class="jrClear"></div>
<input name="data[contentoptions][]" type="hidden" value="title">
<input name="data[contentoptions][]" type="hidden" value="introtext">
<input name="data[contentoptions][]" type="hidden" value="fulltext">
<input name="data[search_query_type]" type="hidden" value="all">
<input type="hidden" name="data[controller]" value="search">
<input type="hidden" name="data[action]" value="_process">
<input type="hidden" name="data[menu_id]" value="">
<input type="hidden" name="data[dir]" value="">
<input type="hidden" name="data[Search][criteria_id]" value="1">
<input type="hidden" name="data[form_id]" value="JreviewsAdvSearch_jreviewsadvsearchwidget-2">
<input type="hidden" name="data[module_id]" value="jreviewsadvsearchwidget-2">
I'm using the possibility of my wordpress theme to add custom css to modify the search box behaviour. This is what I've added so far:
.jr-form-adv-search-module {
margin: auto;
margin-top:10px;
width:50% ;
}
You can use the max-width property.
Give a class to the input parent, let's say input-container. You can use these rules:
.input-container {
max-width: 400px;
width: 100%;
}
With this, the div will try to fill all the space in width, but il will stop growing when it reaches the maximum width of 400px. And when you resize the page below 400px, the div will take 100% width.
Try the following code.
.jr-form-adv-search-module {
margin: auto;
margin-top:10px;
width: 100%;
display: table;
}
Related
I am trying to put few form, near to each other at bottom of the page.
Try to do that with css, but nothing work.
This is the css:
#Dcustomer,#Dorder,#admin{
text-align:inline-block;
}
#Uadmin,#Uorder,#Ucustomer,#add
{
float:right;
vertical-align:10px;
}
This is example for the one of the form:
<form action="AdminControl.php" id="Uorder" method="POST">
<h3><b><u>Update Order</b></u> </h3><br>
Order Number: <input type="text" name="Onumber"><br><br>
Product Name: <input type="text" name="product_name"><br><br>
Customer Name: <input type="text" name="name"><br><br>
Customer Number: <input type="text" name="Cnumber"><br><br>
E-mail: <input type="text" name="email"><br><br>
Phone Number: <input type="text" name="phone"><br><br>
Quantity: <input type="text" name="quantity"><br><br>
<input type="submit" name="updateorder" value="Update">
</form>
Every screen may not be able to fit all in one line
So just float right or left every form (and reduce width if you want)
Link to example https://jsfiddle.net/vko4om7o/7/
form {
float: right;
vertical-align: 10px;
width: 25%;
}
Increase size of frame for better visibility
As I said in the comment you have syntax error in your css file.
You have to change text-align to display because text-align takes only left, right, center values.
I have two HTML forms. I want the second one to align to the right of the first one (not below it).
I fiddled (no pun intended) with "display: inline-block;"
The pertinent CSS:
.form {
display: inline-block;
}
The pertinent HTML:
<form>
<label class="firstblocklabel">Traveler's name:</label>
<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
</br>
. . .
</form>
<form>
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
</br>
</form>
The whole shebang can be seen here.
Is the solution to place the two forms in a table, or is there a more elegant element solution?
Use float...
form {
float: left
}
Stick a float:right on the 2nd form to align it to the right side.
When you use inline-block a width must be defined as inline just say to browser that you don't want to jump to the next line.
a best practice is to have a container then for each element you want side-by-side you put a percent value corresponding to 100% divided by the number of columns. Example : 100% / 2 columns make columns of 50% each; 100% / 4 columns would make 25% each; etc.
make sure that you columns have padding/margin/border to 0 as it wouldn't work otherwise and if you need padding, place it in a child element inside the column element.
everythings is better with examples so here it is :
input{
width: 100%;
margin: 5px 0 0 -2px;
}
form{
/* we can add geometry to our form */
border: 4px solid #ddd;
margin: 6px;
padding: 10px;
}
.container{
padding: 0;
}
.col{
vertical-align: top;
display: inline-block;
padding: 0;
margin: 0;
border: none;
}
.col:hover{
/* just to see it */
box-shadow: 0 0 2px 0px red;
}
.col-half{
width: 50%;
}
.col-quater{
width: 25%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>example 1</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Some form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Another form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
<h1>example 2</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>1/2 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>Another 1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
</body>
</html>
Bonus:
Usually, frameworks works on a grid system : If we take bootstrap as an example, they work on a 12 col grid. meaning that if you use the class col-6 6 being half of 12 you get 50% width, and there goes for all other sizes. 12 is very flexible, the more cols your grid have, the more possibility it have (and the more css you must write) in my example, I made a gird of 4. we could rename col-half for col-2 and col-quater for col-1 so that makes sense as a grid system
First of all, you accidently used a .form class instead of using form for your selector.
Second, adding vertical-align: top to your form selector will allow it to align to the right of your first form as long as there is space.
form {
display: inline-block;
vertical-align:top;
}
However, if your view is too narrow it will slide underneath anyways.
You added a . (.form) means class selection but your html tag doesn't contain a class
So remove the . should make your form work correctly.
form {
vertical-align:top;
display:inline-block;
}
Try this :
form {
display: inline-block;
vertical-align:top; // Added
}
What about using Bootstrap and their helper classes to accomplish this? Especially if you already have Bootstrap loaded? Could use their grid to accomplish a 2 column layout.
I have a <div> with display: inline; property and I want to center it.
If I put margin: 0 auto works without display but I need the display not to take all the space like it's a block.
Html
<div id="login1">
<fieldset id="login2">
<form method="post" action="register.php">
<label>Nombre: </label>
<input type="text" name="nombre" placeholder="Nombre de usuario"><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Password"><br>
<input type="submit" value="LogIn">
<input type="reset" value="Reset">
</form>
</fieldset>
</div>
Css
#login1 {
display: inline-block;
text-align: center;
}
I want to center all the <div>
Some idea?
Put text-align: center on the container (the element that contains your div).
And your div shall be centered.
I have a form with hidden input fields. In IE7 the layout gets shifted. The submit button is in the next line. If you select the space in between it seems there each hidden input is a blank. What can I do against this? Here is the jsfiddle.
HTML:
<div id="column1">
<div id="searchform">
<form action="/index.php?id=17" method="post" name="searchform01">
<input type="text" name="tx_indexedsearch[sword]" value="Suchbegriff" class="searchform-input" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="hidden" name="tx_indexedsearch[_sections]" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[_freeIndexUid]" id="tx_indexedsearch_freeIndexUid" class="hidden-inputs" value="_" />
<input type="hidden" name="tx_indexedsearch[pointer]" id="tx_indexedsearch_pointer" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[ext]" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[type]" class="hidden-inputs" value="1" />
<input type="hidden" name="tx_indexedsearch[defOp]" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[media]" class="hidden-inputs" value="-1" />
<input type="hidden" name="tx_indexedsearch[order]" class="hidden-inputs" value="rank_flag" />
<input type="hidden" name="tx_indexedsearch[group]" class="hidden-inputs" value="flat" />
<input type="hidden" name="tx_indexedsearch[lang]" class="hidden-inputs" value="-1" />
<input type="hidden" name="tx_indexedsearch[desc]" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[results]" class="hidden-inputs" value="10" />
<input type="submit" id="search-button" value="Suchen" />
</form>
</div>
</div>
CSS:
.hidden-inputs {
display: none;
visibility: hidden;
border: 0;
margin: 0;
padding: 0;
width: 0;
height: 0;
clear: left;
margin-left: inherit;
overflow: hidden;
}
#column1 {
width: 245px;
float: left;
background-color: #FFFFFF;
}
It is caused by empty text between input.hidden-inputs. You can fix it either by removing empty text between inputs or by setting font-size:0; for form element.
Examples:
font-size fix: http://jsfiddle.net/6fTHs/
Removing empty text: http://jsfiddle.net/keaukraine/BE7sV/
The only way i know of to prevent it is to not have the hidden element in the dom.
If the "Value I want hidden" part is used purely for computational purposes, you should use the "data" attribute.
Like this
<div data-custom-value="1001">Visible value </div>
In jQuery, HTML data attributes are automatically available via the data() api.
You can do
someElement.data('customValue') to read a value.
and
someElement.data('customValue', newValue) to set a value.
Hope I analyzed your problem correctly.
The simplest fix is probably a kludge like
form { word-spacing: -0.23em }
which reduces spacing between words inside the form by about the width of a space, or a little less. There are no words there, but IE 7 thinks there are – invisible words created by the hidden fields, separated by spaces.
A more robust solution is to remove the spaces around and between the hidden fields, as suggested by #keaukraine.
I have a form. The form contains a text field inside of a div. The button follows the div that contains the text field. By default, the button appears on the next line after the text field. I want to get the button on the same line as the text field.
Initially I floated the div containing the field and the button both to the left, and this worked. However, when I added a fixed width to my left column div (a div that contains everything on the left side of my page, including the aforementioned form) the button went to the next line again.
Why is this? How can I get the button back on the same line as the field?
Here's my form:
<div class="topic_form" style="display: block; ">
<form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M=">
</div>
<div class="field">
<input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<input id="topic_submit" name="commit" type="submit" value="Add Topic">
</form>
</div>
I float div.field and input#topic_submit to the left, but this no longer works after adding a fixed width to my left column div.
Here is the working code...
<div class="topic_form" style="display: block; ">
<form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M=">
</div>
<div class="field" style="width:200px;float:left;">
<input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<input id="topic_submit" name="commit" type="submit" value="Add Topic">
</form>
</div>
I have added the following line in .field
style="width:200px;float:left;"
If you doesn't add the width of the div it would be 100%.so anything added after that comes in second line.You have to set the width of the div to make it work...
Hope this helps!!!
They are appearing on separate lines because the DIV wrapping your text field is a block element. If you change it to an inline element they should appear on the same line.
.field { display: inline; }