I need to make my jQuery mobile slider rails thicker. I also need to make the knob of the slider larger as well. I have visited other SO threads and tried to change the CSS rules of the slider. The class of the slider widgets has been set to jquerymobileslider.
Here is the relevant contents of a tag within my index.html:
.jquerymobileslider .ui-slider {
height: 50px;
}
.jquerymobileslider .ui-slider .ui-slider-handle {
height: 50px;
width: 50px;
}
However I see no changes.
Any ideas?
The default height is already 50px, try the following ensuring it's applied after the default CSS styles and see if you notice any visual changes:
.ui-slider-track {
height: 75px;
}
.ui-slider-handle {
height: 75px;
top: 0%;
}
I'm using Crossrider, I want to add a draggable div to the page's DOM.
The following code works well on Chrome and Firefox, and the dragstop handler function is fired for both Chrome and Firefox without any problems.
But for IE, the div is draggable once ! i.e. Once the div is dropped, it cannot be dragged again, and more strange is that the dragstop event handler is not fired at all in IE !?
How to fix this in IE !?
Here is the code:
extension.js file
appAPI.ready(function(jQuery) {
appAPI.resources.jQueryUI('1.10.1');
appAPI.resources.includeCSS('styles.css');
var $div = jQuery('<div class="square" ></div>').appendTo('body');
$div.draggable( {containment: "window", scroll: false} );
$div.bind('dragstop', function() {
console.log("drag stopped ...");
});
});
styles.css file
.square {
display:block;
z-index: 1000001;
background-color: #000000;
height: 100px;
width: 100px;
top: 0px;
left: 0px;
position: fixed;
}
Kindly note, that I tried the code without crossrider and I run it on IE, it works well. You can try it by using this link: http://jsfiddle.net/GHaMV/
I ran into the same problem using Crossrider and managed to fix the issue by declaring a handler function that returns the draggable element, so your code should look as follows:
$div.draggable({
containment: window,
helper: function() {
return $div;
}
});
Hope it helps...
There is no dragstop event, just the stop hook (see the docs):
Use it like this:
$div.draggable({
containment: "window",
scroll: false,
stop: function() {
console.log("drag stopped ...");
}
});
I use jQuery UI's new Tooltip and having trouble with figuring out how to set a maximum width of the tooltip. I guess it should be done with position, but how?
Based on Senni's reply, I added following to a separate CSS-file:
div.ui-tooltip {
max-width: 400px;
}
A sidenote: Make sure your separate CSS follows after the ui-css, otherwise there will be no effect. Otherwise you also could use the !important - marker.
If you subscribe to Tooltip's open event, you can update the style in code:
$(".selector").tooltip({
open: function (event, ui) {
ui.tooltip.css("max-width", "400px");
}
});
in script:
$(elm).tooltip({tooltipClass: "my-tooltip-styling" });
in css:
.my-tooltip-styling {
max-width: 600px;
}
Instead of modifying or overriding the jQuery UI CSS classes directly, you can specify an additional CSS class using the tooltipClass parameter:
Tooltip initialization
$(function() {
$( document ).tooltip({
items: "tr.dataRow",
tooltipClass: "toolTipDetails", //This param here is used to define the extra style class
content: function() {
var element = $( this );
var details = j$("#test").clone();
return details.html();
}
});
});
Then you would create that style class. You will want to import this CSS file after the jQuery UI CSS file.
Example CSS style
This class here would make the modal 1200px in width by default and add a horizontal scroll if there is any more content beyond that.
<style>
.toolTipDetails {
width: 1200px;
max-width: 1200px;
overflow:auto;
}
</style>
Sidenote: It is generally not recommended to use the !important tag but it could be used in this case to ensure that the intended CSS is rendered.
As pointed out by the jQuery UI api, the best you can do is override the classes ui-tooltip and ui-tooltip-content this way:
.ui-tooltip
{
/* tooltip container box */
max-width: your value !important;
}
.ui-tooltip-content
{
/* tooltip content */
max-width: your value !important;
}
Hope this helps!
Maybe you can set the width like this in the js
$("#IDOfToolTip").attr("style", "max-width:30px");
or
$("#IDOfToolTip").css("max-width", "30px");
.ui-tooltip{
max-width: 800px !important;
width: auto !important;
overflow:auto !important;
}
.ui-tooltip-content{
background-color: #fdf8ef;
}
div.ui-tooltip{
width: 210px; //if fit-content not worked in specifics browsers
width: fit-content;
}
I need to modify the image of primefaces rowToggler. This is what I'm trying in the css file:
.ui-datatable .ui-row-toggler {
cursor: pointer;
background-image: url("/resources/images/expand.jpg") ;
}
I have also tried changing the url to /images/expand.jpg, images/expand.jpg and simply expand.jpg. But none of them find the image.
What am I missing?
This is an old thread: adding an answer in case anyone else finds this on Google. The problem comes from the fact that the class used for adding the icon is hardcoded (see the source code) to be the class ui-icon-circle-triangle-e when the row is collapsed, and ui-icon-circle-triangle-s when the row is expanded. So the way to do this is to override the definitions of those classes in your style sheet. Here is what worked for me:
.ui-icon-circle-triangle-e {
background-image: url('../images/triangleRight.png') !important;
background-position: 0px 0px;
}
.ui-icon-circle-triangle-s {
background-image: url('../images/triangleDown.png') !important;
background-position: 0px 0px;
}
The defaults looked too much like simple bullet points - users were overlooking that they were clickable.
If you are putting your images inside the resources folder of your Project, you should access it like this:
.ui-datatable .ui-row-toggler {
cursor: pointer;
background-image: url("../javax.faces.resource/expand.jpg.xhtml?ln=images/") ;
}
The magical formula should be
../javax.faces.resource/<file-name>.xhtml?ln=<path-to-the-folder>/
So if your image is at /resources/car/bmw/series7.jpg, you should access it with ../javax.faces.resource/series7.jpg.xhtml?ln=car/bmw/
With the information you provided, its most likely because you have an app running on "localhost/APP_NAME/", and when you do "/resources/..." it points to "localhost/resources/..." which doesn't exist (it should resolve to "localhost/APP_NAME/resources/...".
Try this instead of url (its JSF specific)
url("#{resource['images:expand.jpg']}")
<script type="text/javascript">
/*<![CDATA[*/
$(document).on("click", ".ui-icon-circle-triangle-e", function() {
$(this).css({
background: 'url(#{request.contextPath}/images/data/silm.gif)'
});
});
/*]]>*/
</script>
<style type="text/css">
.ui-datatable .ui-row-toggler {
cursor: pointer;
background: url(#{request.contextPath}/images/data/eklem.gif) ;
}
</style>
I'm using the jQuery DatePicker control for the first time. I've got it working on my form, but it's about twice as big as I would like, and about 1.5 times as big as the demo on the jQuery UI page. Is there some simple setting I'm missing to control the size?
Edit: I found a clue, but it opens up new problems. In the CSS file, it states the component will scale according to the parent element's font size. They recommend setting
body {font-size: 62.5%;}
to make 1em = 10px. Doing this gives me a nicely sized datepicker, but obviously it messes up the rest of my site (I currently have font-size: .9em).
I tried throwing a DIV around my text box and setting its font size, but it seems to ignore that. So there must be some way to shrink the datepicker by changing the font of its parent, but how do I do that without messing up the rest of my site?
You don't have to change it in the jquery-ui css file (it can be confusing if you change the default files), it is enough if you add
div.ui-datepicker{
font-size:10px;
}
in a stylesheet loaded after the ui-files
div.ui-datepicker is needed in case ui-widget is mentioned after ui-datepicker in the declaration
I can't add a comment, so this is in reference to the accepted answer by Keijro. I actually added the following to my stylesheet instead:
div.ui-datepicker {
font-size: 62.5%;
}
and it worked as well. This might be preferable to the absolute value of 10px.
Not sure whether some body has suggested following way, if yes, just ignore my comments. I tested this today and it works for me. By just resizing the font before the control gets displayed:
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
Using the callback function beforeShow
I change the following line in ui.theme.css:
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
to:
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }
Add
div.ui-datepicker, .ui-datepicker td{
font-size:10px;
}
in a stylesheet loaded after the ui-files.
This will also resize the date items.
For me, this was the easiest solution:
I added the font-size:62.5%; to the first .ui-datepicker tag in the jquery custom css file:
before:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;}
after:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }
I was trying these examples without success. Apparently other stylesheets on the page were setting default font sizes for different tags. If you adjust the ui-datepicker you are changing a div. If you change a div you need to make sure the contents of that div inherit that size. This is what finally worked for me:
<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>
Good luck!
I was using an input to collect and show the calendar, and to be able to resize the calendar I have been using this code:
div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}
It works like a charm.
$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');
This worked for me and seems simple...
$(function() {
$('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});
<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
with out changing the css file you can also change the calendar size by putting the the following code in to ur <head>.....</head> tag:
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
</style>
<script>
$(function() {
$( "#datepicker" ).datepicker({
//font-size:10px;
//numberOfMonths: 3,
showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
});
});
</script>
</head>
I tried the approach of using the callback function beforeShow but found I had to also set the line height. My version looked like:
beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
the best place to change the size of the calendar is in the file jquery-ui.css
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .7em; /* <--default is 1.1em */
}
This code will work on Calender buttons.
size of numbers will increase by using "line-height".
/* Change Size */
<style>
.ui-datepicker{
font-size:16px;
line-height: 1.3;
}
</style>
you can change jquery-ui-1.10.4.custom.css as follows
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Another approach:
$('.your-container').datepicker({
beforeShow: function(input, datepickerInstance) {
datepickerInstance.dpDiv.css('font-size', '11px');
}
});
$('div.ui-datepicker').css({ fontSize: '12px' }); work if we call it after
$("#DueDate").datepicker();
Fiddle
The Jacob Tsui solution works perfect for me:
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
We can alter in the default 'jquery-ui.css' file as below given code:
div.ui-datepicker {
font-size: 80%;
}
However, changing the default 'jquery-ui.css' file is not recommended as it might have been used somewhere else in the project. Changing values in the default file can alter datepicker font in other webpages where it has been used.
I used the below code to alter "font-size". I placed it just after datepicker() is called as shown below.
<script>
$(function () {
$( "#datepicker" ).datepicker();
$("div.ui-datepicker").css("font-size", "80%")
});
</script>
Hope this helps...
I think I found it - I had to go into the CSS file and change the font-size for the datepicker control directly. Obvious once you know about it, but confusing at first.
open ui.all.css
at the end put
#import "ui.base.css";
#import "ui.theme.css";
div.ui-datepicker {
font-size: 62.5%;
}
and go !
To get this to work in Safari 5.1 with Rails 3.1, I had to add:
.ui-datepicker, .ui-datepicker a{
font-size:10px;
}
I had datepicker appearing in a modal and because of the "date-display-container" on the left hand side, the calendar was partially out of view, so I added:
.datepicker-date-display {
display: none;
}
.datepicker-calendar-container {
max-height: 21em;
}
.datepicker-day-button {
line-height: 1.2em;
}
.datepicker-table > thead > tr > th {
padding: 0;
}