I'm trying to horizontally align a checkbox and it's label in Rails. I'm using bootstrap as well. any help is appreciated.
<p>
<%= label_tag(:relo, "Willing to relocate:", class: "checkbox") %>
<%= check_box_tag :relo, value = "true", checked = false, class: "" %>
</p>
Vertical-align sometimes will require two inline elements next to each other to function correctly.
'nowrap' means that the whole label text always stays next to the checkbox.
in your css file...
.checkboxes label {
display: block;
float: left;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}
in your view...
<form>
<div class="checkboxes">
<label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
<label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
<label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
</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 :).
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;
}
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 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
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;
}