Creating a jQuery Mobile popup with a header, the default works pretty good (I would like to address that non-round top-left corner some day):
<div data-role="header">
<h1>Useful Header</h1>
</div>
What is the proper way to add a sub-header? By sub-header, I mean text like the header, but smaller, probably with a smallish margin between the header and sub-header.
Google isn't much help, and this naive attempt fails:
<div data-role="header">
<h1>Useful Header</h1>
<h6>Simple Sub-header</h6>
</div>
Here is a way to get the desired layout with CSS:
<div data-role="header">
<h1>Useful Header</h1>
<p class="popup-subheader">Simple Sub-header</p>
</div>
.popup-subheader {
text-align: center;
margin-top: -5px;
margin-bottom: 6px;
font-size: smaller;
font-weight: normal;
}
Related
So im trying to put this chart full width, but it simple dont change size. i have tried to use flex of bootstrap but its doesnt change the width.
<div id="menu1" class="container tab-pane fade" style="margin: auto; flex-wrap: wrap;">
<br>
<center><h3><b style="color:white"> Classifications</b></h3></center><br />
<div id="myChart" style="display: flex; justify-content: center; flex-basis:auto">
</div>
I am trying to use flex box with bootstrap columns so that all the columns are always horizontally centered. The markup mentioned below works fine for firefox, chrome and Android but fails on iOS and safari. I haven't tested IE yet.
HTML:
<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
<div class="col-xs-3 red">Hi</div>
<div class="col-xs-3 blue">Hi</div>
<div class="col-xs-3 blue">Hi</div>
<div class="col-xs-3 blue">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 red">Hi</div>
<div class="col-xs-3 blue">Hi</div>
<div class="col-xs-3 blue">Hi</div>
</div>
CSS:
.row {
display: flex;
display: -webkit-flex;
flex-wrap:wrap;
-webkit-flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
div[class^=col-] {
float: none;
display: inline-block;
vertical-align: top;
}
On Chrome, Firefox and Android
On Safari and iOS
JSFIDDLE
Is there anything that I should be adding to the columns so that they appear in one line.
It's pseudo-element in the .row causing the problem.
This happens because Safari browser treats :before and :after
pseudo-elements as if they were real elements.
Try
.row:before, .row:after{
display: none;
}
or better create a class say, .flex-row and do this
<div class="row flex-row">
{{contents here..}}
</div>
.flex-row{
display: flex;
display: -webkit-flex;
flex-wrap:wrap;
-webkit-flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.flex-row:before, .flex-row:after{
display: none;
}
FIDDLE
If anyone is still lost for a solution, I had an issue where my columns were TALL in Safari:
To solve this, I simply added this CSS selector (I know !important isn't best practice, but I tried several solutions and eventually landed on this):
.d-flex {
display: block !important;
}
Now, my columns looks like this, which is how it originally looked in Chrome, Firefox, etc.:
SOLUTION
I was being an idiot and dynamically adding data-role="content" to the #wrapper element on page load, making it unrecognizable by JQM.
I'm trying to implement a basic menu panel, but I'm having no luck getting it to animate or close.
Below is the basic markup as generated by JQM.
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-body-c ui-page-panel ui-page-active">
<div id="menu-panel" data-role="panel" data-position="left" data-display="reveal" data-dismissible="true" class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-panel-closed ui-body-c ui-panel-animate">
<div class="ui-panel-inner">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
<div id="wrapper" data-role="content">
<span class="ui-btn-inner"><span class="ui-btn-text"></span></span>
<!-- Page content -->
</div>
</div>
CSS for #wrapper:
#wrapper {
margin: 0 auto;
min-height: 100%;
padding: 0;
position: relative;
width: 100%;
}
It seems wrong to put redundant data roles in the panel and the button, but all the examples I've looked at, including the official docs, have it that way.
The panel appears, but doesn't make use of the CSS transforms. It also doesn't push the page content over or close on any event.
The images in the webpage below link to their respective pages. Works fine in IE8 & IE9 but not IE7.
In IE7 when you hover over the image the link url is recognised (previews in bottom left corner of browser) but is not clickable?
http://www.signport.co.uk/test/asg_ourwork.php
Can anyone tell me if there's a fix for it?
Thanks :)
This solution is the new solution:
CSS
.item a{
display:block;
overflow:hidden;
height:170px;
-moz-box-shadow:0 0 10px black;
-webkit-box-shadow:0 0 10px black;
-o-box-shadow:0 0 10px black;
-ms-box-shadow:0 0 10px black;
box-shadow:0 0 10px black;
}
You can DELETE the box-shadow SPAN you don't need it. I made it so you only need to add this line of code.
The problem is the hirarquy of the TAGS.
In this example you can see the correction working. In chrome it works exactly like yours. In IE7 the link works like you want, you only need to correct the rollover.
The Problem:
<div style="opacity: 1;" class="item">
<a href="http://www.signport.co.uk/test/asg_ask.php">
<div class="boxshadow">
<p>
<img src="http://www.signport.co.uk/test/Images/thumb_ask.jpg" alt="ASK Italian" height="170" width="300">
</p>
</div>
</a>
</div>
The Solution
HTML
<div style="opacity: 1;" class="item">
<a href="http://www.signport.co.uk/test/asg_ask.php">
<span class="boxshadow"></span>
<img src="http://www.signport.co.uk/test/Images/thumb_ask.jpg" alt="ASK Italian" height="170" width="300">
</a>
</div>
CSS
.projects .item{box-shadow: 0 0 10px 0 black;padding:0;margin:10px;}
.projects a {display: block;height: 150px;margin-bottom: 20px;}
.projects a .boxshadow {position: absolute;z-index: 999999;box-shadow: none;}
It seems like it should be very simple to specify that the h:messages generated by JSF should be styled using jQueryUI's nice ui-states. But sadly I can't make it fit. It seems that the jQueryUI states require several elements (div,div,p,span) in order to make it work.
So taking inspiration directly from the jQueryUI theme demo page:
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
</div>
<br/>
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
</div>
and trying to jam the css class details into my h:message as best I can:
<div class="ui-widget">
<h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert" infoClass="ui-state-highlight ui-corner-all ui-icon-info"/>
</div>
I don't get the icon or sufficient padding etc but the colours make it through. So, the styles are being applied but they aren't working as intended.
Any idea how I can make this work?
On that element, you need a class that gives display: block; to get the position characteristics you want, like this:
<div class="ui-widget">
<h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert block" infoClass="ui-state-highlight ui-corner-all ui-icon-info block"/>
</div>
CSS:
.block { display: block; }
Also if you're interested, here's a listing of all the classes jQuery UI uses for CSS and what they mean.