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.
Related
in the screenshot below, i have tried to add 2 button icons in 2 different columns which are also children of a row.
I want that buttons to fit as much as big they can in the column as you see.
Here is my code for that specific row;
<div class="row">
<div class="col-md-6 mb-3 text-start">
<label for="departure">VIP ($7000):</label>
<input type="number" class="form-control" id="departure" placeholder="0" value="" required>
</div>
<div class="col-md-3 align-self-center">
<i class="bi bi-plus-circle-fill"></i>
</div>
<div class="col-md-3 align-self-center">
<i class="bi bi-plus-circle-fill "></i>
</div>
I have tried some things but couldn't get the proper design
The font-size CSS options will work best.
So you could do.
i{
font-size: 50px;
}
The above will affect all icon tags and probably all HTML5 italic tags too.
Or you can add a Class to your icons. The CSS would be....
i .big-icon{
font-size: 50px;
}
With the HTML being....
<i class="bi bi-plus-circle-fill big-icon"></i>
Here is a link to the GetBootstrap Docs....
https://icons.getbootstrap.com/#styling
Using jquery mobile, ui-input-btn....
<div class="ui-input-btn ui-btn ui-icon-alert ui-btn-icon-top">
<div class="buttonText">Service<br/> Interruptions</div>
<input data-enhanced="true" value="Service Interruptions" type="button" id="service_interruptions">
</div>
I would like to use a custom icon.
Can this be done with this control?
If so, please provide a sample.
Thank you
Add a custom class to wrapping div and then override background-image and background-size of that class using :after pseudo selector.
<div class="ui-input-btn ui-btn ui-custom-icon ui-btn-icon-top">
<div class="buttonText">Service<br/>Interruptions</div>
<input data-enhanced="true" value="Service Interruptions" type="button" id="service_interruptions">
</div>
.ui-custom-icon:after {
background-image: url('icon.png');
background-size: 25px 25px;
}
Demo
As the title says,
When i use a input field in a jquery mobile page, it doesnt expand the input fields to the full width of the screen.
If you use a small screen device, it fits fine but when you view the page in a desktop browser, the input fields only appears 2/3 of the width of the browser.
Is there a way to set it to expand to whatever the browser/screens width is?
here is my code:
http://jsfiddle.net/B8JDt/2/
<body>
<div data-role="page" id="page" onLoad="initialiseFields()">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > Back
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="list" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">Title</h2>
</li>
<li>
<h3>Journey From:</h3>
<div data-role="fieldcontain">
<input type="text" name="claimTitle" id="textFieldJourneyFrom" value="" />
</div>
</li>
<li>
<h3>Journey To:</h3>
<div data-role="fieldcontain">
<input type="text" name="claimTitle" id="textFieldJourneyTo" value="" />
</div>
</li>
</ul>
<div data-role="navbar">
<ul>
<li>Save</li>
</ul>
</div>
</div>
</div>
</body>
jQuery Mobile has a buggy implementation of box-resizing CSS3 rule.
To fix this problem use this CSS:
#media all and (min-width: 28em){
.ui-input-text {
box-sizing: none !important;
-moz-box-sizing: none !important;
-webkit-box-sizing: none !important;
width: 100% !important;
display: inline-block !important;
}
}
Fist box-sizing: none don't exist but it will override default value and it is better to override it like this then to remove it manually from a css file.
Working example: http://jsfiddle.net/B8JDt/3/
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.
How can I center the text and icon in the standard jQuery info alert?
http://jsfiddle.net/3kHWa/
Thank you!
I have looked at the snippet and have it centered with this snippet http://jsfiddle.net/3kHWa/2/
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="padding: 0pt 0.7em;">
<div style="width:auto;margin:0 auto;display:table;">
<span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span>
any size text</div>
</div>
</div>