I have a site that needs to have around 10 switches to control colors for various items. The switches need to be color coded to the item...so around 10 colors, 1 for each switch.
I've tried everything I can, with no luck. They all use the same custom color I set.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
<label class="form-check-label" for="flexSwitchCheckDefault">Label Text</label>
</div>
You can download my solution from Github.
Output is can't provide properly because .svg file is missing. You can go in github website by click in above link and download full project with .svg file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.check-color1:focus {
border-color: #ff0000;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(255, 0, 0, 0.25);
}
.check-color1:checked {
border-color: red;
}
.check-color2:focus {
border-color: #0d6efd;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(0, 103, 255, 0.25);
}
.check-color2:checked {
border-color: #0d6efd;
}
.check-color3:focus {
border-color: #0dcaf0;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(0, 212, 255, 0.25);
}
.check-color3:checked {
border-color: #0dcaf0;
}
.check-color4:focus {
border-color: #ffc107;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(255, 193, 8, 0.25);
}
.check-color4:checked {
border-color: #ffc107;
}
.check-color5:focus {
border-color: #198754;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(0, 255, 36, 0.25);
}
.check-color5:checked {
border-color: #198754;
}
.check-color6:focus {
border-color: #212529;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(33, 37, 41, 0.25);
}
.check-color6:checked {
border-color: #212529;
}
.form-switch .form-check-input:focus {
/* For download below .svg image you can go github website and download project(link provided in above) */
background-image: url("download.svg");
}
</style>
</head>
<body>
<div class="container my-5">
<div class="form-check form-switch">
<input class="form-check-input check-color1 bg-danger" type="checkbox" role="switch"
id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Male</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input check-color2 bg-primary" type="checkbox" role="switch"
id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Male</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input check-color3 bg-info" type="checkbox" role="switch"
id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Male</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input check-color4 bg-warning" type="checkbox" role="switch"
id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Male</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input check-color5 bg-success" type="checkbox" role="switch"
id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Male</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input check-color6 bg-dark" type="checkbox" role="switch"
id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Male</label>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Related
I have a problem with printing from HTML.
First of all I create a print preview page. Everything works well.
When I go to print only the part that interests me (sequence of A4 pages), only the first page is divided into two, it seems that a 'padding-top' is imposed higher than the imposed one. Basically the first footer is moved to the next page.
Here are two images, screen and print.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Report</title>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
#*librerie per abilitare la selezione delle righe*#
<link href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
#*libreria per stilizzare una select*#
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
#*<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>*#
<style type="text/css">
##Media print {
#ScreenDiv {
visibility: hidden;
display: none;
}
#PrintDiv {
visibility: visible;
display: normal;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0cm;
padding-left: 2cm;
padding-top: 1cm;
padding-right: 2cm;
padding-bottom: 0cm;
/*https://github.com/delight-im/HTML-Sheets-of-Paper/blob/gh-pages/css/sheets-of-paper-a4.css*/
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
.panel-footer {
page-break-after: always;
}
}
##media screen{
#ScreenDiv {
visibility: visible;
display: normal;
}
#PrintDiv {
visibility: hidden;
display: none;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-top: 80px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
padding-left: 2cm;
padding-top: 1cm;
padding-right: 2cm;
padding-bottom: 0cm;
/*https://github.com/delight-im/HTML-Sheets-of-Paper/blob/gh-pages/css/sheets-of-paper-a4.css*/
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
}
h3 {
margin-top: 0px;
color: dodgerblue !important;
text-align: center;
}
.col-fixed-30 {
width: 30%;
position: fixed;
background-color: white;
height: 100%;
z-index: 1;
}
.row-fixed-70 {
height: 70px;
position: fixed;
background-color: white;
width: 70%;
z-index: 1;
}
.col-offset-30 {
padding-left: 30%;
z-index: 0;
}
</style>
</head>
<body>
<div id="ScreenDiv">
<div class="container-fluid">
<div class="row">
<div class="col-fixed-30" style="padding:2px">
<h3 style="margin-top:30px; color:dodgerblue">Lista Report<span class="badge badge-default"></span></h3>
<div class="form-group">
<select id="AnnoSelect" name="AnnoSelect" class="selectpicker form-control" multiple title="Selezionare Anno"></select>
</div>
<div class="form-group">
<select id="TipoIspezioneSelect" name="AnnoSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Ispezione">
<option value="Ispezione Corrente">Ispezione Corrente</option>
<option value="Ispezione Corrente Straordinaria">Ispezione Corrente Straordinaria</option>
<option value="Ispezione Qualitativa">Ispezione Qualitativa</option>
<option value="Ispezione Dettagliata">Ispezione Dettagliata</option>
<option value="Ispezione Dettagliata Eccezionale">Ispezione Dettagliata Eccezionale</option>
<option value="Sorveglianza Speciale">Sorveglianza Speciale</option>
<option value="Sorveglianza Intensificata">Sorveglianza Intensificata</option>
<option value="Alta Sorveglianza">Alta Sorveglianza</option>
</select>
</div>
<div class="form-group">
<select id="TipoOperaSelect" name="TipoOperaSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Opera">
<option value="null">Da Gestire</option>
<option value="true">Approvate</option>
<option value="false">Rifiutate</option>
</select>
</div>
<div class="form-group">
<select id="ElementoSelect" name="ElementoSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Elemento">
<option value="null">Da Gestire</option>
<option value="true">Approvate</option>
<option value="false">Rifiutate</option>
</select>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Stampa1">
Collapsible Group 1
</a>
</h4>
</div>
<div id="Stampa1" class="panel-collapse collapse in">
<div class="panel-body">
<button id="StampaReport" class="btn btn-primary" type="button" style="margin-bottom:20px; margin-top:20px;"><i class="glyphicon glyphicon-print"></i> Stampa Report </button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Stampa2">
Collapsible Group 2
</a>
</h4>
</div>
<div id="Stampa2" class="panel-collapse collapse">
<div class="panel-body">
seconda Stampa
</div>
</div>
</div>
</div>
</div>
</div>
<div id="LayoutArea" class="col-md-12 col-offset-30" style="background-color:lightgray">
<div class="row row-fixed-70">
<h3 style="margin-top:30px; color:dodgerblue; text-align:center">Anteprima Report</h3>
</div>
<div class="row" id="LayoutStampa">
<page size="A4" id="page0">
<div class="panel-heading" style="height:45px">
<div class="table-responsive">
<table class="table table-condensed" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">
<tr><td id="headerLeft" style="width:30%" align="left">left</td><td id="headerCenter" align="center">center</td><td id="headerRight" style="width:30%" align="right">right</td></tr>
</table>
</div>
</div>
<div class="panel-body">
<h3 id="TitoloPagina">Anteprima Report</h3>
<div class="table-responsive" style="height:24cm;background-color:red">
<table class="table table-striped table-condensed" border=0 cellpadding=20 cellspacing=0 style="border-bottom: .13em solid #aaaaaa;font-size:10px">
#*<tr><th style="width:30%">#</th><th>name</th></tr>*#
<tr align="center"><td style="width:30%">1</td><td>100</td><td style="width:30%">DONALD TRUMP</td></tr>
<tr align="center"><td style="width:30%">2</td><td>100</td><td style="width:30%">BARACK OBAMA</td></tr>
<tr align="center"><td style="width:30%">3</td><td>100</td><td style="width:30%">BARACK OBAMA</td></tr>
</table>
</div>
</div>
<div class="panel-footer" style="height:45px">
<table class="table table-condensed" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">
<tr><td id="footerLeft" style="width:30%" align="left">left</td><td id="footerCenter" align="center">center</td><td id="footerRight" style="width:30%" align="right">right</td></tr>
</table>
</div>
</page>
</div>
</div>
</div>
</div>
<div id="PrintDiv">
</div>
<script>
var ListaOpere;
$(document).ready(function () {
var d = new Date();
var anno = d.getFullYear();
for (var i = anno; i >= 1990; i--) {
$("#AnnoSelect").append('<option value=' + i + '>' + i + '</option>');
}
$('#StampaReport').on('click', function () {
var clone = $('#LayoutStampa').clone();
$("#PrintDiv").append(clone);
$('#LayoutStampa').remove();
window.print();
$("#LayoutStampa").remove();
$('#LayoutArea').append(clone);
})
var testo = '<div class="panel-heading" style="height:45px">' +
'< div class="table-responsive" >' +
'<table class="table" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">' +
'<tr><td align=left> left</td><td align=right> right</td></tr>' +
'</table> </div > </div >'
var cloneCount = 1;
for (var i = cloneCount; i <= 10; i++) {
var clone = $('#page0').clone();
clone.attr('id', 'page' + i);
clone.find('h3[id=TitoloPagina]').text('Titolo' + i);
clone.find('td[id=headerLeft]').text('Macerata');
$("#LayoutStampa").append(clone);
//alert(i);
}
});
</script>
</body>
</html >
Where is the error?
Thanks
I found a solution. If imposed -60px on 'media print page margin-top', it adjusts everything.
But I realized that, all the solution, it does not work well on edge and explorer.
How it looks
Desired effect
I'm sure there's an answer somewhere, but I'm unable to find it. I've seen people use flex and it looked promising, but it just seems to break things up.
Original code:
.checkImg {
margin-left: 10px;
vertical-align: bottom;
}
form {
text-align: center;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
<form>
<!-- https://stackoverflow.com/questions/27838228/redirecting-the-user-to-the-same-page-after-login -->
Nickname:<br>
<input type="text" name="nickname"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
<br>
Password:<br>
<input type="password" name="password">
<br>
Email:<br>
<input type="email" name="email"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
<br><br>
<input type="submit" value="Submit">
<form>
</body>
</html>
Trying to set up the flex from here: How to use flexbox
How it went:
.checkImg {
margin-left: auto;
vertical-align: bottom;
}
form {
text-align: center;
}
div {
display: flex;
}
.flex {
flex: 1;
display: inline-flex;
justify-content: center;
text-align: center;
align-self: flex-start
}
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
<form>
<!-- https://stackoverflow.com/questions/27838228/redirecting-the-user-to-the-same-page-after-login -->
Nickname:<br>
<div><input class="flex" type="text" name="nickname"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img></div>
<br>
Password:<br>
<input type="password" name="password">
<br>
Email:<br>
<input type="email" name="email"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
<br><br>
<input type="submit" value="Submit">
<form>
</body>
</html>
I tried flex-grow: 0 (sets input on the left side, image on the right start, removing the stretching), align-items: flex-start and none of these seemed to work. It feels like I'm really close, but since this is my first encounter with flex, I can't just seem to find the right solution.
One of possible solutions, with flexbox. (Note: you can achieve same on many different ways). You can also use ::after pseudo-element, but in this example i kept your image. Trick is to set image position to absolute, and then it will not affect alignment.
<form>
<div >Nickname:<br>
<input type="text" name="nickname" ><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
</div>
<div>
Password:<br>
<input type="password" name="password">
</div>
<div>
Email:<br>
<input type="email" name="email"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
</div>
<div>
<input type="submit" value="Submit">
</div>
<form>
CSS:
form {
display:flex;
align-items:center;
flex-direction: column;
}
div {
margin:10px;
text-align:center;
position:relative;
}
.checkImg {
position:absolute;
right:-30px;
}
DEMO:
form {
display:flex;
align-items:center;
flex-direction: column;
}
div {
margin:10px;
text-align:center;
position:relative;
}
.checkImg {
position:absolute;
right:-30px;
}
<form>
<div >Nickname:<br>
<input type="text" name="nickname" ><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
</div>
<div>
Password:<br>
<input type="password" name="password">
</div>
<div>
Email:<br>
<input type="email" name="email"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
</div>
<div>
<input type="submit" value="Submit">
</div>
<form>
I'm trying to place two Kendo UI widgets side-by-side within an Angular-UI modal window.
My problem is that they are getting place one below the other as in the embedded screen shot.
Note the Dimensions List on top (<li ng-repeat), and the Dimension Grid on the bottom. I'd like these to be side-by-side :
Here's the HTML template, which is part of the Angular Bootstrap modal :
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>User Dimensions</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="radios-0">Choose One</label>
<div class="col-md-4">
<div class="radio">
<label for="radios-0">
<input name="radios" id="radio1" value="1" type="radio">
Defined Portfolios
</label>
</div>
<div class="radio">
<label for="radios-1">
<input name="radios" id="radio2" value="2" checked="checked" type="radio">
Specify Dimensions
</label>
</div>
</div>
<label class="col-md-4 control-label" for="radios-0">Dimensions</label>
<!-- *** KENDO SORTABLE *** -->
<div class="col-md-4">
<ul class="dim-list" kendo-sortable k-placeholder="settings.placeholder" k-hint="settings.hint">
<li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
</ul>
</div>
<!-- *** KENDO GRID *** -->
<div class="col-md-8">
<span id="userDimenGrid" kendo-grid="settings.userDimenGrid"
k-data-source="settings.userDimenGridDS"
k-options="settings.userDimenGridOptions"
k-rebind="settings.userDimenGridOptions" />
</div>
</div>
</fieldset>
</form>
<style scoped>
.dim-list li{
list-style-type:none;
background-color:silver;
font-size:12px;
font-weight:bold;
width: 180px;
margin: 5px;
line-height: 30px;
text-align: center;
border-radius: 3px;
cursor:move;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
I would like this to be side by side, but having much trouble formatting it as such within this <form> .
final solution :
I ended up spending more time working with bootstrap classes row and/or row-fluid, as well as col-lg-4.
It turns out the standard "form-group" class won't exactly work with what I want to do. Of course, since it's not exactly a form. Rather I'm placing Kendo UI widgets side by side.
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>User Dimensions</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="radios-0">Choose One</label>
<div class="row">
<div class="col-lg-4">
<div class="radio">
<label for="radios-0">
<input name="radios" id="radio1" value="1" type="radio">
Defined Portfolios
</label>
</div>
<div class="radio">
<label for="radios-1">
<input name="radios" id="radio2" value="2" checked="checked" type="radio">
Specify Dimensions
</label>
</div>
</div>
<div class="col-lg-8"></div>
</div>
<div class="row-fluid">
<div class="col-lg-3">
<ul class="dim-list" kendo-sortable k-hint="settings.hint" k-move="settings.move" k-end="settings.end" k-placeholder="settings.placeholder">
<li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
</ul>
</div>
<div class="col-lg-8">
<span id="userDimenGrid" kendo-grid="settings.userDimenGrid"
k-data-source="settings.userDimenGridDS"
k-options="settings.userDimenGridOptions"
k-rebind="settings.userDimenGridOptions" />
</div>
</div>
</div>
</fieldset>
</form>
<style scoped>
.dim-list li{
list-style-type:none;
display: inline-block;
background-color:silver;
font-size:12px;
font-weight:bold;
width: 180px;
margin: 5px;
line-height: 30px;
text-align: center;
border-radius: 3px;
cursor:move;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
<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.
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");