I am attempting to set up a page using JQuery Mobile, where I have a 3 column grid, with a label, a text input and a set of horizonally-aligned radio-buttons. For some reason Grid-element c sets it's height larger than the other 2, and I can't seem to force the first 2 cells to align with it.
An example of the code is at: http://jsfiddle.net/5WSj4/1/
Here is the code in question
<div data-role="page" id="page_fullDialog">
<div id="dialog_main" data-role="content">
<fieldset class="ui-grid-b">
<div class="ui-block-a" style="width:30%">
<label style="vertical-align:top" data-mini="true" for="leagueNameInput">League Name:</label>
</div>
<div class="ui-block-b" style="width:10%">
<input type="text" style="vertical-align:top" data-mini="true" name="leagueNameInput" id="leagueNameInput" maxlength="4" value="" data-mini="true" />
</div>
<div class="ui-block-c" style="width:60%; text-align: right;">
<div data-role="fieldcontain" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<!-- <legend>Difficulty:</legend> -->
<input type="radio" name="difficulty" id="difficultyEasy" value="choice-1" />
<label for="difficultyEasy">Easy</label>
<input type="radio" name="difficulty" id="difficultyMedium" value="choice-2" checked="checked" />
<label for="difficultyMedium">Medium</label>
<input type="radio" name="difficulty" id="difficultyHard" value="choice-2" />
<label for="difficultyHard">Hard</label>
</fieldset>
</div>
</div>
</fieldset>
</div>
</div>
Any help with this would be greatly appreciated.
For some bizarre reason, ui-controlgroup has a top margin of 0.5em. Overriding it in the fieldset element solves the problem, i.e.
style="margin-top: 0px;"
Related
I am new to C# and .NET MVC. I have a View page with a radio button with two options, those are tied to a controller. When I try to add a new radiobutton by copying the radio button code in the View page, the newly added radiobuttons act like a continuation of the existing radiobuttons with the same input. I would like to differentate both radio buttons and use the input from the newly added radiobuttons elsewhere. Parts from my controller and Viewpage are below. Please ask me if you need more information.
Viewpage:
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
// ....
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="3" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="4" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
When I add the second radiobutton with values 3 and 4, I want it to be treated as a different input, not the same as the first radiobutton.
Can you help me with this?
Thanks!
You will need to give the second radio button a different name, so in the below code I have given it the name="radiobtn2"
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn2" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
So within a form no two radio buttons should have the same name attribute if you want them to perform different actions.
I would also suggest reading id vs. name
Try this solution , it should fix your problem, it seems you are referring two different ratio buttons with same name radiobtn. that is causing issue.
Here i updated two radio buttons names like
<input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
<input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
Complete Form:
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
// ....
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
can you please tell me how to make different label with different colour ?
It will change all label with red colour.
http://jsfiddle.net/GZaqz/4/
<div data-role="page" id="FirstPage" data-position="fixed" >
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<label class="labelClass" id="openSubmenu">Move to Second Page:</label>
</div>
<div data-role="content">
<div >
<a data-role="button" class="custom-btn" data-corners="false" id="test">Level 5</a>
<a data-role="button" class="custom-btn">Level 5</a>
</div>
<div >
<label class="caseName_h">user name</label>
</div>
<div data-role="fieldcontain" class="">
<label data-role="none" for="name" class="test1">Phoneyy</label>
<input style="width: 280px;" data-role="none" type="text" name="basic" value="" />
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="basic">Phone</label>
<input style="width: 280px;" data-role="none" type="text" name="name" id="basic" value="" />
</div>
</div>
</div>
Usually JQM use the attribute data-theme to assign a color to a form or whatever..
Actually I don't remember if there is same attribute for labels.
you probably want to have a look here: Theme JQM and here: Content Theme JQM
So I'm building a web application using Jquery Mobile and Phonegap. The app was working fine until I removed some input fields and drop down menus which became obsolete.
The problem now is that when I click on the last input field of the page & the ios keyboard activates, the footer bar is no longer fixed and there is a white gap between the footer bar and the ios keypad. When the keypad hides again I see the full page but the white gap is above the footer.
This doesn't seem to be a problem on the Android platform so I'm wondering if it is a CSS issue. Help is most certainly welcome. Here's the page code in question...
<div data-role="page" data-theme="f" id="">
<div data-role="header" class="ui-state-persist">
<h1>text</h1>
</div>
<div data-role="content">
<label for="">Text</label>
<input type="text" name="text" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="" name="" id="" value="" class="input-field required"/>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
Try the following code (using jQuery Mobile version 1.2.0):
<div data-role="page" data-theme="f" id="quickquote_insured">
<div data-role="header" class="ui-state-persist">
<h1>Contact Details</h1>
</div>
<div data-role="content">
<label for="quickquote-insured_initials">Initials:</label>
<input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
<label for="quickquote-insured_surname">Surname:</label>
<input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
<label for="quickquote-insured_phone_number">Mobile number:</label>
<input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
<label for="quickquote-insured_email_address">e-Mail address:</label>
<input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>
<br>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
</div>
I know it may look simple, but I just added a <br> just under your email input field.
I think the problem is that, since your footer is "static", you need to "fill" your page.
For example, if you have few fields on your page and if you don't "fill" your page, you'll get the following result:
Hope this helps.
With succes I've created a page that uses the set of radio buttons that are formatted jquery. But as soon as I add the div's need to position the content on the page, the radio buttons are still formatted, but do not act as radio buttons anymore (they act like checkboxes). This is my code, what's wrong with it?
<script>
$(document).ready(function() {
$("#dt_hel").buttonset();
});
</script>
<!-- end script radiobuttons -->
<div class="demo">
<div id="ContentContainerLeft" >
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>
If you follow the rule of closing the most recent tag before closing older tag (ie set the form opening tag above the tag) then it should work e.g.
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<div class="demo">
<div id="ContentContainerLeft" >
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>
I have a very simple jquery mobile page. It has a header, a footer and the body has asks for login and password with textboxes, and then you can submit.
My problem is that jQuery Mobile makes the textboxes hold about 100 characters, making my entire display way too small. Is there a way to force it to make the textboxes only hold about 12 characters and then make everything in the body larger?
Here is my code:
<div data-role="page" id="login">
<div data-role="header">
<h1>heade</h1>
</div>
<div data-role="content">
<form action="login.py" id="login_form" data-ajax="false">
<div data-role="fieldcontain">
<label for="name" style="font-size: px; font-weight: bold;"> User Name: </label>
<input type="text" name="uname" minlength="3" />
</div>
<div data-role="fieldcontain">
<label for="password"> Password: </label>
<input type="password" name="password" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" value="Reset" />
</div>
<div class="ui-block-b">
<input type="submit" value="Submit" />
</div>
</fieldset>
</div>
</form>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
</ul>
</div>
</div>
</div>
I see this post is old, but maybe this will help someone...
Did you try adding something like this to your css?
div input { width: 12px !important; }