I have a simple form that uses Google ReCaptcha v2 to verify. Its working fine on desktop/ipad and iphone on all browsers I have tested so far. The problem I have discovered is that when I click "I'm not a robot" on the smaller iphone screen in portrait mode - the images attempt to display below the form - and as the form is at the bottom of the page - it ends up cutting off like this:
<div class="col-md-6">
<p><b>CONTACT FORM</b>
</p>
<form role="form" id="form" action="form.php" method="post">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
<span class="help-block" style="display: none;">Please enter your name.</span>
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
<label for="message">Message</label>
<textarea class="form-control" rows="7" id="message" name="message" placeholder="Enter message"></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group">
<div class="g-recaptcha" data-theme="dark" data-sitekey="INSERT DATA SITE KEY HERE"></div>
<span class="help-block" style="display: none;">Please check that you are not a robot.</span>
</div>
<button type="submit" id="Submit" data-loading-text="Sending..." class="btn btn-default">Send Message</button>
</form>
</div>
When I rotate iPhone to landscape - it then displays the images above the reCaptcha widget which is good. But rotate back to portrait it tries to display the pictures below the widget - and cuts off anything below the end of page - and inserts a big white space. Any ideas what I can do to resolve?
Related
I use SpringBoot, Thymeleaf.
I want to update the value only for part of form in update page.
<form id="form" class="needs-validation col-sm-6" th:action="#{'/user/edit/' + ${userInfo.id}}" th:object="${userInfo}" method="post" novalidate>
<input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" th:value="${userInfo.id}"/>
<div class="form-group">
<label for="name">Name</label>
<h4 id="name" th:text="${userInfo.name}" th:value="${userInfo.name}"></h4>
<input type="hidden" name="name" th:value="${userInfo.name}"/>
</div>
<hr>
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" type="text" name="nickname" th:value="${userInfo.nickname}" placeholder="enter nickname" required minlength="2">
</div>
<hr>
<div class="form-group">
<label for="volunteerTime">Volunteer Time</label>
<span id="volunteerTime" th:text="${userInfo.volunteerTime}+'hour'" name="volunteerTime" th:value="${userInfo.volunteerTime}"></span>
<input type="text" size="5px" placeholder="hour"/>
<button type="button" name="action" value="plus" onclick="ajax()">plus</button>
<button type="button" name="action" value="minus" onclick="ajax()">minus</button>
</div>
<div class="form-group">
<input type="submit" value="update">
</div>
</form>
The "volunteerTime" section of the above code seeks to update and show values added to existing data according to the number entered.
The same goes for Minus.
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>'
))
})
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;"
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