I'm using the default jQuery Progress Bar and I can't seem to figure out a couple of things:
Firstly, I've nested it in an AP div tag so that it fits perfectly with a certain area on my page, which is fine but the problem is that the percentage overlay comes up a bit short in that it doesn't cover the entire area of the bar, it doesn't reach the bottom border.
Secondly (not that much of a problem, merely a curiosity) how would I go about changing the colour of the progress bar?
The problem is in your default.css file:
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index:3;
}
box-sizing applies to the progressbar value, so fix it like adding to CSS:
.ui-progressbar-value {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
/* This way you can change the progress color */
background-color: #000000 !important;
}
Related
So in my .container I see that there is 1px padding on the top and bottom of the <div> which is coming from my Bootstrap include in my RoR project. Even a band-aid solution would be desirable.
The css from Bootstrap that matches these :before and :after selectors are the following:
media="all"
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
media="all"
.container:before, .container:after {
content: " ";
display: table;
}
What would be the inverse of these operations? Or how could I simply overwrite them before I load them in my application.css.scss file?
This is due to the clearfix that Bootstrap adds to the .container and other elements like .row, see mixins/clearfix.less in Bootstrap's repository.
The :before part is used to keep the margins from collapsing and the :after part is used to contain for example the floating columns inside a .row element. See Nicolas Gallagher's clearfix hack post for a more complete explanation.
If you don't want to keep the top margin from collapsing you can overwrite it, probably by simply setting .container:before { display: none; }
Can't believe how much I'm struggling with this simple task. What is the correct way to place a jQuery Mobile data-icon on an element that the user does not interact with? What if I want a paragraph that just displays a message to the user like "No suitable lots were found" and I want that element to have the "info" icon?
I know this won't do it, but something like:
<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>
Not a link. Not a button or checkbox or .... Just a plain old box displaying a message? All examples I see are an interactive element and not a static element.
Thanks in advance.
I do this by adding a span with some CSS as follows:
<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>
Then the inlineIcon class has these rules to place the icon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The right margin controls the space between the icon and the text.
If you prefer a black icon with no gray disk behind it:
<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
ui-alt-icon on the span changes the icon color and background-color: transparent; on the :after pseudo element hides the disk.
Here is a DEMO
One of my service pages needs inner tabs.
I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.
Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).
Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?
Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.
You create the downward triangle like this
.arrow { width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
I created what you are looking for in a fiddle.
http://jsfiddle.net/jessekinsman/Mn2sx/
However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.
However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.
You could try adding some css to the class ui-tabs-active, something like what is shown on this website: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
Yes this is pretty easy by just styling the li element with the class="active"
Something like this
.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}
The above is just sample code to give you an idea. You will have to tweak the image values to get the arrow image to line up properly.
However, I think your question might be more involved.
Are you asking how to style two separate jQuery tabs that exist on the same page with a different style?
If that is the case, I would recommend wrapping one of the styles in a element with a unique class or id. Like this:
<div class="new-tabs">
<ul class="tabs">
<li>Tab1</li>
</ul>
</div>
Then you can copy all the styling from the tabs.css (I can't remember the exact name of the css file at the present time) and add the class or id before all those rules. Like this
.tab li { something.... }
.new-tabs .tab li {something...}
Walaa, you now have a completely separate set of styles for the tabs within the container.
I would recommend working through the styles you just copied and deleting what you don't need.
I've recently installed Devise, and I've got the sign-in form working as it should, displaying errors etc...
However, the sign-up form is acting very strange i.e when displaying errors they appear on the left side out of proportion with the rest of the app. Here is a screen shot to illustrate: http://i.imgur.com/1r4hQMM.png note: this only happens when there are errors, it is centered otherwise.
Now i've tried editing the field_with_errors CSS with the following:
.field_with_errors {
display: block;
clear: both;
text-align: center; }
And still, it remains on the left hand side. I have noticed that float: right; seems to move it to the right, but how can I get it in the center with the rest of the form?
field_with_errors seems pretty darn stubborn in CSS.
If you want to center text then text-align: center will work, but in this case you wish to center an entire element and should therefore use margin: auto auto instead.
Enjoy!
you can also use flexbox
.my class {
display: flex;
align-items: center;
justify-content: center;
Is there anyway to get pointed back button like we have in iphone. Currently I am getting round button.
Also, any one has idea abt navigation bar in jQuery mobile. Whenever we are changing screen using navigation bar css is not getting applied.
Back Button:
You can try this:
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
But it will use a background picture instead of pure CSS backgrounds.
If you want to do it pure CSS, this will be tricky.
Start from here. I assign this to an empty div, which gives me a CSS only triangle, which I'm using for popup windows. You would have to find a way to turn this by 90 degrees, match border color to button background gradient and fiddle it into any of the JQM button styles.
Nice challenge :-)
.popover_triangle {
background: none repeat scroll 0 0 red;
border-color: transparent transparent black;
border-style: solid;
border-width: 16px;
font-size: 0;
line-height: 0;
width: 0;
}
If you manage to get it done, please post. There are a lot of people looking for it.