Can you please tell me how to add text field in front of label in jquery mobile .
There is two different types of text field in this image.How to implement this?
Just you have to copy simple code to your website...
For input box:-
<div data-role="fieldcontain">
<label for="text-12">Text input:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
For textarea:-
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
Keep that in mind the value of for="" and id="" of input box should be same...
For more details check out:- http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/
Use this code to add textfield
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
Ref this docs to know more informations about JQM
http://jquerymobile.com/demos/1.2.1/docs/forms/textinputs/
Related
I have a shiny app that conducts t-test between two independent samples. Based on a radio button choice, you can either input summary statistics (\bar{x}, sd, n) for both samples, or you can copy/paste or type in the values of each sample. The renderUI function looks something like this:
output$ui<-renderUI({
switch(input$option,
"Summary Stats" =
c(textInput("barx1","$$\\bar{x}_1$$", "0"),
textInput("picksd1", "$$sd_1$$", "1"),
textInput("n1","$$n_1$$","10"),
textInput("barx2", "$$\\bar{x}_2$$","1"),
textInput("picksd2", "$$sd_2$$","1"),
textInput("n2","$$n_2$$","10")),
"Input Data" = c(tags$textarea(id="foo1", rows=10, cols=38), tags$textarea(id="foo2", rows=10, cols=38)))
})
The textInputs render and work fine in the UI, but the text boxes don't, any help here? I have something very similar for a one sample case, where foo1 works fine, the problem seems to be that I want two text boxes and maybe that I have them stored in c() form, though this works fine for the textInputs. Thanks in advance for any help.
I managed to make this work by using html code instead of "tags". Not sure why tags$textarea didn't work when used in c(tags$textarea, tags$textarea) form but this looks a lot cleaner anyway:
output$ui<-renderUI({
switch(input$option,
"Summary Stats" = HTML(
'<div class="form-group shiny-input-container">
<label for="barx1">$$\\bar{x}_1$$</label>
<input id="barx1" type="text" class="form-control" value="0"/>
</div>
<div class="form-group shiny-input-container">
<label for="picksd1">$$sd_1$$</label>
<input id="picksd1" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="n1">$$n_1$$</label>
<input id="n1" type="text" class="form-control" value="10"/>
</div>
<div class="form-group shiny-input-container">
<label for="barx2">$$\\bar{x}_2$$</label>
<input id="barx2" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="picksd2">$$sd_2$$</label>
<input id="picksd2" type="text" class="form-control" value="1"/>
</div>
<div class="form-group shiny-input-container">
<label for="n2">$$n_2$$</label>
<input id="n2" type="text" class="form-control" value="10"/>
</div>'
),
"Input Data" = HTML(
'<div class="form-group shiny-input-container">
<label for="foo1">Sample 1</label>
<textarea id="foo1" rows="10" cols="38"></textarea>
</div>
<div class="form-group shiny-input-container">
<label for="foo2">Sample 2</label>
<textarea id="foo2" rows="10" cols="38"></textarea>
</div>'
))
})
The other two answers on this question propose overriding
div.ui-input-text {}
However, I have multiple input fields on this page and also within my project. So those answers won't work as they would effect everything on my page or project.
How can I modify a single text input?
A class designation in the input tag doesn't work. If I encapsulate the input with a div tag it still doesn't work. I'm trying to put an icon at the end but it seems all Jquery mobile text input takes the entire screen.
<input class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
CSS, No Effect!
.address {
width: 200px !important;
}
Now, I could still switch to Bootstrap if that's the better way to go on this project. It seems to have .col-xs-* classes that solve this problem.
Thanks in advance.
Instead of directly setting the class on the input,jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox.
<input data-wrapper-class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
Working DEMO
It is maybe bit late to answer this, but maybe for others looking for the same thing (I was :-)
You can put your address in a div:
<div class="myContainer">
<label id="lbAddress">Provide the address</label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
Then select your container and just the input inside that container in the CSS:
.myContainer > .ui-input-text
{
width:200px;
}
demo: https://jsfiddle.net/petitbarzun/cfazq5k5/
Reading your comments on the answer from ezanker, if you want all the inputs to appear on one line, there needs to be a container with ui-field-contain like this (the label should be there too):
<div class="ui-field-contain">
<label id="lbAddress" style="display:none"></label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
The CSS then looks like this:
.ui-field-contain > #lbAddress~[class*=ui-input-text]
{
width:219px;
}
demo http://jsfiddle.net/petitbarzun/cfazq5k5/1/
How Do I align the Jquery input fields in single horizontal line ?
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Term:</legend>
<label for="txtSDate">
</label>
<input id="txtSDate" name="txtSDate" value="<%=sdate%>" placeholder="Enter start date" type="date" data-inline="true"
maxlength="12" />
<label for="txtEDate">
</label>
<input id="txtEDate" name="txtEDate" value="<%=edate%>" type="date" maxlength="12" placeholder="Enter end date" />
</fieldset>
</div>
maybe you missed the fieldcontian?
please try below:
<div data-role="fieldcontain">
<label for="txtSDate"></label>
<input id="txtSDate" name="txtSDate" value="<%=sdate%>" placeholder="Enter start date" type="date" data-inline="true" maxlength="12" />
</div>
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.
Jquery Mobile nicely lays out controls in a grid. I would the text "12345678" outlined in red in the image below to sit right above the textbox and left aligned. I can't see how to do it.
The image was generated with this jsfiddle: http://jsfiddle.net/958Gr/3/
By setting disabled='true' and value="12345678" you can get something decent. The account number will still show as as field, but then you can theme it differently. See this fiddle:
http://jsfiddle.net/den232/7hmYn/
Good Luck!
<div class="ui-body ui-body-b">
<div data-role="fieldcontain" data-theme='c'>
<label for="Phone" >Account ID</label>
<input id="Phone" name="Phone" type="text" disabled='true' value="12345678" />
</div></div>
<div class="ui-body ui-body-c">
<div data-role="fieldcontain">
<label for="Email">Email Address</label>
<input data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" type="text" value="" />
</div> </div>
<div class="ui-bar ui-bar-c">
<div data-role="fieldcontain">
<label for="Email">Email Address</label>
<input data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" type="text" value="" />
</div> </div>
You may Use Two-column grids as in this updated jsfiddle:link