How it looks
Desired effect
I'm sure there's an answer somewhere, but I'm unable to find it. I've seen people use flex and it looked promising, but it just seems to break things up.
Original code:
.checkImg {
margin-left: 10px;
vertical-align: bottom;
}
form {
text-align: center;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
<form>
<!-- https://stackoverflow.com/questions/27838228/redirecting-the-user-to-the-same-page-after-login -->
Nickname:<br>
<input type="text" name="nickname"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
<br>
Password:<br>
<input type="password" name="password">
<br>
Email:<br>
<input type="email" name="email"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
<br><br>
<input type="submit" value="Submit">
<form>
</body>
</html>
Trying to set up the flex from here: How to use flexbox
How it went:
.checkImg {
margin-left: auto;
vertical-align: bottom;
}
form {
text-align: center;
}
div {
display: flex;
}
.flex {
flex: 1;
display: inline-flex;
justify-content: center;
text-align: center;
align-self: flex-start
}
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
<form>
<!-- https://stackoverflow.com/questions/27838228/redirecting-the-user-to-the-same-page-after-login -->
Nickname:<br>
<div><input class="flex" type="text" name="nickname"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img></div>
<br>
Password:<br>
<input type="password" name="password">
<br>
Email:<br>
<input type="email" name="email"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
<br><br>
<input type="submit" value="Submit">
<form>
</body>
</html>
I tried flex-grow: 0 (sets input on the left side, image on the right start, removing the stretching), align-items: flex-start and none of these seemed to work. It feels like I'm really close, but since this is my first encounter with flex, I can't just seem to find the right solution.
One of possible solutions, with flexbox. (Note: you can achieve same on many different ways). You can also use ::after pseudo-element, but in this example i kept your image. Trick is to set image position to absolute, and then it will not affect alignment.
<form>
<div >Nickname:<br>
<input type="text" name="nickname" ><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
</div>
<div>
Password:<br>
<input type="password" name="password">
</div>
<div>
Email:<br>
<input type="email" name="email"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
</div>
<div>
<input type="submit" value="Submit">
</div>
<form>
CSS:
form {
display:flex;
align-items:center;
flex-direction: column;
}
div {
margin:10px;
text-align:center;
position:relative;
}
.checkImg {
position:absolute;
right:-30px;
}
DEMO:
form {
display:flex;
align-items:center;
flex-direction: column;
}
div {
margin:10px;
text-align:center;
position:relative;
}
.checkImg {
position:absolute;
right:-30px;
}
<form>
<div >Nickname:<br>
<input type="text" name="nickname" ><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
</div>
<div>
Password:<br>
<input type="password" name="password">
</div>
<div>
Email:<br>
<input type="email" name="email"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
</div>
<div>
<input type="submit" value="Submit">
</div>
<form>
Related
<div data-role="fieldcontain" style="font-size: 84%" > <!-- style="width: 48% ; float: right" -->
<fieldset data-role="controlgroup" data-type="horizontal" data data-mini="false" data-theme="b" style="width: 98%; " data-corners="false"> <!-- strength -->
<legend style="text-align: center ; ">גודל</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="גדול" data class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >גדול: 10.50 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
<label for="radio-view-b" >בינוני: 6.30 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" />
<label for="radio-view-c" >קטן: 5.70 ₪</label>
</fieldset>
</div>
Jquery Mobile Radio buttons:
in the exmaple above I've managed to fit the horizontal radio buttons to exactly fit by trial and error.
How could it be done in code???
I assume you want the CSS the get the controlgroup looking like the image ?
If so, here is your HTML with all styles removed and some typos fixed:
<div id="myGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
<legend >גודל</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="גדול" class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >גדול: 10.50 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
<label for="radio-view-b" >בינוני: 6.30 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" />
<label for="radio-view-c" >קטן: 5.70 ₪</label>
</fieldset>
</div>
I added an ID to the fieldcontain so we could limit the CSS rules to things in this container:
#myGroup {
font-size: 84%;
}
#myGroup .ui-controlgroup-label{
float: none;
display: block;
text-align: center;
width: 100%;
}
#myGroup .ui-controlgroup-label legend{
font-weight: bold;
font-size: 130%;
width: 100%;
margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
float: none;
display: block;
width: 100%;
}
#myGroup .ui-radio{
width: 33.33%;
}
#myGroup .ui-radio label{
text-align: center;
white-space: nowrap;
}
DEMO
You should add data-inline="true". Check the demos for radio buttons on the jQuery Mobile site.
Friends
The functionality is as below , when a user clicks on a button a pop-up page opens that contains the checkboxes and user upon selecting the values from checkboxes clicks on submit on popup and those values gets displayed to the Parent page. The problem Im facing is that when a user submits the popup values , the values gets disaapers on the parent page and the page gets reloaded ,
The code for the popup is
<a href="#" id="pop" >Select Language</a>
<br />
<form action= "" id ="overlay_form" method= "post" style="display:none">
<h3>Select Language</h3>
<br /><br />
<input type="checkbox" name="countryCheckbox[]" value="English" /> English <br/>
<input type="checkbox" name="countryCheckbox[]" value="French" /> French <br/>
<input type="checkbox" name="countryCheckbox[]" value="Norwagian" /> Norwagian <br/>
<input type="checkbox" name="countryCheckbox[]" value="Swedish" /> Swedish <br/>
<input type="checkbox" name="countryCheckbox[]" value="Hindi" /> Hindi <br/>
<input type="checkbox" name="countryCheckbox[]" value="Chinese" /> Chinese <br/>
<br /><br />
<div class="row-fluid grid-footer">
<div class="span8"></div>
<div class="span5">
<input class="btn btn-primary btn-primary-secondary" type="submit" name="saveDepartmentBtn" id="saveOrg" value="Submit" onclick="this.disabled='disabled'; document.getElementById('saveOrg').disabled='disable';this.form.submit(); ">
</div>
<div class="span1">
<button class="btn btn-secondary" type="button" cancel-action="/admin/role/list" ><spring:message code="common.cancel" /></button>
</div>
</div>
</form>
<p id="text">
The selected Languages are:
</p>
and the Jquery code is
$(document).ready(function(){
$('#saveOrg').click(function(){
if(!$("#saveOrg").hasClass("notTwice")) {
alert('Inside new 2');
$("#saveOrg").addClass("notTwice");
var arr = [];
alert('Inside 3');
$('input:checkbox:checked').each(function(){
$("#text").text($("#text").text() + $(this).val()+ " ,");
});
alert('Inside 5');
$('#overlay_form').fadeOut(500);
return false;
}
});
});
The checked value gets disappers after alert('Inside 5'); in above code .
And the final css part is
<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 380px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
Please suggest workaround to retain the value selected from the popup.
You could place the values in a session id or sessionstorage (if you are using html5).
I have this page in jquerymobile running in .net MVC4
<div data-role="header" data-theme="b" data-position="fixed">
<h3 style="color:white;">
Name
</h3>
Back
<div data-role="fieldcontain" class="test_row">
<fieldset data-role="controlgroup" data-type="horizontal" class="test_row">
<input id="radio3" name="testType" value="2" type="radio" checked="checked" class="test_type">
<label for="radio3" class="test_type">All tests</label>
<input id="radio1" name="testType" value="0" type="radio" class="test_type">
<label id="test_type_label" for="radio1" class="test_type" >Automated</label>
<input id="radio2" name="testType" value="1" type="radio" class="test_type">
<label for="radio2" class="test_type">Manual</label>
</fieldset>
</div>
</div>
CSS
.test_row .ui-btn {
text-align: center;
}
.ui-field-contain .ui-controlgroup-controls {
width: 100%;
}
.ui-controlgroup-controls .ui-radio {
width: 33.3%;
}
http://jsfiddle.net/ruds5/jsfiddle
When you resize the result, middle word (Automated) is truncated into shorter form with '...' at the end.
Is it possible to prevent truncating at the end of the word?
Based on the updated question, here is the solution. The text style is wrapped with a with class .ui-btn-inner, button text style is overidden as follows.
span.ui-btn-inner {
white-space: nowrap !important;
overflow: visible !important;
}
Demo JSfiddle
Omar was correct with previous version of Jquery mobile. But with version 1.4.1 there is no more span, use:
.ui-btn-inline {
white-space: nowrap !important;
overflow: visible !important;
}
In JQuery Mobile, I am trying to group buttons with an input box in the middle.
Below is my code
<div data-role="controlgroup" data-type="horizontal">
Yes
<input type="text" value="0" min="0" max="20" size="2" />
Maybe
</div>
This is the result
Any ideas would be great?
The radio buttons need an aggressive case of display:inline !important; ... Here is a list with 2 lines, one normal buttons and one mini's.
Hope it helps. http://jsfiddle.net/den232/5mVv8/
.floatleft {
float:left;
}
.floatright {
float:right;
}
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */
display:inline !important;
}
.textwidth { /* limit width of input fields */
width:80px;
}
.closespacing { /* controls spacing between elements */
margin:0px 5px 0px 0px;
}
.bigselect { /* centers select with big buttons */
padding: 0px;
margin:2px 5px 0px 0px;
}
.biginputheight { /* matches text input height to big buttons */
padding-top:10px !important;
padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
padding-top:5px !important;
padding-bottom:5px !important;
}
<div data-role="page" class="type-home">
<ul data-role="listview">
<li data-role="fieldcontain">first LI line</li>
<li data-role="fieldcontain">
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">A1</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">B1</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="left" class='biginputheight'></input>
</div>
</li>
<li data-role="fieldcontain">
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">AA</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">BB</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="e2" class='miniinputheight'></input>
</div>
<div class='floatright closespacing'>
<div class='floatright textwidth'>
<input type="text" placeholder="e3" class='miniinputheight'></input>
</div>
</div>
</li>
<li data-role="fieldcontain">last LI line</li>
</ul><!-- /listview -->
By default buttons take up the entire width of the view port. Try using the data-inline attribute to change that.
http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-inline.html
You'll also need some css to get the input looking right. The following seemed to work for me. You'll probably need to adjust the width depending on what you're going for.
input.ui-input-text {
float: left;
position: relative;
display: inline-block;
width: 50%;
}
This solution works for me and hope it helps someone else seeking the same.
.controlgroup-textinput{
padding-top:.22em;
padding-bottom:.22em;
}
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">
Yes
<input type="text" value="0" min="0" max="20" size="2" data-wrapper-class="controlgroup-textinput ui-btn" />
Maybe
</fieldset>
I am using jQuery Validation plugin, for my jQuery mobile site. The validation is hitting, but it is not displaying the error messages. Need help in figuring out what is wrong. Here is my code.
<script language="javascript" type="text/javascript" >
$(document).ready(function () {
$("#LoginForm").validate();
});
</script>
<form id="LoginForm" class="validate" action="~/Home/Search" method="get">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><div class="center-wrapper">Secure Login</div></li>
<li data-role="fieldcontain">
<label for="FirmKey">FirmKey</label>
<input type="text" id="FirmKey" name="FirmKey" class="required" />
</li>
<li data-role="fieldcontain">
<label for="UserName">User Name</label>
<input type="text" id="UserName" name="UserName" class="required" />
</li>
<li data-role="fieldcontain">
<label for="Password">Password</label>
<input type="password" id="Password" name="Password" class="required" />
</li>
<li data-role="fieldcontain">
<input type="submit" id="submit" value="LOGIN" />
</li>
</ul>
</form>
CSS:
label.error {
float: none;
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
display: block;
margin-left: 22%;
}
#media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
#media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
If you happen to be including the jquery.validation.unobtrusive script, it will .validate() your form before you get a chance to. You need to remove the automatically added validation object from you form before you can call .validate() manually for it to function properly... something along the lines of
$("#theForm").removeData("validator")
$("#theForm").removeData("unobtrusiveValidation");