Trying to change the background of a jquery-ui modal dialog as it is transparent but it's not working. As per jquery-ui documentation what I tried is:
.ui-dialog, {
background: black;
}
.ui-dialog-content {
background: black;
}
in my main CSS file but with no success.
Remove the , in your first line. .ui-dialog,{ should just be .ui-dialog{
Related
how can i set background color transparent in jquery mobile. I try this code but it is not work.
td input{
background-color:rgba(0,0,0,0.4) !important;
}
I have a problem using the bar-header component of the ionic-framework. I always have a padding-top of a few pixels (see screenshot). I'm using the cordova plugin org.apache.cordova.statusbar to hide the status bar like this:
if(window.StatusBar) {
StatusBar.hide();
StatusBar.overlaysWebView(false);
}
Any help will be highly appreciated.
If you installed the plugin correctly it should be enough to just call
ionic.Platform.fullScreen();
right after you hide the statusbar.
This should probably remove the space at top of your app.
Overwrite these ionic css rules in your main.css. This fixed the problem for me:
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
margin-top: 0px !important;
}
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 0px;
}
I have used Jquery Mobile. I have added background image like this<body background ="6.jpg">.
I want to make background image responsive. What process should i follow to make it responsive? Please Suggest.
Update
I have tried using this
body {
background: url(6.jpg) ;
background-size:cover;
}
.ui-page {
background: transparent;
background-repeat: no-repeat;
}
.ui-content{
background: transparent;
}
followed this link Stacjoverflow
but failed. Width of the image is responsive but height is getting too smaller than the original image.
You can working for example with this: http://jquerypicture.com/
The important think is (generell for responsive) you must working with media queries.
PS: Instead of seeting the background in the body tag, please use a class for this.
how to remove default close button in dialog page in jquery mobile 1.0.
i'm using RC2 version.
thanks in advance.
Please put this in your page or stylesheet:
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
this doesn't work. at least with jquery.mobile-1.2.0
.ui-dialog .ui-header a[data-icon=delete] {
display: none;
}
but this way works
Now I'm using jQueryMobile 1.0.1. In this version no need to add this line in CSS file.
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
If you have the situation that you want the close button refer to an arbitrary (not the last) page, you could also change the page to your desired close page first. Afterwards open the dialog like this:
// change to the "close" page first
$.mobile.changePage('#your_page_id_here');
now you can open the dialog and the close button will open #your_page_id_here
// for some reason you have to wrap it in a timeout
window.setTimeout(
function( data){
$.mobile.changePage('#dialog');
},
1
);
Advantages:
solution works for single dialogs rather than removing all close buttons from all dialogs
seamless integration on a single point of code
history manipulation is not recommended, see here
To apply behavior: url(PIE.htc); to all css files in the project seams to be very long story and with each new version i need to repeat it again.
Is there jquery ui CSS3Pie versions i can find somewhere?
OR
Is it possible to add CSS3Pie support in separate css file, so in such case it will be possible to use that css for any new jquery ui version.
I am trying to do such fix for jquery UI that in my custom css:
.ui-corner-top, .ui-corner-left, .ui-corner-right, .ui-corner-bottom { behavior: url("PIE.htc"); }
.ui-corner-all, .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br { behavior: url("PIE.htc"); }
But it is not working.
At the same time such fix working for my styles, for example if a have style
.mystyle
{
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border: solid 2px #36405c;
}
Than i could define this and it will be working:
.mystyle
{
behavior: url("PIE.htc"); /*it will be working*/
}
So i am assuming that it is not working in jquery UI case because jquery UI has multiple places with .ui-corner-* declarations with different radiuses.
Anyway is it possible to do something with that?
Any ideas someone?
You could create your own theme with http://jqueryui.com/themeroller/, set all the border-radius to 0 and then apply your styles to ".ui-corner-all"