I've noticed that the spaces that normally occur (case 1 below) on either side of an anchor disappear when they're centred within a flexbox (case 2).
I was able correct this by adding on either side (case 3) but this seems ugly. Is there a better way?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Sample Page</h1>
<div>
Case 1: This is a link to Google
</div>
<div class="d-flex justify-content-center">
Case 2: This is a second link to Google
</div>
<div class="d-flex justify-content-center">
Case 3: This is a third link to Google
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
You can do 2 things:
Add a flex gap, by adding the class gap-x (where x can be anything ranging 0-5) to your div with d-flex. This will add a space between all elements of the flex.
You can add a class px-1 to the a tag itself. It'll add a padding on left and right of the anchor tag without affecting other spaces.
Related
Trying to make a dialog box in jquerymobile 1.4.5 a larger width. According to an example AND the directions on http://demos.jquerymobile.com/1.4.5/pages-dialog/
I think this should work (but it doesn't seem to). I copied their example and then overrode the .ui-dialog-contain attribute as documented. I'm using a Mac/Chrome to render the page. And I have seen this post before, but I can't get anyone's solution to work. I think some of that might be because of old versions of jquerymobile.
.ui-dialog-contain {
max-width: 200px;
}
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog example - jQuery Mobile Demos</title>
<link href="favicon.ico" rel="shortcut icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<style type="text/css"> {
.ui-dialog-contain {
max-width: 1500px;
}
}
</style>
</head>
<body>
<div data-role="page" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Nightscape Creations Wallpapers</title>
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
This code is visible at www.NightscapeCreations.com on the mobile site.
It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.
If it's relevant, the remainder of the page might be similar to:
<body>
<div data-role="page" id="home">
Some text
</div>
<div data-role="page" id="liveWallpapers">
Some text
</div>
<div data-role="page" id="products">
Some text
</div>
<div data-role="page" id="about">
Some text
</div>
<div data-role="page" id="staticWallpapers">
Some text
</div>
</body>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</html>
EDIT 1
Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:
<!DOCTYPE html>
<html>
<head>
<title>Nightscape Creations Wallpapers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="page" id="home1">
<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included. Use the header button above to browse the mobile site, or
click here to visit the main site instead.
</div>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</body>
</html>
However, this does not cause the toolbars to appear.
Actually all your HTML code belongs inside the body tag. I bet you don't see any footer as well ;)
Edit
Just to clarify, the structure is supposed to be like that:
<!DOCTYPE ...>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- All visible HTML content goes here! -->
</body>
</html>
No HTML tags should be outside the body tag (except head, body & Doctype).
You can find more on page structures here.
Edit2
In addition to this, header and footer are supposed to be inside the data-role="page" div. jQuery displays one page at a time, think of it as a single HTML page. It has to include the complete structure of a single page (if you want header and footer, of course), like:
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>
I'm working on my first app in jQuery Mobile. I'm stuck on a select menu.
I've tried to copy/paste the "Your state" style at http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html and work it into my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CAST</title>
<link rel="stylesheet" href="./custom.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div data-role="page" data-theme="c" id="home-page" class="type-interior" data-url="home-page">
<div data-role="header" style="background:#AAA">
<h1><img src="/logo.png" width="97" height="50" border="0" /></h1>
</div>
<h2 id="header_title"></h2>
<div id="error" class="error" style="display:none;">Could not connect to the server. Please try again.</div>
<div data-role="content">
<div class="content-primary" id="content">
<div data-role="fieldcontain">
<label for="client" class="select">Client:</label>
<select name="client" id="client" data-native-menu="false">
<option value="1">Option 1</option>
</select>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2013</h4>
</div>
</div>
</body>
</html>
The select menu shows up, but it doesn't look like the custom mobile version on their site? It just looks like a regular select menu.
I don't understand enough jquery.mobile yet to really even know how to ask this question properly... but any help getting this to work would be appreciated!
If you mean the "Your state" example looks like a dialog, showing the contents of the menu alone in the screen, you have to add more options to the select element as it is stated in the page you link:
When it has too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard listview for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the label is used as the title for this page.
I modified the jsfiddle provided by Omar to add more options and it looks exactly like in the original site
<Ignore>Code so I can post link to jsfiddle</ignore>
The fixed header will not stay at the top of the page for me. It sits on top of a page that has several number inputs that were added via javascript. As the user fills out these inputs the header disappears as expected. However, the header will reapear in the middle of the page if the user taps out of the text boxes. The user has to tap twice to get it to move back to the top of the page.
/Edit
Here is another piece of important info. This is happening when I use the next button to move to the next text box as I fill in the information.
I have create a jsfiddle example of my page at http://jsfiddle.net/7PZPy/1/ . It won't show you the bug, but it should give you a good idea of what the page is about.
*/
This is a phonegap application running on iPhones and iPads. I am using JQM 1.3.1.
My research has caused me to try using the jquery full page mode and a fix position via CSS. I have also tried removing everything that was not inside of the h1 tags. Alas, the header moves up and down the page as long as the data position is set to fixed. My html is below. Please help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" href="css/ims-theme.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-migrate.js"></script>
<script type="text/javascript" src="js/jquerymobile.js"></script>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/WaitingDialog.js"></script>
<script type="text/javascript" src="js/UniqueIdentifier.js"></script>
<script type="text/javascript" src="js/iti.js"></script>
<title>IMS Field Support</title>
</head>
<body>
<div data-role="page" id="invPage">
<script type="text/javascript" src="js/inventory.js"></script>
<div data-role="header" data-position="fixed">
<h1>Inventory</h1>
<div id="divAlert" style="display:none">
<a href="resolve.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true" class="ui-btn-right" >Alert</a>
</div>
</div>
<div id="inventoryContent" data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> Inventory</li>
<li>Technician</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</body>
</html>
The data-position="fixed" is used to make those smartphone-like headers that disapear with some clicks on body or some other events i dont care,
for what you want, you can just style your header with css with something like:
#myheader{
position: fixed !important;
width:100%;
top: 0px;
}
Works like a charm
PS: The !important overwrites any jquerymobile attempt to change position attribute, it may not be needed
Had you tried to also include the all three attributes to your header?
It works for me with all these specified:
data-position="fixed"
data-tap-toggle="false"
data-update-page-padding ="false"
Here is the code:
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding ="false"> </div>
Hope this help!
In my case, I fixed this bug by removing "top: 0" for my "position: fixed"
And it's fix! Weird I know...
I'm starting with jQuery Mobile and I have a problem. I have two HTML documents:
page1.html
page2.html
page2a
page2b
The problem is the following:
when I browse from page1.html to page2.html, it displays page2a, but I can't browse to page2b
when I browse from page1.html to page2a, it stays on page1.html
when I browse from page2.html to page2a or page2b, it works well
What is wrong with my solution? Is there any good solution to have that working properly?
Here is a code for reference:
Page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Single page</h1>
</div>
<div data-role="content">
<p>See page 2.</p>
<!-- <p>See page 2a.</p> -->
</div>
</div>
</body>
</html>
Page2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 2</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<!-- Start of first page: #a -->
<div data-role="page" id="a">
<div data-role="header">
<h1>Page 2a</h1>
</div>
<div data-role="content" >
<p>Show page "2b"</p>
</div>
</div>
<!-- Start of second page: #b -->
<div data-role="page" id="b">
<div data-role="header">
<h1>Page 2b</h1>
</div>
<div data-role="content">
<p>Back to page "2a"</p>
</div>
</div><!-- /page b -->
</body>
</html>
Check the below question. It seems it only works with data-rel="external".
JQM Multipage
UPDATE:
Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.
Source: JQM - Linking pages