I'm new to working with jQuery mobile forms and CSS. I've build a jQuery Mobile form that is contained in a div and I'd like to be able to adjust the position of the form elements withing the , but am not having any luck so far. Below I have unsucessfully tried to align the "Submit" button with the bottom of the container using CSS. Can any one suggest a good way to do this?
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<style type="text/css">
#submitButton {
position: absolute;
bottom: 0%;
width: 50px;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="lr" style="height: 500px;">
<form action="forms-sample-response.php" method="get" style="background-color:green; height: 100%;">
<label for="select-choice-0" class="select">Select Label:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
<option value="item4">Item 4</option>
</select>
<div id="preview"></div>
<button type="button" data-theme="a"
name="Choose" value="submit-value">Choose</button>
<label for="textarea">Text Area Label:</label>
<textarea name="textarea" id="textarea-a"></textarea>
<button id="submitButton" class="ui-btn-top" type="button"
data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
JQM alters the html and applies alot of classes to your original button. If you inspect the element you can see that it looks completely different. Instead of playing with what JQM created too much you can just wrap the button with another div and position that div. i.e.
<div id="submitBtnWrap">
<button id="submitButton" class="ui-btn-top" type="button" data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
Then apply your css to the wrapper div.
#submitBtnWrap {
position: absolute;
bottom: 0%;
width: 50px;
}
Related
Hi I have a disabled select and I would like to be able to drag it. Even a fake select would be great as long as it looks like a select.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>
<script>
$( function() {
$( ".draggable" ).draggable();
} );
</script>
</head>
<body>
<div class="ui-widget-content draggable">
<select disabled>
<option value="">Cannot be dragged</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div>
<span class="ui-widget-content draggable">Can be dragged </span>
</div>
</body>
</html>
The primary issue is bubbling of the Click event. The disabled Select element is causing the Click event to never reach the parent element.
To address this, your wrapper needs to have some white space for the User to be able to click the Div so they can drag it.
Working Example:
$(function() {
$(".draggable").draggable();
});
.draggable {
padding: 7px;
display: inline-block;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<div class="ui-widget">
<div class="ui-widget-content draggable">
<select disabled>
<option value="">Cannot be dragged</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div>
<span class="ui-widget-content draggable">Can be dragged </span>
</div>
</div>
Also, if you're using jQuery Theming, you need to wrap ui-widget-content inside a ui-widget for proper activation.
I would advise using a Handle if possible:
<span class="ui-icon ui-icon-grip-dotted-vertical"></span>
With:
$(".draggable").draggable({
handle: ".ui-icon-grip-dotted-vertical"
});
I could not find a javascript solution. Using css I created a div and set the position to absolute and use it to cover the select. Instead of the click being swallowed by the select it is accepted by the div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>
<script>
$( function() {
$( ".draggable" ).draggable();
} );
</script>
<style>
.draggable
{
display: inline-block;
}
.draggable-input-workaround
{
background-color:transparent;
width:100%;
height:100%;
position:absolute;
}
</style>
</head>
<body>
<div class="ui-widget-content draggable" style="border-style:solid" >
<div class='draggable-input-workaround'>
</div>
<select disabled>
<option value="">Cannot be dragged</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div>
<span class="ui-widget-content draggable">Can be dragged </span>
</div>
</body>
</html>
JSFiddle: https://jsfiddle.net/va4p7b7e/
I am using bootstrap with jquery chosen from (https://harvesthq.github.io/chosen/
to modify the select input to allow for a more user friendly interface. But whenever I add a select input type in the second column, it adds padding or margin(?) to the first column (as seen by the blue background in the above JSFiddle).
Anyone know why the green background from the first column doesn't fully cover the first column? It should but it doesn't. If I remove the select and button from the second column, everything seems fine.
I can modify the css of the first column by adding padding to the column but that makes it non-responsive since if I resize the browser, it changes how much padding is needed.
Code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: blue;">
<div class="col-xs-5" style="background-color: green;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
<div class="col-xs-7" style="background-color: purple;">
<select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
<option value=""></option>
</select>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script>
jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
</script>
</body>
</html>
Try using flex, give display: flex to parent and flex: 5; flex: 7; to child columns
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: blue; display: flex;">
<div class="col-xs-5" style="background-color: green; flex: 5;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
<div class="col-xs-7" style="background-color: purple; flex: 7;">
<select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
<option value=""></option>
</select>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script>
jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
</script>
</body>
</html>
<div class="row" style="background-color: blue; line-height:35px;">
<div class="col-xs-5" style="background-color: green;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
Add Line height to define a background then its render proper.
I'm new to the ARIA thing and from what I've read on the internet about it nothing says something should be installed in order for this to work. I've tried a very simple example but nothing happens except pure html5 with a little css that I wrote in the style tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h1>ARIA<h1>
<style>
input:focus + [role="tooltip"] {
display: block;
position: absolute;
top: 100%;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>
</body>
</html>
I'm clearly doing something wrong, so can someone please tell me what exactly? :D
Here is a small piece of HTML.
<html>
<body>
<div id="containerDiv" style="background-color:red; height: 200px">
<div id="topDiv" style="background-color:green">
<input type="button">1</input>
<div>
<div id="textAreaDiv" style="background-color:blue;width:100%; height:100%;">
<textarea style="width:100%; height:100%;">123</textarea>
</div>
<div id="bottomDiv" style="background-color:purple">
<input type="radio" name="Milk" value="Milk">Milk</input>
<input type="radio" name="Butter" value="Butter">Butter</input>
</div>
</div>
</body>
</html>
What I am trying to do it to make textAreaDiv.height be containerDiv.height - (topDiv.height + bottomDiv.height). This works perfectly in Chrome, but not in IE9. In IE9 the textarea's height is about two character's height. Any idea how to get this to work in IE9 the same as in Chrome?
Here is a screen cap of what I am getting:
http://postimage.org/image/bfn6bsalv/
UPDATE
Here is a solution with javascript, but I would still like a purely CSS solution
<html>
<head>
<script type="text/javascript" src="JQuery-1.7.2.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var textHeight = $('#containerDiv').height() - ($('#topDiv').height() + $('#bottomDiv').height());
$('#textBox').height(textHeight);
});
</script>
<div id="containerDiv" style="background-color:red; height: 400px">
<div id="topDiv" style="background-color:green;height:25px;">
<input type="button">1</input>
</div>
<div id="textAreaDiv" style="background-color:blue;width:100%;">
<textarea id="textBox" style="width:100%;">123</textarea>
</div>
<div id="bottomDiv" style="background-color:purple;height:25px;">
<input type="radio" name="Milk" value="Milk">Milk</input>
<input type="radio" name="Butter" value="Butter">Butter</input>
</div>
</div>
</body>
</html>
I'm glad you found something that worked. I wanted to let you know I see why it didn't work. Your code isn't valid. The closing tag for topdiv is missing the forward slash.
Using JqueryMobile, I wish to achieve the following layout:
Having nice decorations boxes to separate my input lines
Having one checkbox aligned vertically with an input text field, both on the same line
But after many attempts, the only layout I could come from with is the following:
The first attempt looks kind of right using jquerymobile grids, but my checkbox is not selectable anymore and remains checked forever. The second attempts uses the fieldset as proposed by the jquerymobile, but, I loose the checkbox and I tried using the css float property, without success.
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body style="font-size: 12px;">
<div data-role="page" id="one">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 20%;" >
<div class="ui-bar ui-bar-e" style="height:24px; padding: .4em 4px;">
<div class="ui-checkbox">
<label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span>
</span>
</label>
</div>
</div>
</div>
<div class="ui-block-b" style="width: 80%;" >
<div class="ui-bar ui-bar-e" style="height:24px">Block B</div>
</div>
</div>
<div style="height: 200px;">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" class="custom" />
<label for="checkbox-mini-0" > </label>
<input type="text" name="texta" id="texta" class="custom" style="width:36px;" />
</fieldset>
<div style="height: 30px; border:1px solid lightgray;">
</div>
<div style="height: 30px; border:1px solid lightgray;">
</div>
</div>
</div>
</div>
</body>
</html>
Any help or comments to achieve my goal would be appreciated ?
Online editor: You can access the html file also on http://jsfiddle.net/alain_lavoie/XhsEh/
http://jsfiddle.net/XAsyy/110/
Updating from Nirmal Patel ans, I found textarea to work with checkboxes and if you do not want the textarea to grow:
data-role="none" ie. <textarea id="test" data-role="none"></textarea>
http://jsfiddle.net/XAsyy/144/
or, use:
css resize: none;
http://jsfiddle.net/nirmaljpatel/XAsyy/