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.
Related
I have made a form using HTML, this is the code:
<html>
<head>
<style>
.your-class input{
float:left;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="your-class">
<label><b>aspect ratio:</b></label>
<input type="number" name="no1" min="0.25" style="width: 4em" step="any" placeholder="value1" required>
<b>/</b>
<input type="number" name="no2" min="0.25" style="width: 4em" step="any" placeholder="value2" required><br><br>
</div>
<label><b>value3:</b></label>
<input type="number" name="no3" min="0.25" step="any" placeholder="value3" required><br>
<input type="hidden" name="calculator_ok" value="ok">
<input type="submit" name="submit" value="add" style="background-color: BurlyWood"><br>
</form>
</body>
</html>
I want the symbol (/) to be between the two small boxes not after them, see the picture:
How should I edit the code to get that result?
The problem happens because of the "float: right" CSS rule; it is floating all the <inputs> to the left, and leaving everything else untouched.
A few options to make it work:
The float could be removed;
The slash could be placed inside a container and the CSS rule adjusted to apply to that container, too.
Well, you would have to turn all children into left floats...
<style>
form > div, form > label, form > input, form > b {
float:left;
}
</style>
However, floats are rather “out of fashion“ (in favor of i.e. flexbox).
Although in this case, a far simpler inline-block will do, to line up the inputs and the inside b-Tag.
(and you can avoid the <b>'s inside the labels by styling the labels)
<html>
<head>
<style>
label {
display: block;
font-weight: bold;
}
form > input, form > b {
display: inline-block;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="your-class">
<label>aspect ratio:</label>
<input type="number" name="no1" min="0.25" style="width: 4em" step="any" placeholder="value1" required>
<b>/</b>
<input type="number" name="no2" min="0.25" style="width: 4em" step="any" placeholder="value2" required><br><br>
</div>
<label>value3:</label>
...
</form>
</body>
</html>
Use html entity of / which is / instead
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;
}
I'm trying to put some input elements (~7) in the same line.
I have the following code:
<form>
<b> One </b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
<form>
<b> Two </b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
<form>
<b> Three</b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
The problem is that every input every input has it own line, and it not in the same line.
Edit: Also, I wish that it will be with space in that way that the inputs elements would comprehend the whole line.
Hoe can I do it?
Change the display, remove the inline styles. Example: http://jsfiddle.net/ys1Lgj7e/
form {
display:inline-block;
}
Your input elements should all share the same form, and your styling can be modified & put into CSS, which will simplify your code significantly.
Here's a working example:
http://jsfiddle.net/u4utpu6c/
HTML
<form>
<input type="number" />
<input type="number" />
<input type="number" />
</form>
CSS
input {
display: inline;
width: 5%;
vertical-align:top;
}
Set every form tag to 'display: inline;'
In that html file:
<style>
form {
display: inline;
}
</style>
OR in your css file:
form {
display: inline;
}
OR each tag :
<form style="display: inline;">
I just can't figure out to get the "submit" button to the right of the text box for the form found at the top of the loop on this page: http://www.babysavers.com.
The code I'm using is here:
<center>
<div style="width: 625px; height: 70px; border-style: dotted; border-color: #d7345a; border-width: 1px; padding: 5px;">
<form action="http://www.feedblitz.com/f/f.fbz?AddNewUserDirect&ajax=4" method="POST" name="FeedBlitz_9fe455b8521611e29f67003005ce8903">
<h3>Join over 8,900 subscribers! Enter your email below for FREE Updates:</h3>
<input style="display:none" type="text" name="EMAIL" value="" maxlength="64" size="65">
<input type="hidden" name="EMAIL_" value="" maxlength="64" />
<input type="hidden" name="EMAIL_ADDRESS" value="" maxlength="64" />
<input type="hidden" name="FEEDID" value="873069" /> <input type="hidden" name="cids" value="1" />
<input type="hidden" name="PUBLISHER" value="24085942" />
<input onclick="FeedBlitz_9fe455b8521611e29f67003005ce8903s(this.form);" type="button" value="Subscribe!" />
</form></div><script type="text/javascript" language="Javascript">// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
function FeedBlitz_9fe455b8521611e29f67003005ce8903i(){var x=document.getElementsByName('FeedBlitz_9fe455b8521611e29f67003005ce8903');for(i=0;i<x .length;i++){x[i].EMAIL.style.display='block';
x[i].action='http://www.feedblitz.com/f/f.fbz?AddNewUserDirect';}}
function FeedBlitz_9fe455b8521611e29f67003005ce8903s(v){v.submit();}FeedBlitz_9fe455b8521611e29f67003005ce8903i();
// ]]></script><br></center>
I know my code is sloppy, but all I want to do is line up the Submit button so it's to the right of the text box, not underneath it. Any help would be appreciated.
Set your display to inline rather than none:
style="display: inline;"
Try this change (display: inline):
<input type="text" size="65" maxlength="64" value="" name="EMAIL" style="display: inline;">
If i set the css for textarea like this=>
#id_content {
padding: 0;
width: 100%;
height: 600px;
}
The height and width work.
But if i type something on textarea texts are at the middle of the height of the textarea though the padding:0.
Why is it happenning? How can i fix it?
This is the html source=>
<div id="id_div_content">
<form action="/createpost/" method="post"><div style='display:none'><input type='hidden' name='xxx' value='xxx' /></div>
<p><label for="id_title">Title:</label> <input id="id_title" type="text" name="title" maxlength="100" /></p>
<p><label for="id_content">Content:</label> <input type="text" name="content" id="id_content" /></p>
<input type="submit" value="Submit" />
That happens if you are using the input tag in your html as such:
<input type="textarea" id="id_content" />
If you are, use the textarea tag instead:
<textarea id="id_content"> </textarea>