I have a page with two submit buttons at the bottom of the page. One for the submit of the page that posts to an action and another to cancel that posts to a different action. For whatever reason IE has a problem with placing these two buttons side by side. Firefox has no issue.
Here is my script:
<div class="button_row">
using (Html.BeginForm("Edit", "Design"))
{ %>
<div class="button_cell_left">
<input type="submit" value="Update" />
</div>
<% } %>
<% Html.EndForm(); %>
using (Html.BeginForm("Review", "Design"))
{ %>
<div class="button_cell_right">
<input type="submit" value="Cancel"/>
</div>
<% } %>
<% Html.EndForm(); %>
Here is the css for those classes:
.button_row { float:left; width: 100%; }
.button_cell_left {float:left; width: 20%; }
.button_cell_right {float:left; width: 20%; }
The 20% width is plenty room wise for those buttons. Like i said in ie they won't stay on the same line but in firefox they will. My question is why given my code?
Thanks in advance,
Billy
You need to float the forms they're wrapped in as well, IE doesn't implement float properly, so if you want 2 floats on the same line, they must both be floated. This issue was annoying me yesterday as well
New CSS:
.button_row { float:left; width: 100%; }
.button_row form {float:left; width: 20%; }
Set a width in pixels, not %. IE have problems with % at times.
Your first input is missing it's self-closing slash.
Related
I need to manage units associated to number input in html forms.
Forms are generated from xml files (that I can change if necessary) :
Voltage : <input type="number"/> V
Some layout may visually separate unit (V) from input : I want them to be tied together.
Ideally, unit is displaied inside the input, like an always visible placeholder.
I thought about using pseudo-element ::after but
In case you weren’t aware, an doesn’t allow ::before or ::after pseudo elements. None of the different input types do.
https://www.scottohara.me/blog/2014/06/24/pseudo-element-input.html
Does anyone have a good practise to easily support this ? (html or css)
This should give you a head start :
.input-with-unit {
white-space: nowrap;
}
.input-with-unit > input {
width: 100%;
padding-right: 2rem;
}
.input-with-unit > label {
position: absolute;
margin-left: -1rem;
margin-top: 0.125rem;
}
<div class="input-with-unit" style="width: 12rem;">
<input type="number" />
<label>V</label>
</div>
<div class="input-with-unit" style="width: 9rem;">
<input type="number" />
<label>A</label>
</div>
I have a strange issue i cannot explain. i am using the play framework and when i try to run the View below it only works when i REPEAT the form action below... it works but i know it's not right. appreciative if anyone can help explain or correct.
#(errorMessage: String = "")(implicit messages: Messages)
#helper.form(routes.ApplicationHomeController.login) {
#main(title = messages("single.title")) {
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="userbox">
<form action="#{routes.ApplicationController.doLogin()}" method="post"></form>
<form action="#{routes.ApplicationController.doLogin()}" method="post">
<div style="color: red">#errorMessage</div>
<h1 id="logintxt" style="background-color: rgb(11, 146, 9);
background-position: initial;
background-repeat: initial;">Driver Service <b>ß</b>eta</h1>
<div id="submit_giff" style="display: none;">
<hi> Authenticating: <img src="/assets/images/loader-bar.gif" align="absmiddle"> </hi>
</div>
<input id="name" name="userName" placeholder="Username" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<input id="pass" name="password" type="password" placeholder="Password" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<p id="namealert" style="display: none;
opacity: 1;">Username:</p>
<p id="passal" style="display: none;
opacity: 1;">Password:</p>
<input id="loginbtn" style="opacity: 0.2;
cursor: default;" type="submit" value="Login">
</form>
</div>
<script src="/assets/javascripts/login.js"></script>
}
}
Two immediate observations.
One: #helper.form(...) will write a <form> element into the HTML that ultimately gets generated. Your view then includes other literal <form>s nested inside the first form. Nested forms are invalid HTML. You have one form submitting to routes.ApplicationController.doLogin and the other submitting to routes.ApplicationController.login. Who knows which of these the browser will actually submit to? We can't really predict because nested forms are invalid.
Two: you have your #main(...) view nested inside your #helper.form(...). I assume your main view contains <html>...</html>. This is going to result in HTML that starts with a <form> element, inside which is the <html> element. This is horribly invalid markup too.
My guess is one or both of these issues are your problem.
Try taking your generated HTML and running it through an HTML validator like https://validator.nu/. Fix any issues the validator finds, don't nest forms, and decide which (single) route the login form should actually submit to.
I am trying to make a responsive header/navigation form that has the following properties:
Has some type of label that is inline and vertically centered with the input box when the viewport is above a certain width.
At small viewport sizes, the label should center itself vertically above the input & button and the input/button combo should be 100% of the screen width.
Have a visually combined input and button, like the ones used in Bootstrap that won't split into separate lines
Either fill the width of the screen or be centered as the whole unit (header+input+button) when they're all on the same line
I have used this JS fiddle as a the starting point for the form to break the labels into a separate line on small widths and have successfully gotten it to work and for the label to center above the input at small viewports as well.
My code so far is
CSS
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
text-align: right;
vertical-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
#media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
text-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=numeric],
textarea,
select {
width: 100%;
}
}
HTML
1st Attempt
<header class="page-header row center-block">
<div class="center-xs">
<form class="main-form input-group" action="/caulcuate" method="post">
<label for="number" class="control-label"><h1 class="h1">BIG Label Header</h1></label>
<input type="number" name="number" min="10" max="6856" step="1" id="number" class="main-input"
placeholder="number goes here" required autofocus>
<span class="input-group-btn">
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
</span>
</form>
</div>
</header>
Attempt 2
<header class="page-header">
<form action="#">
<div>
<label class="desc" id="title1" for="numberhere"><h1>BIG Label Header</h1></label>
<div>
<input type="number" name="numberhere" min="10" max="6856" step="1" id="numberhere" class="main-input"
placeholder="number goes here" required autofocus>
<!--<span class="input-group-btn">-->
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
<!--</span>-->
</div>
</div>
</form>
</header>
Specific problems I'm having
In Attempt 2, I commented out the <span> that Bootstrap uses to group the button and input field because it will otherwise always put the button on a separate line.
In both attempts, the header label is not vertically centered with respect to the input box. I had it centered in an earlier iteration of Attempt 1, but I can't seem to get it back.
Attempt 1 just isn't centered properly at any size where the header row isn't taking up the full screen width. Attempt 2 does center consistently but the label header is too far from the input box at large screen sizes, so it's only centered in that there is roughly equal whitespace between the page border and the contents of the header.
Ideas for solution
Currently, the HTML in Attempt 1 seems like it is closer to what I want in terms of the label header and the button both being smooshed right up against the input box. Attempt 2, however, actually is responsive at small screen sizes.
It seems that maybe if I nest enough <div>s and am clever with their classes, I'll eventually get something that works about right, but would probably be fragile.
The other solution I thought of is to create two separate <header>s and wrap them in a pair of <div>s and use a #media query to change between which <div> is visible. This seems less fragile than using a ton of nested tags but also requires some code duplication. However, it seems like it might be the simplest option so far.
Somewhat related to switching between which <div> to display depending on the screensize, I suppose there probably is some jQuery way to do this and maybe CSS is currently the wrong tool for the heavy lifting in this case.
P.S. I wish I knew more about vector illustration so I could give an example of exactly what I'd want without all the descriptive text.
I'm not sure if my question makes sense, but,
I'm using jQuery to toggle an image from its off-state to its on-state upon click.
That was hard enough to get to work (I'm rather novice).
The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type.
I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.
I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.
The page is currently being hosted here
Script:
<script type="text/javascript">
$(function(){
$("#click li").click(function (e) {
$("#click li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
});
</script>
You could include both a div -- initially hidden, with size matching the image -- and the image in each li.
CSS:
.imagetext {
display: none;
height: 50px; /* or whatever */
width: 50px;
}
#click li img {
display: block;
height: 50px; /* or whatever */
width: 50px;
}
#click li.selected img {
display: none;
}
#click .imagetext {
display: block;
}
HTML along the lines of:
<div id="#click">
<ul>
<li>
<img src="..." />
<div class="imagetext">Four score and seven...</div>
</li>
<!-- ... -->
</ul>
</div>
I recently added a CSS3 focus styling to a element of a form (it grows vertically as to give more room to write). However, now when a user clicks the submit button, the textarea loses focus (and shrinks), but the form does not submit and the user must click submit again. Is there any solution to this?
Form:
<form name="postForm" id="post_form" onsubmit="return validate()" action="post.php" method="post" enctype="multipart/form-data">
<textarea name="post" onkeydown="update()" onkeyup="update()" placeholder='Write Post...' id="post_area" ></textarea>
<div id='post_extras'>
<input class="admin_extra" id="post_button" type="submit" value="Post" />
<input class="admin_extra" type="file" name="file" />
<input class="admin_extra" placeholder="Image URL" type="url" name="url" />
<div class="admin_extra" id='char_left'>5000 Characters Left</div>
</div>
</form>
CSS:
#post_area{
height: 3em;
width: 100%;
display: block;
border: none;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding: 10px;
margin: 0;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
#post_area:focus{
height: 10em;
}
The reason for this happening is because when you leave the mouse from the text content area you lose the focus on other elements. This is the cause that you have to click twice on the post button to became activated. One kind of workaround would be to use the sliding effect only when you start to enter the text and once you finished you post it. So there is no sliding back. You can do this easily with jquery. If you want to post on click - you'll have to listen to that manually.
You can do this with the following code:
$("post_button").on('click', function(e) {
e.stopPropagation();
alert('clicked');
});
JSFiddle code:
http://jsfiddle.net/txXaq/1/