I have a html5 date picker in my form for a mobile version of my site. All my text inputs are set to width:100% and its parent td is set to padding-right:15px to make it fit. This means my fields are nicely formatted and adjust to always fill up half of the container when the orientation of the device changes. However the date picker does not behave in the same way, can anyone help?
Form:
<form method="get" action="home">
<table id="form">
<tr><td>
<input type="text" name="Title" class="tbox" placeholder="Title" />
</td><td>
<input type="text" name="Genre" class="tbox" placeholder="Genre" />
</td></tr>
<tr><td>
<input type="text" name="Location" class="tbox" placeholder="Location" />
</td><td>
<input type="date" name="Date" class="tbox" placeholder="DD/MM/YY" />
</td></tr>
<tr><td>
<input type="text" name="postcode" class="tbox" id="postcode" placeholder="Postcode" />
</td><td>
<input type="number" name="radius" class="tbox" placeholder="Mile Radius" /><br />
</td></tr>
</table>
<input type="submit" value="Search" />
</form>
Relevant CSS:
.tbox {
background-color: #a1c9ff;
border: 1px solid #003f94;
width: 100%;
height: 30px;
margin: 3px 2px;
padding: 0 5px;
border-radius: 15px;
font-size: 18px;
float: left;
}
table#form tr td {
overflow: hidden;
padding-right: 15px;
}
.tbox {
min-width:100%;
}
table#form {
width:100%;
}
use width 100% for table#form and min-width:100% for .tbox, i hope this could solve your problem. have updated the jsfiddle http://jsfiddle.net/brfQf/1/
This css style fixes the problem in mobile Safari:
-webkit-appearance: none;
However, it changes input appearance.
It looks like .tbox has both a width of 100% and a padding. This would result in the box extending outside of its desired area. To resolve this you could try adding box-sizing: border-box;
.tbox {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
It is able to use a fixed value, So, you can use this unit to make it full screen:
width: 100vw
But you need to consider its compatibility, Here is a link about its compatibility:
http://caniuse.com/#search=vw
Related
I am new to jquery, I stuck with one problem
Possible Duplicate
jQuery Mobile buttons on same row as controlgroup
But the provided solution does not worked for me.
I am trying to make a radio control group using jqm with a button on right side. I am creating the radio buttons . like this:-
<fieldset data-role="controlgroup" id="privacylistdata"
data-theme="c" class="ui-grid-a">
<label for="Setting1">Setting1</label> <input class="privacytype"
type="radio" name="privacy" id="Setting1"
value="Setting1">
<label for="Setting2">Setting2</label> <input
class="privacytype" type="radio" name="privacy"
id="Setting2" value="Setting2">
<label for="Setting3">Setting3</label> <input
class="privacytype" type="radio" name="privacy"
id="Setting3"
value="Setting3">
</fieldset>
I like to add a button on right most side of each radio control group in same row like this.
Please help me out.
Thanks.
One way to do this is to have to controlgroups side by side using a table:
<table class="privacylistdatatable">
<tr>
<td>
<fieldset data-role="controlgroup" id="privacylistdata" data-theme="c">
<label for="Setting1">Setting1</label>
<input class="privacytype" type="radio" name="privacy" id="Setting1" value="Setting1">
<label for="Setting2">Setting2</label>
<input class="privacytype" type="radio" name="privacy" id="Setting2" value="Setting2">
<label for="Setting3">Setting3</label>
<input class="privacytype" type="radio" name="privacy" id="Setting3" value="Setting3">
</fieldset>
</td>
<td class="rightColumn">
<fieldset data-role="controlgroup" id="privacylistdataBtns" data-theme="c">
Icon only
Icon only
Icon only
</fieldset>
</td>
</tr>
</table>
Then use some CSS to make things line up nicely:
.privacylistdatatable {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.privacylistdatatable td {
padding: 0px;
}
.privacylistdatatable .rightColumn {
width: 24px;
}
.privacylistdatatable fieldset {
margin: 0;
}
#privacylistdata .ui-radio label {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
#privacylistdataBtns .ui-btn {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-left: 0 !important;
}
#privacylistdataBtns .ui-btn-inner {
padding-top: 9px;
padding-bottom: 9px;
}
#privacylistdataBtns .ui-last-child .ui-btn-inner {
padding-top: 9px;
padding-bottom: 9.5px;
}
DEMO
<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 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");
ok so i have this address for a part of my website,
localhost:2001/?botid=Alice&template=alice
and i want to make it so what i put after that will be put into the input box on the page. So something like this,
localhost:2001/?botid=Alice&template=alice#Hello
how are you?
can anyone help out with a javascript or something?
heres the source code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--This is a simple example of an HTML chat template for Program D.-->
<head>
<!--The value associated with a bot predicate, such as
"name", is inserted wherever you use a bot element
with a name attribute that corresponds to a predicate name.-->
<title>
Dialogue with <bot name="name"/>
</title>
<!--This is a simple stylesheet to format the page.-->
<style type="text/css">
html
{
overflow: hidden;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 10px;
text-align: left;
background: transparent;
}
.fieldlabel
{
font-weight: bold;
font-style: normal;
font-size: 14px;
color: #0000aa;
}
#userinput
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #aa0000;
}
.botresponse
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #00aa00;
}
.bottomtext
{
margin-top: 0px;
margin-bottom: 0px;
font-weight: normal;
font-style: italic;
font-size: 10px;
}
li p
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
}
ul
{
margin-top: 0px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 0px;
}
form
{
margin-top: 20px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
#audio
{
display: none;
}
</style>
<script type="text/javascript">
function playPause() {
var myVideo = document.getElementsByTagName('audio')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.play();
}
</script>
<script type="text/javascript">
document.getElementById('text')[0].value = window.location.hash.substring(1);
</script>
</head>
<!--The body element is set to automatically give focus to the
input field each time the document is loaded.-->
<body>
<table border="0" cellspacing="5" cellpadding="0" width="500">
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
You said:
</p>
</td>
<td width="70%" valign="top">
<p id="userinput">
<userinput/>
</p>
</td>
</tr>
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
<!--The name of the bot will be substituted here.-->
<bot name="name"/> said:
</p>
</td>
<td width="70%" valign="top">
<p class="botresponse">
<!--The bot's response will be substituted here.-->
<reply></reply><response/>
</p>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<form method="post">
<input type="text" size="50" name="text" id="text" onkeydown="if (event.keyCode == 190) document.getElementById('go').click()" x-webkit-speech />
<input type="submit" id="go" value="Say" />
</form>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<p class="bottomtext">
<!--Again we display the bot name, and also the hostname.-->
You are speaking with <bot name="name"/> from <hostname/>.
</p>
<p class="bottomtext">
<!--Here is an example of getting another bot predicate value (master).-->
<bot name="name"/>'s botmaster is <bot name="master"/>.
</p>
<p>
You can:
</p>
<ul>
<li>
<p>
<!--This link will request a login form.-->
log in.
</p>
</li>
<li>
<p>
<!--This link will request a new user registration form.-->
register a new username and password.
</p>
</li>
</ul>
</td>
</tr>
</table>
<audio id="audio" onended="document.forms[0].elements[0].focus();" controls="controls" autoplay="autoplay" src="http://translate.google.com/translate_tts?tl=en&q=><response/>" type="audio/mpeg"></audio>
</body>
</html>
With jQuery:
$('input').val(window.location.hash.substring(1));
Without jQuery:
document.getElementsByTagName('input')[0].value = window.location.hash.substring(1);
Either way, you have to make sure the DOM is loaded. If you want to unescape it, use decodeURIComponent E.g.:
window.addEventListener("load", function()
{
document.getElementsByTagName('input')[0].value = decodeURIComponent(window.location.hash.substring(1));
}, false);
window.location = window.location + '#' + document.getElementById('inputbox').text;