The below code draws a lager blue rectangle border around a close button. It only happens in Chrome. The chrome is Version 46.0.2490.86
I tried playing with CSS styling but didn't help. The below sample code is from jQuery.com site. I am a novice in area of HTML,CSS, and jQuery, so please provide detailed answer that would help me to resolve the issue. Thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Use this css code:
.ui-button:focus { outline:none !important }
Related
Trying to set data-color-scheme attribute to match nativeTheme theme to fix an issue whereby text color defaults to black triggering a transition when prefers-color-scheme: dark sets color to white.
<!DOCTYPE html>
<html lang="en" data-color-scheme="auto">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="root"></div>
</body>
</html>
Looking for a workaround to get around this or if there is a better way to resolve the issue I am open to adjusting the code..
Here is the situation:
If I do not use a doctype then the bars icon is appearing just fine within a controlgroup, however as soon as I add the doctype then it seems to flip to the plus icon instead.
The only change is adding the doctype to the top of the file and the icon flips from bars to plus.
Doesn't matter if it is jQuery Mobile 1.3.1 or 1.3.2, having the same results
Has anyone encountered this or found a way around it? I really want the bars icon to be displayed and am trying to avoid not using the doctype declaration so the code can validate properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#import url('include/jquery.mobile-1.3.2.min.css');
</style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="NO" />
<script src="include/jquery-1.9.1.min.js"></script>
<script src="include/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mobile">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" class="ui-body">
Test
</div>
</div>
</div>
</body>
</html>
EDIT: Same issue occurs with the GRID icon
This is just a typo. Replace
data-icon="Bars"
with
data-icon="bars"
And your'e good to go. You have to follow the exact case when it comes to images. The full set can be found here : http://api.jquerymobile.com/icons/
Here's a demo : http://jsfiddle.net/hungerpain/cpRh2/1/
I am trying to accomplish a simple slide in popup animation in jquery mobile. I tested this on the desktop browser (chrome and firefox) and works fine. But in mobile i get the following results on pressing the button:
The popup comes in fine but creates a white space to the right of the screen which is visible if the user slides to the right. Dismissing the popup removes this white space. This only happens if the popup is triggered using "slide" transition. Does anyone know the reason for this behavior.
I can manually resize the window but I am not sure what event fires after the popup is done sliding in.
(I had images to show this but I don't have 10 rep so I cannot post them :( )
Does anyone know why this is happening. I am testing with Droid Razr Maxx (running Jelly Bean). I have tested with chrome, firefox and the default browser on the device. They all produce the same result. Here is my code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
Pop Up
<div data-role="popup" id="pop" data-overlay-theme="a">
<p>Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup</p>
</div>
</div>
</body>
</html>
Upon further research, I found out that this issue was fixed in the latest version of jquery mobile (1.4) which is still in alpha phase.
http://jsbin.com/edeluh/32
I have the following media queries set up to target the various iOS devices (iPad3, iPad2, iPhone4, iPhone3). When I load this page with an iPhone3 and an iPad2, the correct divs are colored in. When I load this page with an iPad3 however, the iPad2 AND the iPhone4 styles are loaded, but NOT the iPad3. (Can't test the iPhone4 at the moment.) Any ideas?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="ipad2.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
<link rel="stylesheet" href="iphone4.css" media="only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="iphone3.css" media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
</head>
<body>
<div id="ipad3" style="width:200px;height:200px;border:1px solid black"></div>
<div id="ipad2" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone4" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone3" style="width:200px;height:200px;border:1px solid black"></div>
ipad3 should be RED
<br>
ipad2 should be GREEN
<br>
iphone4 should be BLUE
<br>
iphone3 should be ORANGE
</body>
</html>
..and the 4 css files are coded accordingly (this example is the iPad3.css file):
#ipad3 { background-color: red; }
Because you have the width of the viewport set to device-width, the iPad3 screen resolution will still get reported as 1024x768, but the device-pixel-ratio will be 2.
To target the iPad 3 you can use:
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.5)" type="text/css" />
The pixel dimensions are the same, but the pixel-ratio changes compared to the original iPad and the iPad 2.
Robbo, your code is using: -webkit-min-device-pixel-ratio:0 which is an invalid statement. The non-retina devices will have a pixel ration of 1. That's probably why the iPad 3 picks up both stylesheets.
I need to open a popup window to a custom size. Using suggestions from jQuery mobile docs I can get the custom size to work when I load the page with ajax (in the same .html document). When I have a separate .html document, it doesn't load the custom width I specify.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<style>
.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
max-width: 800px;
margin: 10% auto 15px auto;
}
</style>
</head>
<body>
<div data-role="page" id="popup">
<div data-role="content">
<a data-role="button" href="#" data-rel="back">back</a>
</div>
</div>
</body>
</html>
This is the code. If I link to it within the same file, and just use
popup
It works fine. You can see the css rules that jQuery Mobile says to add if you want to change the width (jQuery Mobile Dialog docs).
I answered my own question. I found that with the ajax loading, when the page is fetched it only gets the content from the target page. If I want to provide some custom CSS to be applied to the target page, I need to have it on the parent page (or the page that is calling the popup).