In the header of a page of my mobile app, I have :
<header data-role="header">
<h1>title</h1>
<select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="myapp-shareicon" data-iconpos="notext" onchange="handleSocialShare()">
<option value="facebook">Share on Facebook</option>
<option value="twitter">Tweet</option>
<option value="email">Email</option>
</select>
Credits
</header>
but the select button is on the next line, whereas I want it on the same line.
I tried a few things, but I can't make it work.
Can you help me find the right CSS?
http://jsfiddle.net/kadaj/593Ba/
<header data-role="header" class="header">
<span class="title">title</span>
<div class="share-it-wrapper">
<select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="myapp-shareicon" data-iconpos="notext" onchange="handleSocialShare()">
<option value="facebook">Share on Facebook</option>
<option value="twitter">Tweet</option>
<option value="email">Email</option>
</select>
</div>
Credits
</header>
css
.header {
padding: .5em;
}
.title {
font-weight: bold;
font-size: 16px;
padding: .5em;
}
.share-it-wrapper {
margin: -2.4em 0 0 3em;
}
Try with this:
<select data-inline="true" name="select-choice-share" id="select-choice-share" class="ui-btn-left shareitbutton" data-icon="myapp-shareicon" data-iconpos="notext">
<option value="facebook">Share on Facebook</option>
<option value="twitter">Tweet</option>
<option value="email">Email</option>
</select>
I added the data-inline attribute and the class ui-btn-left.
Also you need some CSS as .ui-select has by default a relative position:
.ui-header .ui-select{
position: absolute;
top: .3125em;
}
Demo here.
Related
I need to fix the header when focusing the input and select fields. We are successfully fixed the header in android and windows environment. But in iPhone we are facing the below issue please see in screen shots 2 and 3
We are using jquerymobile 1.4.0
Please any one help me we are trying this issue almost one month still we are not resolved this issue.
screen shot-1
screen shot-2
screen shot-3
(function(){
var targetElem = $('.fixedElement'), // or more than one
$doc = $(document),
offsetY, scrollY, changeY;
if( !targetElem.length || !navigator.userAgent.match(/iPhone|iPad|iPod/i) )
return;
$doc.on('focus.iOSKeyboardFix', 'input, textarea, [contenteditable]', bind);
function bind(){
$(window).on('scroll.iOSKeyboardFix', react);
react();
}
function react(){
offsetY = targetElem.offset().top;
scrollY = $(window).scrollTop();
changeY = offsetY - scrollY;
targetElem.css({'top':'-'+ changeY +'px'});
// Instead of the above, I personally just do:
// targetElem.css('opacity', 0);
$doc.on('blur.iOSKeyboardFix', 'input, textarea, [contenteditable]', unbind)
.on('touchend.iOSKeyboardFix', unbind);
}
function unbind(){
targetElem.removeAttr('style');
document.activeElement.blur();
$(window).off('scroll.iOSKeyboardFix');
$doc.off('touchend.iOSKeyboardFix blur.iOSKeyboardFix');
}
})();
[data-role="page"] {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.ui-header {
position: fixed !important;
top: 0px !important;
right:0px;
left:0px;
text-align: center;
z-index: 1000;
width: 100%;
height: 40px !important;
background: #aa2719 !important;
border: none !important;
padding: 0px !important;
font-weight: normal;
opacity: 1 !important;
}
.ui-footer {
position: fixed !important;
bottom: 0px !important;
right:0px;
left:0px;
text-align: center;
z-index: 1000;
width: 100%;
height: 40px !important;
background: #aa2719 !important;
border: none !important;
padding: 0px !important;
font-weight: normal;
opacity: 1 !important;
}
<div data-role="page" id="page">
<div data-role="content" style="padding: 15px">
<div id="header" data-role="header" data-hide-during-focus="false" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" class="ui-header" style="position:fixed;-webkit-overflow-scrolling: touch;right:20px;bottom:20px;-webkit-backface-visibility: hidden;">
<h3>Header</h3>
</div>
<label for="text">Text Input:</label>
<input type="text" name="text" id="text1">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text2">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text3">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text4">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text5">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text6">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text7">
<select name="select" id="select1">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
<option value="option5">Option5</option>
<option value="option6">Option6</option>
<option value="option7">Option7</option>
<option value="option8">Option8</option>
<option value="option9">Option9</option>
<option value="option11">Option11</option>
<option value="option22">Option22</option>
<option value="option33">Option33</option>
<option value="option44">Option44</option>
</select>
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
<textarea id="textarea3"></textarea>
<textarea id="textarea4"></textarea>
Button
<div id="footer" data-role="footer" data-position="fixed" data-hide-during-focus="false" data-fullscreen="true" data-tap-toggle="false" class="ui-footer">
<h3>Footer</h3>
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
i'm trying to print my page, that i created with bootstrap.
And on the page i have select input control.
When it's printed... it has little triangle, that implicates this field is select field. But i do not want to set this information printed.
Do anyone know how to remove this triangle from printing? This one
And here is how my code looks:
<div class="col-sm-6 col-xs-12">
<span class="hidden-print">Wybierz z listy </span><!-- todo Radiobutton-->
<div class="input-group">
<select name="RAdiagnosisSelect"
class="form-control"
multiple-limit="1"
ng-model="visit.diagnosisId"
ng-disabled="!technical.firstVisit && visit.RADiagnosis!=2"
required>
<option value="1">M05.8 Inne sero-dodatnie reumatoidalne zapalenie stawów</option>
<option value="2">M06.0 Surowiczoujemne reumatoidalne zapalenie stawów</option>
<!--<option value="3">M06.1 Choroba Stilla u osoby dorosłej</option>-->
</select>
</div>
</div>
And i'm using normal printing library:
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all">
Write this style
<style>
#media print {
.caret {display:none;}
}
</style>
You may hide it behind another element, for instance :before
here is a fiddle
Wrap your select with a div:
.input-group {
position: relative;
}
.input-group:before {
content: '';
position: absolute;
width: 29px;
height: calc(100% - 2px);
background: white;
top:1px;
right:1px;
z-index: 1;
}
.select-wrapper {
position: relative;
z-index: 0;
}
.select {
border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6 col-xs-12">
<span class="hidden-print">Wybierz z listy </span><!-- todo Radiobutton-->
<div class="input-group">
<div class="select-wrapper">
<select name="RAdiagnosisSelect"
class="form-control"
multiple-limit="1"
ng-model="visit.diagnosisId"
ng-disabled="!technical.firstVisit && visit.RADiagnosis!=2"
required>
<option value="1">M05.8 Inne sero-dodatnie reumatoidalne zapalenie stawów</option>
<option value="2">M06.0 Surowiczoujemne reumatoidalne zapalenie stawów</option>
<!--<option value="3">M06.1 Choroba Stilla u osoby dorosłej</option>-->
</select>
</div>
</div>
</div>
To be honest i did it in other way.
I've split the visible part and printing part.
And got one code from showing the user content, second to printing.
It worked well, so i do not have problem with formatting.
So, the answer is: use hidden-print, and visible-print :).
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;
}
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");
In my header, I have a custom icon to open a select menu.
The button is displayed without text, but it has the default appearance of Jquery mobile buttons like below :
<form name="actions" action="" method="post">
<div class="ui-select ui-btn-right" data-inline="true">
<select name="select-action" id="select-action" data-native-menu="true" data-icon="myapp-actions" data-iconpos="notext" data-inline="true" tabindex="-1">
<option value="save">Save</option>
<option value="print">Print</option>
<option value="share">Share</option>
</select>
</div>
</form>
My aim is to get rid of the default background with the circle to have the icon bigger.
Is it possible to do that with jQuery mobile ?
I think I could add a normal link with my icon set as a background image in css, but I don't know how to make it show the select open.
You might need to tweak it here and there but you're going to have to override the CSS that jQM applies
http://jsfiddle.net/phillpafford/vsw3r/1/
CSS
.ui-icon-myapp-actions {
background-image: url("http://i.stack.imgur.com/YP6jU.png");
width:40px;
height:36px;
}
.ui-btn-icon-notext {
width:40px;
height:36px;
}
.ui-btn-up-c {
border: 0px;
}
.ui-btn-icon-notext .ui-btn-inner {
padding: 0px;
}
.ui-btn-inner {
border-top: 0px;
}
HTML
<form name="actions" action="" method="post">
<div class="ui-select ui-btn-right" data-inline="true">
<select name="select-action" id="select-action" data-icon="myapp-actions" tabindex="-1" data-inline="true" data-corners="false" data-iconshadow="false" data-shadow="false" data-iconpos="notext">
<option value="save">Save</option>
<option value="print">Print</option>
<option value="share">Share</option>
</select>
</div>
</form>