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>
Related
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 :).
My form has a select element and a group of radio-buttons. The values (and labels) of the radio buttons depend on which option was selected in the select-element. My plan is to house the radio buttons in a partial, and when the selected option changes, make an AJAX call to retrieve an updated version of it, then reinsert it into the form.
Is that a sensible solution? I know this could be handled better by Angular, but converting this page to an Angular app is probably beyond the scope of this small project.
Edit: I guess what I'm really asking is whether making an AJAX call for the radio buttons is a better solution than having all the radio buttons already on the page and using js/jquery to manipulate them (show/hide, check/uncheck).
As requested, here a generic approach, using native/vanilla Javascript. This is the code for a page in which the radio buttons must be loaded:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo radio loading w/ Ajax</title>
<style>
#radioContainer {
width: 275px;
height: 125px;
border: 1px solid black;
padding: 10px;
}
h3 {
margin-top: 0;
}
label {
display: inline-block;
width: 150px;
}
</style>
</head>
<body>
<form name="theForm">
<select name="preSelector" onchange="loadRadios()">
<option value=""> Select the car brand </option>
<option value="audi.html"> Audi </option>
<option value=""> BMW </option>
<option value=""> Mercedes </option>
</select>
<div id="radioContainer">
</div>
</form>
<script>
function loadRadios() {
var selectValue = filePath = theForm.elements['preSelector'].value;
var radioContainer = document.getElementById('radioContainer');
var ajaxRequest = new XMLHttpRequest();
if (selectValue != '') {
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
radioContainer.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open('GET',filePath,true);
ajaxRequest.send();
}
}
</script>
</body>
</html>
And this is the -- whole -- code of the file with the Audi radio buttons, audi.html:
<h3>Audi</h3>
<label>4-wheel drive: </label> yes <input type="radio" name="audi_4wheel" value="yes"> no <input type="radio" name="audi_4wheel" value="no">
<br>
<label>Airconditioning: </label> yes <input type="radio" name="audi_airco" value="yes"> no <input type="radio" name="audi_airco" value="no">
<br>
<label>Metallic paint: </label> yes <input type="radio" name="audi_metallic" value="yes"> no <input type="radio" name="audi_metallic" value="no">
.
That file should be put in the same directory as the 'mother page', or the path must be adapted.
I am assuming that you don't need to code for IE6; the code works in IE7+ and all other browsers. I should think that for you, the code is pretty much self-explanatory, for the rest. If not, just post a comment question, and I'll be happy to answer it.
When i create a radio button in jQuery mobile, a radio circle appear in the next of the created radio as appear in the photo , why this extra radio circle appear ? how can i solve this ?? please help me ...
<fieldset>
<legend> Gender </legend>
<div class="ui-grid-a">
<div class="ui-block-a ">
<input type="radio" id="Male" name="radio-group-1" value="Male" />
<label for="Male" data-inline="true">Male</label>
</div>
<div class="ui-block-b">
<input type="radio" id="Female" name="radio-group-1" value="Female" />
<label for="Female" data-inline="true" >Female</label>
</div>
</div>
Override .ui-radio class when you want to change radio button position.
.ui-radio {
float:right;
text-align:right;
}
Hide radio buttons with a transparent background
.ui-radio input[type="radio"] {
display: none;
}
Demo
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.
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;
}