I really like the default look of fieldset and legend in plain ole HTML.
Q: Is there any way to tell jQuery Mobile to display fieldset and legend?
fieldset {
border:2px solid cornflowerblue !important;
border-radius:10px;
padding:1em !important;
margin-bottom:1em !important;
}
legend {
padding-left:1em !important;
padding-right:1em !important;
}
Related
I need to remove background for accordion i tried like this
.ui-accordion-content{
border-style: none;
background-color: none;
background-image: none;
}
Didn't helped.
Full code Jsfiddle
Try using following.
.ui-state-default
{
background-color: transparent !important;
background-image: none !important;
}
I have a link that looks like this:
Документи
And problem is that in Safari when "Документи" is underlined, letter "Д" and "у" cut line and there is small white space in link line.
How to remove these white gaps in link?
Remove the underline for all <a> elements
In CSS you could do:
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
Remove the underline for only Cyrillic class
Or alternatively for only Cyrillic links:
a.cyrillic {
text-decoration:none;
}
a.cyrillic:hover {
text-decoration:none;
}
Here's a JSFiddle to clarify.
This removes the underline from the link. It's by no means perfect (if you wanted to retain the underline) but it at least solves the issue by removing it entirely. Of course, this assumes that your links are coloured somehow
border-bottom underline
It is possible to get the result you want using the CSS border-bottom style as such:
a.cyrillic {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
a.cyrillic:hover {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
And obviously on your HTML <a> element it should be:
Документи
Here's another JSFiddle to clarify.
I'm having trouble changing the background on a list view in jqm... I can't change it to tranparent. What is the jqm class inheritance structure for this?
I had a lot of problems with this. There are some high level class inheritances to overcome and they are not easily found. Here is an example with jquery mobile 1.40. This is a sample allowing you to create a fully custom listview.
The trickiest ones are the ones that deal with the first-child and the button li.ui-first-child a.ui-btn - it took me a few hours to track this done. Hopefully this helps others as 1.40 is now final.
The following example is a very common necessity creating a custom menu on an overlay panel.
<ul data-role="listview" class="primary-menu">
<li data-icon="false">
<a href="#product" class="ui-btn ui-nodisc-icon ui-btn-icon-left ui-icon-myicon" >
View Products </a>
</li>
</ul>
/* Menu Classes */
.ui-btn-close-panel {
background-color:#b4316c !important;
}
ul.primary-menu {
margin-top:10px;
border-top:none;
}
ul.primary-menu li a{
font-size: 1em;
line-height: 1.3;
color:#ffffff !important;
font-family: 'ramblabold', Arial, sans-serif;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
ul.primary-menu.ui-listview li.ui-first-child a.ui-btn {
color:#ffffff !important;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
ul.primary-menu.ui-listview li a.ui-btn {
color:#ffffff !important;
background-color:transparent !important;
border-bottom:1px solid #f2e3ea !important;
background-image:none !important
}
Does anyone know how to make CSS link hover properties work for links that don't link to another html page or anchor?
For example this works:
Page1
Link
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
But the moment I change the link to something that's not an anchor or an html file, let's say a mailto:
<a href='mailto:bla#bla.com'>Send email</a>
It no longer changes color when I hover over the link.
Why is this?
You are overriding your own styles. Try
<style type="text/css">
a:link, a:visited
{
color: #555;
text-decoration: none;
}
a:hover, a:visited:hover
{
color: #fff;
text-decoration: none;
}
</style>
You don't need to do a:link, just a will do fine when defining your anchor tag style, however, if for some reason you do need it then you need to define your hover style more specifically than your link style.
a:link:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}
or
a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a,a:visited{
color:#555;
text-decoration:none;
}
will fix your problem
When moving through the list of suggestions in IE the graphic indicating the currently selected item extends past the vertical scrollbar. Is there a way to keep it within the visible area of the list?
I'm using IE7 and jQuery UI 1.8.16.
I have the autocomplete styled like so:
.ui-autocomplete {
width: 190px;
max-height: 132px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
* html .ui-autocomplete {
height: 132px;
}
.ui-autocomplete li {
font-size: 12px;
}
already tried overflow-y: scroll; ?
You can't use "auto" without setting a fixed height, and I think "max-height" didn't work on IE7.
Good luck!