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>
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
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/
This used to work to center the controlgroup in 1.1.0, but now it seems like it doesn't in 1.1.1.
<div data-theme="a" data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
link1
link2
</div>
<div class="copy">© 2012 bigco</div>
</div>
Probably align="center" attribute of data-role="controlgroup" div could be suitable for that.
<div data-theme="a" data-role="footer" align="center">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
link1
link2
</div>
<div class="copy">© 2012 bigco</div>
</div>
http://jsfiddle.net/sGFTy/1/
I found the solution on this site:
http://forum.jquery.com/topic/how-to-horizontally-center-a-set-of-grouped-buttons
The CSS:
#navgroup {text-align:center;}
#navgroup div {display:inline-block;}
The HTML:
<div id="navgroup">
<div data-role="controlgroup" data-type="horizontal">
Menu
Specials
FAQ
Facebook
</div>
</div>
Issue still persists if using
$("selector").show();
to display element since it applies 'display:block'.
Instead of using .show(), now use
$("selector").css('display', 'inline-block');
Now I'm on JQM 1.2 and this works for me...
CSS
.center-controlgroup { text-align: center; }
HTML
<div data-role="controlgroup" data-type="horizontal" class="center-controlgroup">...</div>
I used the data-role="footer" but I want 2 links below that blue bar to also be part of the footer.
<div data-role="footer" class="footer" id="ftrMain" name="ftrMain" data-position="fixed">
© 2011 Probity Investigations
</div>
<div data-role="footer" id="subfooter" name="subfooter" >
<div style="float: left;">
Full Site
</div>
<div style="float: right;">
Logout
</div>
</div>
Then I want to fix it to bottom. I tried creating the second footer with data-theme="c" but it doesnt quite match.
Basically like this:
http://i.stack.imgur.com/sfl6g.png
Not exactly like the picture but maybe you could play with it.
Live Example: http://jsfiddle.net/gN5Fy/20/
Documentation on navbars: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This finally fixed it:
<div data-role="footer" class="ui-bar" data-position="fixed">
Full Site
<a style="float:right; margin-right:25px;" href="logout.php" rel="external" data-role="button">Logout</a>
<div style="margin: 0 auto; width: 230px; bottom: 30px; position: relative;">© 2011 Probity Investigations</div>
</div>
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.