I have a span where I want to display a jQuery UI icon ( .ui-icon-plusthick ). This is the code:
<div>
<div id="pop">
<label for="ptitle">Plot title: </label>
<textarea class="nrtextarea" id="ptitle" maxlength="80" />
<span class="ui-icon-plusthick" title="Add"></span>
</div>
</div>
Via CSS I tried setting:
display: inline-block;
width: 20px;
height: 20px;
But with no result; moreover width and height remain 0px x 16px. What am I doing wrong?
Thanks
Try changing the class to:
class="ui-icon ui-icon-plusthick"
First off all if its a mouseover/hover event you want to tricker you have to apply the css to the class with a trailing :hover
.ui-icon-plusthick:hover{
display: inline-block;
width: 20px;
height: 20px;
}
Related
I have created a demo (not in Jsfiddle, couldn't get it to work in device):
http://i283951.iris.fhict.nl/test.html
When I open this on my iPad and scroll down all the way and then click on the input, it scrolls all the way up to the top and then shows the keyboard.
I'm pretty sure this also happens with a iPhone, on my android I don't have those problems. So I think it's iOs related.
body {
margin: 0;
padding: 0;
height: 2000px;
}
.top {
width: 100%;
height: 50px;
position: fixed;
background-color: #AA3939;
}
.input-group {
margin-top: 12px;
margin-left: 50px;
}
<html>
<head>
</head>
<body>
<div class="top">
<div class="input-group">
<input type="search" placeholder="Search...">
<button type="submit">Submit</button>
</div>
</div>
</body>
</html>
I think you could maybe prevent this by using the same like described here:
https://stackoverflow.com/a/7771215/1501847
For a web/html app running inside iOS Safari you want something like
document.ontouchmove = function(event){
event.preventDefault();
}
With select tag draggable does not work. What can I do with this?
<div id="draggable">
<select style="width: 200px;">
</select>
</div>
$(document).ready(function(){
$('#draggable').draggable();
});
Demo: https://jsfiddle.net/wrqLwyk6/2/
This may help you
HTML:
<ul id="draggable">
<li>
<select style="width: 200px;">
<option>56456456456</option>
<option>sdfsdf</option>
</select>
</li>
<ul>
CSS:
#draggable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#draggable li { margin: 0 3px 3px 3px; padding: 0.4em; cursor:move; }
Script:
$(document).ready(function(){
$('#draggable').draggable();
});
Check at : https://jsfiddle.net/759td80m/
Actually, the <div> is draggable, but you should actually click and drag on the <div> itself, not the <select>. Almost all of the form controls like <textarea> blocks dragging in similar way. To test this, just add a background color or something to <div> and drag the remaining area to the right of <select>.
But users wouldn't be aware of this invisible area (if there is any). It is to handle such situations we have the handle option:
$(document).ready(function() {
$('#draggable').draggable({
handle: '.handle'
});
});
#draggable .handle {
display: inline-block;
float: left;
width: 20px;
height: 20px;
background: dodgerblue;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable">
<span class="handle"></span>
<select style="width: 200px;">
</select>
</div>
In the demo, click and drag the blue box which is used as handle.
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I have a page with two lists on it. When I test on my iPhone 5, underneath the lists there is a load of extra blank space and a random blank line. (See image below)
I am not using the footer data-role="footer". Just data-role="content" and data-role="page". I have tried using the footer but it makes no difference.
When I test on a web browser all appears fine, so I cannot use the element inspector to find out whats wrong.
Would anyone know how to get rid of this? (ps I am running this on Cordova if that matters)
My HTML is:
<div data-role="page" data-title="Conversation">
<div data-role="header">
Back
<h1>Conversation</h1>
</div><!--HEADER-->
<div data-role="content">
<ul data-role="listview">
<li><a id="facebook" href="#"><img class="ui-li-icon" src="img/facebook.png"/>Facebook</a></li>
<li><a id="twitter" href="#"><img class="ui-li-icon" src="img/twitter.png"/>Twitter</a></li>
<li><a id="youtube" href="#"><img class="ui-li-icon" src="img/youtube.png"/>YouTube</a></li>
<li><a id="instagram" href="#"><img class="ui-li-icon" src="img/instagram.png"/>Instagram</a></li>
</ul>
<div class="yeldivider"></div>
<ul data-role="listview">
<li><a id="tickets" href="#"><img class="ui-li-icon" src="img/ticketsicon.png"/>Tickets</a></li>
</ul>
</div><!--CONTENT-->
</div><!--PAGE-->
There is no custom CSS other then the .yeldivider which appears between to two lists.
.yeldivider {
background-color:#ffeb00;
height: 40px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
}
This is a wild guess but sometimes content DIV has a problem with vertical stretching.
Worst case scenario, give it some id or class, like this:
<div data-role="content" class="cover-screen">
//Content goes here
</div>
And use this CSS if you don't have a footer:
.cover-screen {
position: absolute;
top: 43px !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
or this CSS if you have a footer:
.cover-screen {
position: absolute;
top: 43px !important;
bottom: 43px !important;
left: 0 !important;
right: 0 !important;
}
And like I told you this is just a wild guess.
Working fine here DEMO http://jsfiddle.net/yeyene/SjbMd/ and already tested on iPhone.
I use these...
jquery.mobile-1.3.1.min.css
jquery-1.9.1.min.js Remove
jquery.mobile-1.3.1.min.js
what about yours?
CSS
.yeldivider {
background-color:#ffeb00;
height: 40px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
}
How can I display both left, right data-icons for a button in jquerymobile.
Thanks in advance.
Thanks,
nehatha
In jQuerymobile documentation, you can fix icon position to one area. If you want to display both (left and right), customized CSS and JS are needed.
data-iconpos="left"
data-iconpos="right"
data-iconpos="top"
data-iconpos="bottom"
Try this in your header part:
<div data-role="header">
Home
<h1>Add Contacts</h1>
Search
</div>
Create a grid inside your button, then add an image in the left column then css style it to look the same
<a data-role="button" data-transition="slide" data-theme="b" href="#"
data-icon="arrow-r" data-iconpos="right">
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="image.png" class="iconleft"/>
</div>
<div class="ui-block-b">
Button
</div>
<div class="ui-block-c">
</div>
</div>
</a>
CSS:
.iconleft {
position: absolute;
top: 50%;
margin-top: -9px;
left: -5px;
width: 18px;
height: 18px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4);
box-shadow: 0 1px 0 rgba(255,255,255,.4);
background-color: #666;
background-color: rgba(0,0,0,.4);
background-image: url(images/icons-18-white.png);
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
You can always do it the other way around, with the left being the dataicon and right being image but it doesn't really matter.
See my working example here or this fiddle