How can I change color and other attributes of the jquery ui dialog box title
HTML :
<div id="dialog" title=""
style="display: none; font-size: 15px; width: 500; height: 300"></div>
javascript :
$( "#dialog" ).dialog( "option", "title",title );
Please give me some idea to customize the title of jquery dialog.Thank you in Advance.
These classes shape the container of the dialog box title
ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix
This class shapes the text
ui-dialog-title
You could edit these classes in the css file for the jquery ui style. Or you could overwrite these in your own css file.
.ui-dialog-title{
font-size: 110% !important;
color: #FFFFFF !important;
background: #000000 !important;
}
The "!important" might not be necessary.
You can find this out yourselves using developer tools.
Related
I'm developing a web-app for both Android and iOS.
I have encountered a problem with the styling of the app.
For some reason, styles applied to a <select> won't display on MobileSafari (aka iOS WebView)
CSS:
p,
input,
select,
option,
button {
font-family: Arial, ArialHebrew, sans-serif;
font-size: x-large;
text-align: center;
color: #FFF;
margin: 1vh;
padding: 1vh;
}
input,
select,
option,
button {
background-color: #333;
border-radius: 1vh;
border-color: transparent;
}
How i want it to look (Chrome, Android):
How it looks (MobileSafari, iOS):
What do i need to change in my CSS to apply the style to the <select>?
The quick & easy fix is to apply -webkit-appearance: none. However, you might quickly notice your element has lost the arrow to indicate it's a <select> element.
To address this, one workaround is to wrap your element with a div and mimic the arrow using CSS content.
Here's a Fiddle: http://jsfiddle.net/d6jhpo7v/
And the fiddle in iOS simulator:
I'm working on embedding a very quick survey on my site and after page one, there is just description text for page 2 and 3. So how do I a) make the iframe responsive to the number of questions or b) get rid the other ugly gray bottom when the description text appears? I don't mind the scroll bar but in a dream scenario what I would like is no scoll bar - all 4 questions fit on the page and then the continue button on page 2 shows up with no grey box.
The iframe code I have on the page is:
with the following CSS:
<style>
.survey-container {
position: relative;
}
iframe {
border-style: none;
background-color:transparent;
min-height: 400px;
max-height: 600px;
overflow: hidden;
}
</style>
http://i.stack.imgur.com/WP1dZ.jpg
Using the embed script provided by Surveymonkey, I was able to make the embedded survey width:100% by nullifying the max-width property through CSS:
.smcx-embed {
max-width: none !important;
}
.smcx-embed iframe {
max-width: none !important;
}
I initially asked this question: changed jQuery Mobile's default icon set, work on browser, failed on device, but later, I found this could be a phonegap issue.
Is there anyone who has experience in changing JQuery Mobile's default set in phonegap?
Check my other post about the problem description.
Any suggestions?
Try using custom icon
.ui-icon-customicon {
background-color: #000000 /*{global-icon-color}*/;
background-color: transparent /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
In html page
<a href="#" data-icon="customicon" ></a>
Well, i suggest the same that i've already suggested in your previous question... It should help if you only need to change icons.
But if you now want to change styles of JQuery Mobile elements - than you can change styles of corresponding classes or use custom elements as Ved has already mentioned.
ok, I added !important to the end and that works:
.ui-icon-customicon {
background-color: #000000 /*{global-icon-color}*/;
background-color: transparent /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) !important/*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
The resize handles don't show on dialog or in anything I try to resizablify inside a dialog. I know this is by design that they are disabled in the themes, but how do I get them visible? I need to see them in the dialog content and the ones for the dialog would not hurt either.
<p>Dialog
<div id="dialog" style="display:none;">
<p>foobar</p>
<div style="width:100px; height:100px; border:1px solid;" id="bar">BAR</div>
</div>
<script>
$(function(){
$('a[href=#dialog]').click( function(e) {
e.preventDefault();
$('#dialog').dialog({
open: function() {
$('#bar').resizable({handles:'sw,se,e'});
}
});
});
});
</script>
Also in JSFiddle: http://jsfiddle.net/s22nx/
There are a couple of things going on here contributing to the problem, one of them could be a bug.
Firstly, you are correct that the south-east handle was hidden intentionally, however all 8 handles still exist as elements in the dialog. This is good news since you can add the following CSS to bring the se handle back. It's a bit of a hack to get around the intentional hiding and you might want to adjust the right and bottom positioning to suit your needs.
.ui-dialog .ui-resizable-se {
right:0 !important;
bottom:0 !important;
background-position: -64px -224px !important;
}
The other grabbers seem to by design have no style associated with them. None of the themes I checked have any visible style (aside from the cursor). Search for .ui-resizable- in the jquery-ui.css to see this.
This is sort of covered in the documentation but only mentioned in the context of generating your own handles. There is nothing explicit about existing theme support. Luckily all the handles share a class, so we can make them all visible by adding:
.ui-resizable-handle {
background-color:lightblue;
}
Or just one side, for example:
.ui-resizable-s {
background-color:lightblue;
}
The possible bug I mentioned was to do with controlling the generation of handle elements. The code in question $('#bar').resizable({handles:'sw,se,e'}); should be correct and result in only 3 handle elements but all 8 always appear.
In the _makeResizable function in jquery-ui.js (v1.10.2) the line:
resizeHandles = typeof handles === "string" ? handles : "n,e,s,w,se,sw,ne,nw";
should set the correct resizeHandles to the value you supply as an options parameter but typeof handles = 'object' for me, so jQueryUI is using the else part of the ternary.
In the css file, I had to change:
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
to:
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: 3px;
bottom: 3px;
}
Or you just forget to include required css
<script src="js/jquery-ui.min.js"></script>
Check this
UPD
They do get handles, they're just not visible with the default theme. This isn't something specific to jQuery UI. Many resizable windows work this way.
Jquery ui is definetely loaded as I have sortable working on the same page!
My html is as follows...
echo '<div id="accordian">
<h3>Subscriber Options</h3>
<div><a id="changeLayout" href="">Change Main Layout</a></div>
<h3>Account Layout</h3>
<div></div>
</div>';
My Jquery...
$(function() {
$("#accordian").accordian();
});
The jquery ui comes from google, and then my JS sheet after that, all my JS is wrapped in document.ready()
And my css for the accordian,
#accordian {width: 100%;}
#accordian h3 {padding: 5px 0; font-size: 13px; font-weight: normal; background: #333;}
#accordian div {padding: 10px 0; width: 100%; height: 300px; border: 1px solid #f00;}
I make this mistake so very, very often...
It's spelt accordion ;-)
The only other possible thing I can think is that you don't have the base CSS for the accordion loaded. I've set up this jsfiddle with jQuery 1.5.2, jQuery UI 1.8.9, the base UI css from Google's CDN and your code and it works as expected.