I'm trying to horizontally align radio buttons below their label. The code works fine on chrome on my desktop but not on a Iphone either on safari or chrome. Here's the JS Fiddle
<div>
<div class='m' >
<h3 class='m1'>RES</h3>
<h3 class='m1'>SAIL</h3>
<h3 class='m1'>Crew</h3>
<h3 class='m1'>XCL</h3>
</div>
<div class='m'>
<input class='n1' type="radio" name="rsx" id="r" value="res">
<input class='n1' type="radio" name="rsx" id="r" value="sail">
<select id='n2' name="crewopen">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3 </option>
<option value="4">4 </option>
<option value="5">5 </option>
<option value="6">6 </option>
</select>
<input class='n1' type="radio" name="rsx" id="r" value="xcl">
</div>
</div>
and the CSS
.m{
clear:both;
margin:0 auto;
width:85%;
text-align:center;
}
.m1{
float:left;
width:25%;
margin:0;
}
.n1{
width:25%;
float:left;
text-align:right;
margin:0;
-webkit-appearance: radio;
}
#n2{
float:left;
width:15%;
margin-left:5%;
margin-right:5%;
}
Horizontally and vertically align radio input with their label. This code working is fine on iPhone on both Safari and Chrome.
<input class="radio-button" type="radio" name="sn" value="yes">
.radio-button{
width:10px;
height:10px;
-webkit-appearance: radio;
}
Wow, not a lot of interest in this one! Any way the answer (or at least one that works)
.n1{
width:5%;
margin-left:10%;
margin-right:10%
}
also, if you're using bootstrap you need to add:
input[type=radio]{
margin-left:10%
margin-right:10%
}
and you can remove the margin attributes in .n1
Related
Code (I'm working with Materialize CSS framework):
<form class="col s12" id="formRequer">
<div class="input-field col s6">
<select id="stdApply" name="stdApply" required>
<option value="" disabled selected>Escolha somente uma das opções</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Selecione o que quer requerer</label>
</div>
</form> <!-- END: form class="col s12" id="formRequer -->
<button class="btn waves-effect waves-light" type="submit" id="btn_submitRequer" form="formRequer">Enviar
<i class="material-icons right">send</i>
</button>
I copied the code excluding CSS and paste it on w3school and it worked fine!
Is it possible that HTMLService evalute() process exclude the required attribute from tag or exclude the value="" attribute from the first option (this is vital for HTML5 select tag works with required attribute)?
Any help?
Try this:
HTML:
<html>
<head></head>
<body>
<form>
<select id="stdApply" name="stdApply">
<option value="" selected>Escolha somente uma das opções</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Selecione o que quer requerer</label>
<br /><input type="button" value="Enviar" onClick="processForm(this.parentNode);" />
</form>
<script>
function processForm(obj) {
if(obj.stdApply.value!='') {
google.script.run.processForm(obj);
}else{
document.getElementById('stdApply').focus();
}
}
</script>
</body>
</html>
Google Script:
function processForm(obj) {
Browser.msgBox(obj.stdApply);
}
function showMyDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), 'Test');
}
Hi I want to Pass input elements values while clicking button using post method and pass values to next view using CI. When submitting the button with values in input elements and redirecting it works well. But When I'm refreshing after redirecting the page the values of input elements are lost and shows blank page/the page i display when the value becomes null.
1st View
<form action="<?php echo base_url() ?>Mapcontrol/display_garage_by_location" method="post">
<div class="section_1">
<select id="cmbcity" name="cmbcity" class="frm-field required">
<option value="null">Select Your City</option>
<option value="1">fghfghfghf</option>
<option value="2">fghfghfgh</option>
<option value="3">fghfgh</option>
<option value="4">ffffffff</option>
<option value="5">hhhh</option>
<option value="6">dddd</option>
<option value="7">treee</option>
<option value="8">kiu</option>
</select>
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="input-group">
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
<input type="text" id="txtPlaces" placeholder="Enter a location" />
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="section_1">
<select id="cmbvehicletype" name="cmbvehicletype" class="frm-field required">
<option value="null">Type</option>
<option value="cr">dd</option>
<option value="mb">ghjghjd</option>
<option value="tk">ghjghj</option>
<option value="ar">hgjghj</option>
<option value="bi">gggh</option>
<option value="ov">gg</option>
</select>
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="section_1">
<select id="cmbservice" name="cmbservice" class="frm-field required">
<option value="null">Select</option>
<option value="vr">vr</option>
<option value="oc">oc</option>
<option value="br">br</option>
<option value="vs">vc</option>
<option value="sp">cc</option>
<option value="os">cd</option>
</select>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-2 submit_button">
<input type="submit" id="searchindex" value="SEARCH"/>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
Controller
public function display_garage_by_location()
{
// Loading Library
$this->load->library('googlemaps');
//Initialize our map. Here you can also pass in additional parameters for customising the map
$this->googlemaps->initialize();
// Create the map. This will return the Javascript to be included in our pages <head></head> section and the HTML code to be
// placed where we want the map to appear.
$data['map'] = $this->googlemaps->create_map();
// Load our view, passing the map data that has just been created
//$this->load->view('my_view', $data);
$data['locationvalue']=$this->input->post('city2');
$data['latvalue']=$this->input->post('cityLat');
$data['longvalue']=$this->input->post('cityLng');
$data['vehicleid']=$this->input->post('cmbvehicletype');
$data['serviceid']=$this->input->post('cmbservice');
$this->garage_location_markers($data);
}
public function garage_location_markers($data)
{
$this->load->view('templates/_header');
$this->load->view('content/locations-in-marker-view',$data);
$this->load->view('templates/footer');
}
2nd View
// In Second View I want to display if location value is null then dispaly no data found else display search results ..
The Problem is When location is not null it displays the details but when i refresh the page again control go back to the controller and results no data found.. How to Solve this?
Try Like this
In View
View user
In Controller
public function FunctionName($id) # determine function that receiving incoming parameter
{
if (empty($id)) {
echo "Token Missed Matched";
}
else{
# get data from model
$result = $this->model_name->model_function($id);
if(empty($result))
{
echo "No data found";
}
else{
$this->load->view('view_name');
}
}
}
How do I add attributes to the buttons in a Quill-base WYSIWIG editor?
This is my code
<div class="quill-wrapper">
<div id="toolbar" class="ql-toolbar-container toolbar">
<div class="ql-format-group">
<span class="ql-bold ql-format-button"></span>
<span class="ql-italic ql-format-button"></span>
<span class="ql-strike ql-format-button"></span>
<span class="ql-underline ql-format-button"></span>
<span class="ql-link ql-format-button"></span>
<span class="ql-format-button ql-color"></span>
<span class="ql-format-separator"></span>
<select class="ql-font">
<option value="Times New Roman">Times New Roman</option>
</select>
<select class="ql-size">
<option value="small">Small</option>
<option value="normal">Normal</option>
<option value="large">Large</option>
</select>
</div>
</div>
<input type="hidden" id="postDesc" name="postDesc" value="pavitar dua">
<!-- Create the editor container -->
<div style="height:300px" class="form-control" id="editor" name="editor">
<div>Hello World!</div>
<div>Some initial <b>bold</b> text</div>
<div>
<br>
</div>
</div>
<div class="counter" id="counter"></div>
</div>
Now if I were to add colours to <span class="ql-format-button ql-color"></span>, I don't know how to do it.
Colors in Quill is a selectable format so you would add it exactly the same way you added font and size. Ex.
<select class="ql-color">
<option value="red">Red</option>
<option value="#00f">Blue</option>
<option value="rgb(255,255,0)">Yellow</option>
</select>
More details here: http://quilljs.com/docs/modules/toolbar/
I am trying to align this forms inputs. They are all the same size, the problem is that the labels are forcing the inputs to push to the right. I am trying to get it to look like this:
http://imgur.com/1J958bb
But it looks like this:
.formWrapper
{
display: block;
width: 1000px;
margin: 0 auto;
}
.personalInformation
{
width: 480px;
display: inline-block;
}
.submissionInformation
{
width: 480px;
display: inline-block;
vertical-align: top;
}
.col-center ul, li
{
list-style-type: none;
}
.col-center hr
{
border-bottom: 1px solid #000;
}
.col-center input, select
{
border-color: #000 !important;
}
.col-center label
{
font-style: italic;
padding: 5px;
}
#saveForm
{
border: 1px solid #000;
width: 150px;
height: 40px;
}
.insert
{
text-align: center;
padding-bottom: 15px;
}
.insert b
{
font-weight: lighter;
font-size: 32px;
}
.insert p
{
font-style: italic;
}
.italic
{
font-style: italic;
}
.bold
{
font-weight: bold;
}
li
{
padding: 10px;
}
http://codepen.io/anon/pen/xbMrBW
<div class="formWrapper">
<div class="col-center">
<div class="personalInformation">
<form>
<b>Personal Information</b>
<ul>
<li id="foli1" class="notranslate ">
<label class="desc" id="title1" for="Field1">
First Name
</label>
<input id="Field1" name="Field1" type="text" class="field text medium" value="" maxlength="255" tabindex="1" onkeyup="" placeholder="First Name" />
</li>
<li id="foli2" class="notranslate ">
<label class="desc" id="title2" for="Field2">
Last Name
</label>
<input id="Field2" name="Field2" type="text" class="field text medium" value="" maxlength="255" tabindex="2" onkeyup="" placeholder="Last Name" />
</li>
<li id="foli3" class="notranslate ">
<label class="desc" id="title3" for="Field3">
Phone Number
</label>
<input id="Field3" name="Field3" type="text" class="field text medium" value="" maxlength="255" tabindex="3" onkeyup="" placeholder="Phone Number" />
</li>
<li id="foli4" class="notranslate ">
<label class="desc" id="title4" for="Field4">
Email
</label>
<input id="Field4" name="Field4" type="text" class="field text medium" value="" maxlength="255" tabindex="4" onkeyup="" placeholder="Email" />
</li>
<li id="foli5" class="notranslate ">
<label class="desc" id="title5" for="Field5">
Address
</label>
<input id="Field5" name="Field5" type="text" class="field text medium" value="" maxlength="255" tabindex="5" onkeyup="" placeholder="Address" />
</li>
<li id="foli6" class="notranslate ">
<label class="desc" id="title6" for="Field6">
City
</label>
<input id="Field6" name="Field6" type="text" class="field text medium" value="" maxlength="255" tabindex="6" onkeyup="" placeholder="City" />
</li>
<li id="foli15" class="notranslate ">
<label class="desc" id="title15" for="Field15">
State
</label>
<select id="Field15" name="Field15" class="field select small" tabindex="7" >
<option value="" selected="selected">
</option>
<option value="Alabama" >
Alabama
</option>
<option value="Alaska" >
Alaska
</option>
<option value="Arizona" >
Arizona
</option>
<option value="Arkansas" >
Arkansas
</option>
<option value="California" >
California
</option>
<option value="Colorado" >
Colorado
</option>
<option value="Connecticut" >
Connecticut
</option>
<option value="Delaware" >
Delaware
</option>
<option value="Florida" >
Florida
</option>
<option value="Georgia" >
Georgia
</option>
<option value="Hawaii" >
Hawaii
</option>
<option value="Idaho" >
Idaho
</option>
<option value="Illinois" >
Illinois
</option>
<option value="Indiana" >
Indiana
</option>
<option value="Iowa" >
Iowa
</option>
<option value="Kansas" >
Kansas
</option>
<option value="Kentucky" >
Kentucky
</option>
<option value="Louisiana" >
Louisiana
</option>
<option value="Maine" >
Maine
</option>
<option value="Maryland" >
Maryland
</option>
<option value="Massachusetts" >
Massachusetts
</option>
<option value="Michigan" >
Michigan
</option>
<option value="Minnesota" >
Minnesota
</option>
<option value="Mississippi" >
Mississippi
</option>
<option value="Missouri" >
Missouri
</option>
<option value="Montana" >
Montana
</option>
<option value="Nebraska" >
Nebraska
</option>
<option value="Nevada" >
Nevada
</option>
<option value="New Hampshire" >
New Hampshire
</option>
<option value="New Jersey" >
New Jersey
</option>
<option value="New Mexico" >
New Mexico
</option>
<option value="New York" >
New York
</option>
<option value="North Carolina" >
North Carolina
</option>
<option value="North Dakota" >
North Dakota
</option>
<option value="Ohio" >
Ohio
</option>
<option value="Oklahoma" >
Oklahoma
</option>
<option value="Oregon" >
Oregon
</option>
<option value="Pennsylvania" >
Pennsylvania
</option>
<option value="Rhode Island" >
Rhode Island
</option>
<option value="South Carolina" >
South Carolina
</option>
<option value="South Dakota" >
South Dakota
</option>
<option value="Tennessee" >
Tennessee
</option>
<option value="Texas" >
Texas
</option>
<option value="Utah" >
Utah
</option>
<option value="Vermont" >
Vermont
</option>
<option value="Virginia" >
Virginia
</option>
<option value="Washington" >
Washington
</option>
<option value="West Virginia" >
West Virginia
</option>
<option value="Wisconsin" >
Wisconsin
</option>
<option value="Wyoming" >
Wyoming
</option>
</select>
</li>
<li id="foli11" class="notranslate ">
<label class="desc" id="title11" for="Field11">
Zip
</label>
<input id="Field11" name="Field11" type="text" class="field text small" value="" maxlength="255" tabindex="8" onkeyup="" placeholder="Zip" />
</li>
<li id="foli17" class="notranslate ">
<label class="desc" id="title17" for="Field17">
Website
</label>
<input id="Field17" name="Field17" type="text" class="field text medium" value="" maxlength="255" tabindex="9" onkeyup="" placeholder="Website" />
</li>
<li id="foli19" class="notranslate ">
<label class="desc" id="title19" for="Field19">
Instagram
</label>
<input id="Field19" name="Field19" type="text" class="field text medium" value="" maxlength="255" tabindex="10" onkeyup="" placeholder="Instagram" />
</li>
<li id="foli20" class="notranslate ">
<label class="desc" id="title20" for="Field20">
Facebook
</label>
<input id="Field20" name="Field20" type="text" class="field text medium" value="" maxlength="255" tabindex="11" onkeyup="" placeholder="Facebook" />
</li>
<li id="foli21" class="notranslate ">
<label class="desc" id="title21" for="Field21">
Twitter
</label>
<input id="Field21" name="Field21" type="text" class="field text medium" value="" maxlength="255" tabindex="12" onkeyup="" placeholder="Twitter" />
</li>
</div>
<div class="submissionInformation">
<b>Submission Information</b>
<li id="foli22" class="notranslate ">
<label class="desc" id="title22" for="Field22">
Medium
</label>
<select id="Field22" name="Field22" class="field select medium" tabindex="13" >
<option value="" selected="selected">
</option>
<option value="Paint" >
Paint
</option>
<option value="Illustration" >
Illustration
</option>
<option value="Photographer" >
Photographer
</option>
<option value="Sculptor" >
Sculptor
</option>
<option value="Jewelry" >
Jewelry
</option>
<option value="Maker" >
Maker
</option>
<option value="Mixed Media" >
Mixed Media
</option>
<option value="Other" >
Other
</option>
</select>
</li>
<li id="foli23" class="notranslate ">
<label class="desc" id="title23" for="Field23">
Other
</label>
<input id="Field23" name="Field23" type="text" class="field text medium" value="" maxlength="255" tabindex="14" onkeyup="" placeholder="Other" />
</li>
<li id="foli24" class="notranslate " >
<label class="desc" id="title24" for="Field24">
Piece 1
</label>
<input id="Field24" name="Field24" type="file" class="field file" size="12" tabindex="15" />
</li>
<li id="foli25" class="notranslate " >
<label class="desc" id="title25" for="Field25">
Piece 2
</label>
<input id="Field25" name="Field25" type="file" class="field file" size="12" tabindex="16" />
</li>
<li id="foli26" class="notranslate notStacked ">
<fieldset>
<![if !IE | (gte IE 8)]>
<legend id="title26" class="desc">
Is this your first showing?
</legend>
<![endif]>
<!--[if lt IE 8]>
<label id="title26" class="desc">
Is this your first showing?
</label>
<![endif]-->
<span>
<input id="Field26" name="Field26" type="checkbox" class="field checkbox" value="Yes" tabindex="17" />
<label class="choice" for="Field26">Yes</label>
</span>
<span>
<input id="Field27" name="Field27" type="checkbox" class="field checkbox" value="No" tabindex="18" />
<label class="choice" for="Field27">No</label>
</span>
</fieldset>
</li>
</div>
</div>
</div>
Thank you in advance.
One solution would be to style the labels this way :
label{
display:inline-block;
width:150px;
}
The inputs will all be aligned! If you also want to have the inputs have a fixed width (like in your picture), don't forget to style them too.
Hope it helps :)
I have the following problem with form submit on select onchange event with IE. Mozilla is fine but on IE when I var_vump($_POST['makes']) I can se it is empty.. My form is this:
<form name="makes_filter" id="makes_filter" action="" enctype="multipart/form-data" method="POST" accept-charset="utf-8">
Filter by:
<select name="makes" id="makes" style="width: 120px; text-align: left; margin-right: 5px; float: left;" onchange="document.forms.makes_filter.submit();">
<option style="text-align: center;" value=""> -- Make -- </option>
<option id="APPLE" value="APPLE">APPLE</option>
<option id="HTC" value="HTC">HTC</option>
<option id="LG" value="LG">LG</option>
<option id="NOKIA " value="NOKIA ">NOKIA </option>
</select>
</form>
Can you please help me to find out why this form submits empty value on selected option?
Thank you in advance !
Problem solved by removing another select with same name/id