Inputs alignment inside container
Question
I have such an issue: There are two inputs in the container: the text field and the submit button. The problem is that when the text is changed by the locale (For example from English to French), the button gets stratched and overlaps the text field. Here are the examples:
English:
French:
Is there any way, so the length of the search field will fit the container automatically?
The code for this container is like that:
<div id="searchContainer">
<input type="text" id="searchField" class="search" name="searchQ" />
<?php echo $this->searchButton; ?>
</div>
3 answers
solution1
1 2013-04-12 12:53:39
I had a similar issue when styling a multi-lingual form myself, and while I never found an optimal solution, I'll share what I ended up doing in case it helps.
Unfortunately, styling dynamic forms is rarely easy and sometimes impossible. You can, however, style the input field based on the language of the page. First make sure the page html reflects the language you are using (i generate this based on language using server side code, in your case it should be a straight forward php echo statement):
<body lang="en">
Next, select your text input based on the language
#searchField {
width: 80%; /* default width */
}
body[lang|="en"] #searchField {
width: 70%; /* make space for english button */
}
There are multiple other ways of selecting depending on language, check out http://www.w3.org/International/questions/qa-css-lang
solution2
1 ACCPTED 2013-04-12 13:03:08
If you don't mind the help of jQuery then the following code can solve your problem.
html code-
<div id="form" class="loading">
<form action="">
<div id="container">
<input type="text" name="input" id="input" value="">
<input type="submit" name="submit" value="submit" id="s">
</div>
</form>
</div>
css and js-
<script>
jQuery(document).ready(function($){
var containerWidth = $("#form #container").outerWidth();
var searchBoxWidth = jQuery("#form #s").outerWidth();
var adjustedWidth = containerWidth - searchBoxWidth - 30 // this is a value i've chosen to separate the button from the input field and the right edge of the wrapper
jQuery("#form #input").width(adjustedWidth);
jQuery("#form").removeClass('loading');
});
</script>
<style>
.loading form{visibility:hidden;background:url(img/loader.gif) no-repeat 50% 50%}
/*url should follow your own link to the gif you want to use*/
#form{width:700px;margin:200px auto;}
#form #container{border-radius: 30px;height: 60px;background: #ccc;border: 0;padding:0}
#form #input{height: 40px;margin: 10px 0 0 10px;border-radius: 30px;border: 0;padding:0;}
#form #s{padding: 13px 28px;border: 0;border-radius: 30px;text-transform: uppercase;}
</style>
edit:
- I've added a class "loading" in the main wrapper to identify the loading stage. Initial I don't want any visitor see the contents inside the wrapper so that i set the rule
visibility:hiddenso that the contents will remain in the position and they are not displayed instead i'm showing a loading gif using thebackgroundproperty of theloaderclass. - when the width of the input box is set then i'm removing the class
loadingfrom the wrapper so that the contents are now visible.
solution3
1 2013-04-12 13:19:33
If you don't mind having tables for layout you can do it like this ( fiddle ):
<style>
.search-table {
width:100%;
}
.search-table .search{
box-sizing:border-box;
width:100%;
}
.search-table .btn-cell {
width:1px;
white-space:nowrap;
}
</style>
<div id="searchContainer">
<table class="search-table">
<tr>
<td><input type="text" id="searchField" class="search" name="searchQ" /></td>
<td class="btn-cell"><button>search</button></td>
</tr>
</table>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.