With the latest update of Chrome to revision 19.0.1084.52 we notice some strange behavior on forms on our website.
When the form has a style with display:inline and position:relative and the input is wrapped
in a div that floats then the input is not selectable anymore
Here is the most simple example of the bug (check it in Chrome)
<form action="" method="get" style="display:inline; position:relative">
<div>
<label>test1</label>
<input id="test1" name="test1" type="text" value="clickable" />
</div>
<div style="float: left;">
<label>test2</label>
<input id="test2" name="test2" type="text" value="not clickable" />
</div>
<div style="clear:both;"><input type="submit" value="submit"></div>
</form>
Is this a browser bug or is this style not possible?
Hey replace float:left into inline-block
As like this
<form action="" method="get" style="display:inline; position:relative">
<div>
<label>test1</label>
<input id="test1" name="test1" type="text" value="clickable" />
</div>
<div style="display:inline-block;">
<label>test2</label>
<input id="test2" name="test2" type="text" value="not clickable" />
</div>
<div style="clear:both;"><input type="submit" value="submit"></div>
</form>
Live demo http://jsfiddle.net/t4a3r/
Related
I'm trying to create a contact form within a container, but every time I'm trying to test it or resize the browser or used mobile, the text input field doesn't remain on the container. The text field goes beyond the form
<div class="col-md-4">
<div class="thumbnail">
<div class="container">
<form id="frmContact" action="" method="post">
<div id="mail-status"></div>
<div>
<label style="padding-top:0px;">Name:</label>
<span id="userName-info" class="info"></span><br/>
<input type="text" name="userName" id="userName" class="demoInputBox" placeholder="Enter Full Name">
</div>
<div>
<label>Email:</label>
<span id="userEmail-info" class="info"></span><br/>
<input type="text" name="userEmail" id="userEmail" class="demoInputBox" placeholder="Enter E-mail Address">
</div>
<br>
<div>
<label>Attachment:</label><br/>
<input type="file" name="attachmentFile" id="attachmentFile" class="demoInputBox">
</div>
<br>
<div>
<label>Subject:</label>
<span id="subject-info" class="info"></span><br/>
<input type="text" name="subject" id="subject" class="demoInputBox" placeholder="Subject">
</div>
<div>
<label>Content:</label>
<span id="content-info" class="info"></span><br/>
<textarea name="content" id="content" class="demoInputBox" cols="" rows="5" placeholder="Concerns"></textarea>
<br>
</div>
<div>
<input type="submit" value="Send" class="btnAction" />
</div>
</form>
<div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif" /></div>
</div>
</div>
</div>
The Best way to deal with this kind of approach is to use
Mediaqueries.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
you can use that link as a guide.
You can also use Flex to make it responsive :) hope this helps.
how can i center the a tags below the form
login.asp
<%
$Response->write(qq[
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="image_logo">
<img class="img_logo" src="images/wearefamily-logo.png" alt="wearefamily-logo"/>
</div>
<h2 class="title_header">].gettext("title_header").qq[</h2>
<div id="error_message_div">]. ( $Session->{login_error} ? gettext("wrong_credentials") : "" ).qq[</div>
<form class="loginForm" name="loginForm" action="index.asp" method="post" autocomplete="off">
<input id="send" type="hidden" name="send" value="0" />
<input id="uri" type="hidden" name="uri" value="">
<input type="text" name="username" class="input" id="username" placeholder=].gettext("email").qq[ value="" /><br>
<input type="password" name="password" class="input" id="password" placeholder=].gettext("password").qq[ value="" /><br>
<input type="button" value=].gettext("signin").qq[ class="btn submit_btn"/><br>
</form>
<a class="form_link" href="index.asp?action=reset">].gettext("resetpassword").qq[</a><br>
<a class="form_link" href="index.asp?action=register">].gettext("register").qq[</a>
</div>
<div class="col-md-4"></div>
</div>
]);
%>
i would like to center the a tags below the form...the "reset your password" and "register to wearefamily kids" should be below sign button centered in the middle
Use this code given below
<div class="btn-block">
<a class="form_link" href="index.asp?action=reset">].gettext("resetpassword").qq[</a>
<a class="form_link" href="index.asp?action=register">].gettext("register").qq[</a>
</div>
.btn-block {
text-align:center;
}
.btn-block a {
display:inline-block;
}
I assume you didn't override the behavior of a elements because you haven't posted your css.
a element is rendered as an inline element. This is default.
It means the a elements behaves like text so you can give text-align:center; to the parent of element for centering the a element.
.col-md-4
{
text-align: center;
}
I have a form which has a div tag within it to help style the second part of my form into a second column. However my close form tag now doesn't work. Is there a reason why?
I have a localstorage.js which is working perfectly up until <div id="form-group">. Please, help! I'm so close to completing this page.
<div id="section">
<form id="franchiseForm" action ="javascript:void(0);" method="POST">
<div class="field">
<label for="fran_name">Franchise Name</label>
<input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" autofocus required tabindex="1">
<br>
</div>
<div id="form-group">
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Mon" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<span>-</span>
<input type="text" name="Monday" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<hr />
</div>
<div>
<div class="line-separator"> </div>
<div class="field">
<input type="submit" value="Save">
</div>
</form>
You have unclosed div tags try closing them. close the <div id="form-group> and the div before <div class= "line-seprator">
You've forgotten to close a <div> tag. Use this:
<div id="section">
<form id="franchiseForm" action ="javascript:void(0);" method="POST">
<div class="field">
<label for="fran_name">Franchise Name</label>
<input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" autofocus required tabindex="1">
<br>
</div>
<div id="form-group">
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Mon" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<span>-</span>
<input type="text" name="Monday" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<hr>
</div>
</div>
<div>
<div class="line-separator"> </div>
<div class="field">
<input type="submit" value="Save">
</div>
</div>
</form>
</div>
You can check markup errors with an HTML validator. This one is good enough for most cases.
I've created Bootstrap form with the following code :
<form class="form-inline" role="form" method="GET" action="/startup/searchprojects">
<div class="form-group">
<label class="sr-only" for="keywords">Key words</label> <input
type="text" class="form-control" id="keywords"
placeholder="keywords">
</div>
<div class="form-group example example-countries">
<label class="sr-only" for="localisation">Country</label>
<input class="typeahead" type="text" placeholder="countries">
</div>
<button type="submit" class="btn btn-default">
<fmt:message key="search.button.title" />
</button>
</form>
The form display on the same line. two inputs text with the submit button on the same line.
But when i add Spring MVC form tags, the form changes. Each input went on one line. So i have one line for the keywords input, one line for the input country and one line for the submit button. My form is now vertical.
Here the spring mvc form :
<form:form class="form-inline" role="form" method="GET" commandName="search-form" action="/startup/searchprojects">
<div class="form-group">
<form:label path="keywords" class="sr-only" for="keywords">Key words</form:label>
<form:input path="keywords" type="text" class="form-control" id="keywords"
placeholder="key words"></form:input>
</div>
<div class="form-group example example-countries">
<form:label path="country" class="sr-only" for="localisation">Country</form:label>
<form:input path="country" class="typeahead" type="text" placeholder="countries"></form:input>
</div>
<button type="submit" class="btn btn-default">
<fmt:message key="search.button.title" />
</button>
</form:form>
Try putting style="display: inline" in every div you use
<div style="display: inline"> some content</div>
I adjust width of #search-form. It was problem of width.
I am using twitter bootstrap to style my admin panels, however this is very strange behavior. I've tested in Chrome 28 and Firefox and it messes up grid when I add a simple hidden input.
If you move hidden input into div.span6 or remove it completely it will work as intended, but if it stays there the rows collapse and do not work properly. By properly I mean that they should be next to each other, not on top.
Fiddle: http://jsfiddle.net/EZMvB/
<div class="container-fluid">
<form action="/admin/category/create" class="row-fluid" method="post">
<input type="hidden" name="WAT" value="WAT" />
<div class="span6">
<label for="NameEnglish">Name (English)</label>
<input class="input-block-level" name="NameEnglish" type="text">
</div>
<div class="span6">
<label for="NameEnglish">Name (English)</label>
<input class="input-block-level" name="NameEnglish" type="text">
</div>
<input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
</form>
</div>
Putting class row-fluid in <form> tag in general is bad practice, because you always end up with one row, where as you could end up needing more then one row in your code.
Example here in jsFiddle
Code:
<form action="/admin/category/create" method="post" novalidate="novalidate">
<input type="hidden" />
<div class="row-fluid" >
<div class="span6">
<label for="NameEnglish">Name (English)</label>
<input class="input-block-level" data-val="true" data-val-required="'Name English' should not be empty." id="NameEnglish" name="NameEnglish" type="text" value="">
</div>
<div class="span6">
<label for="NameEnglish">Name (English)</label>
<input class="input-block-level" id="NameEnglish" name="NameEnglish" type="text" value="">
</div>
<input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
</div>
</form>
Seems to work as desired if you move the hidden field (http://jsfiddle.net/EZMvB/1/). Not sure why placement matters since the default style of display: none should prevent it from affecting layout?
<div class="container-fluid">
<form action="/admin/category/create" class="row-fluid" method="post">
<div class="span6">
<label for="NameEnglish">Name (English)</label>
<input class="input-block-level" name="NameEnglish" type="text">
</div>
<div class="span6">
<label for="NameEnglish">Name (English)</label>
<input class="input-block-level" name="NameEnglish" type="text">
</div>
<input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
<input type="hidden" name="WAT" value="WAT" />
</form>
</div>