Im trying out the datepicker of JQuery and the previews given in the site
http://jqueryui.com/demos/datepicker/#icon-trigger
has different size than the actual one i placed on my code.
I tried changing the font-size of the datepicker table
.ui-datepicker table {width: 100%; font-size: .6em; border-collapse: collapse; margin:0 0 .4em; }
since I could not find a font size setting of the Header (Month Year), the topmost part in between the previous and next arrow.
The fonts in the calendar and the daynames already became smaller
but the Month year font size remained the same. Its really dissapointing. ;(
.ui-datepicker select.ui-datepicker-month-year {font-size:.6em; width: 1%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 1%;}`
Please help.
Thanks,
tinks
I'd suggest creating a theme with the online "Theme Roller" rather than editing CSS manually. You can start from the existing theme that best matches your needs and tweak it to your liking. The benefits are:
You don't risk breaking CSS rules used for features or layout
The theme will be automatically reused by all other jQuery UI widgets
Additionally, the Theme Roller adds a link to the generated CSS (see the source code when you're done) so you can go back later and do further edits.
Related
I found several posts on this but none had an answer that works for my scenario. This post was the closest I could find.
Currently, the tooltips on my ASP.NET web pages have been formatted (using CSS) and display correctly when hovered over, but also appear (using jquery 1.12.1) at the foot of the page as a list of DIVs each time a tooltip displays - on some pages there are over 20 so the page gets very 'busy' if the user hovers over multiple items.
Following the suggestions in the linked post, if I add the link to the js ui file (as below) in the HEAD section of my pages, the divs stop appearing but the formatting for the tooltips is partially lost.
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
This is the CSS for the tooltip:
.ui-tooltip {
background-color: #E8EFFD;
padding: 4px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #5787D2;
box-shadow: 0 0 5px #5787D2;
font-size: 0.9em;}
body .ui-tooltip {
border-width: 2px;}
Initially I though the only difference after adding the link was the font being larger, but when hovering over a disabled control, I noted the background colour and the html formatting is being lost. For enabled controls, these have retained the background colour of the tooltip.
I added a disabled class for the tooltip, but that didn't make any difference:
.ui-tooltip:disabled {
display: none;
}
Does anyone know how I retain the existing font size, background colour and formatting using this logic?
The tooltip when it creates the divs:
The tooltip when the divs are removed:
The tooltip over an enabled control:
The tooltip over a disabled control:
Is my only option to go back to 1.10.? of jquery which doesn't add the DIV tags, but if so, will it still cause the same issues with the disabled controls?
Many thanks
Martin
whenever I use select2, the empty box is just one line high.
When input is added, the box expands accordingly, but always just the exact amount needed.
How can I change it so my input box is at least 100px high, even if empty? In some cases, I expect the box to be 100px or even higher when filled, so it looks really dumb in my layout, if the box is just 16px high in the first place.
The HTML element to which I'm applying select2() is a Select element with "multiple=multiple" (I need multiple inputs eventually.)
I googled a lot, and also searched in this forum, but nothing worked so far.
I tried including something like this in my custom css file:
.select2-container .select2-choice {
min-height:100px !important;
}
But it didnt't change anything. Maybe those tipps are for older versions of select2? I'm using 4.0.0.
How can I enlarge the box?
Solution:
I added this to my css. It's all about getting the css selectors right (which indeed seem to have changed, recently). I extracted their names by inspecting my HTML output.
.select2-container .select2-selection--multiple{
min-height:100px;
padding-bottom: 50px;
}
.select2-selection.select2-selection--multiple {
min-height: 100px;
}
Tested on the examples page.
I would just pad the select2-choices container a bit so you can still have a dynamic height but be sure that the element can never make contact with the bottom of the container. You can also put the min-height here I think.
.select2-container-multi .select2-choices {
padding-bottom: 4px;
min-height: 26px;
}
I'm having some difficulty with the jQuery date picker control. In my application, I'm using the most basic method to invoke the calendar:
$('#elmt').datepicker();
The target element is an input text box on a pop-up div. Whenever I click into the textbox, the calendar shows up as see-through: http://s17.postimage.org/4knyxgvjz/see_thru_calendar.png
I've tried some suggestions already on Stackoverflow to adjust the z-index of the ui-datepicker class:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 9999 !important; }
But that hasn't made a difference either. My test environment is running Internet Explorer 7 (the calendar does render OK on the sample index.html provided by jQuery-UI).
Has anyone seen an issue like this with the jQuery UI datepicker?
You are not loading the relevant CSS for the jQuery UI datepicker, and that is causing the Calendar to be as "see-through".
To test it, edit the CSS file for the jQuery UI and change this class background:
.ui-widget-content {
background: #000;
}
If the datepicker gets a black background, the style sheet is being
loaded, but the path for the images might be wrong.
If no black background, the style sheet isn't being loaded.
Another method to confirm if the problem lies on the style sheet is to include the CSS directly from the jQuery CDN:
http://code.jquery.com/ui/1.8.20/themes/redmond/jquery-ui.css
How to make cross size and cross browser compatible
print CSS for World's most use
paper sizes to get print?
A4, A3, Legal etc
How we can same almost similar
formatting to our site page's like
MS word ? What are best practices to
get consistency in formatting of
print page from any popular
browsers?
How to set cross browser margin and
font-size with consistency for all
like MS word does?
Is css font-size unit em best
for both screen and print? or we should use pt or px in print css? and i saw first time here new css property body {width: 7in}.
Can we set different CSS (with or
without help of JavaScript) for
color and B&W print (if i want to give different light color to save ink in B&W print?
Should we give fixed width to print
css if we are making fluid site for
screen to get print on paper (which
has fixed width)?
What about this? any suggestion?
body {margin: 15px; }
#mainContainer {width: 842px; /* equivalent to A4 */ margin: 0; }
#header {display: none; }
form {display: none!important; }
#footer {display: none; }
#mainContent #leftCol {display: none; }
#mainContent #rightCol {display: none; }
#mainContent #contentSection {float: none; padding: 0; margin: 0; font-size: 13px; width: 100%; }
You can specify print-only stylesheets using <link rel="stylsheet" type="text/css" media="print" href="print.css">
The user has to specify the page size in their print dialog. You were able to suggest the page's orientation in CSS2 using #page but it was dropped in 2.1. See here and here for excellent introductions into print stylesheets.
The usual quirks apply, like differences in the box model. The only best practice that comes to mind is keep it simple, don't use position: absolute, and test a lot. Install a PDF printing driver for testing.
You should be able to specify those in your print stylesheet.
Using pt, being a physical unit, should produce consistent results on every machine.
No. You will have to have the user pick the right stylesheet beforehand.
If you don't want your printout to consist of five pages next to each other, probably yes. However, you would only do that in your print stylesheet.
Remember that in the default settings, all browsers will print a proprietary header and footer that only the user can remove in their print dialog.
If you want total control over every inch of your print product - including size and orientation - you will need to start generating PDFs.
I'm using the jQuery datepicker to select dates. It works fine, except there is 1 default behavior that I would like to change. When you select a day, the selected day is highlighted (which I like). The current day is also highlighted, but using a different css style (which I also like). However, if you select the current day, the highlighting because it is the current day supersedes it being selected... I would much prefer it being selected to supersede the current day highlight, which I feel would make it very clear that you have selected the current day.
Now, I feel I could probably update the css to solve my problem. However, I really don't want to tweak the out-of-the-box jQuery UI css, because I want to later add skins to my app. This means if I grab a bunch of the jQuery UI themes... I then have to make the same tweak on all of them (very undesirable).
I could probably update the actual Datepicker plugin to do this as well, but then I run into the issue that if I want to update my Datepicker later on... I need to remember to make this fix again.
Ideally, I could use some option built into the Datepicker to accomplish my goal, but as of yet none of the options seem to be right. I would settle for some kind of JavaScript hack, or css plopped into the page, but I'm at a loss for ideas right now.
Adding an additional CSS file to your page would definitely be the preferred method. It's easily managed and uses CSS the way it was intended to be used!
You would need to place your override CSS in the head tag after any previously loaded base jQuery CSS or any theme CSS files in order to override their values. (You could also increase the specificity of the default tag, referencing a class or ID in your specific instance.)
i.e.
<head>
<link href="base_jquery_css_file" rel="stylesheet"/>
<link href="theme_jquery_css_file" rel="stylesheet"/>
<link href="your_override_css" rel="stylesheet"/>
</head>
The "your_override_css" file would simply contain:
.ui-state-active, .ui-widget-content .ui-state-active {
/*any CSS styles you want overriden i.e.*/
border: 1px solid #999999;
background-color: #EEEEEE;
}
Note from Mike:
I ended up finding out that there is a td around the anchors that represent the days, and the td also has the "today" information... so despite there not being a cross-browser way to select an item that has multiple classes (that I've found), the following will work in this case, in a new file just as PHPexperts.ca describes:
.ui-datepicker-today .ui-state-active {
border: 1px solid #aaaaaa;
}
Since it took me a while to figure out how to exactly replicate the "selected" style over top of the today style even with the answer from PHPexperts.ca, here's a bit more information that might make it a bit more straightforward if you're having trouble.
If you select a day other than "today", the style that you should copy for an identical look when "today" is selected is in the a tag and in the selector
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
This should be easy to find if you have Firefox with Firebug installed (select the date, reopen the datepicker, right click and select 'inspect element'.
For the jQuery UI theme 'UI darkness' the style to copy into your override css is
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url("images/ui-bg_inset-soft_30_f58400_1x100.png") repeat-x scroll 50% 50% #F58400;
border:1px solid #FFAF0F;
color:#FFFFFF;
}
If you change the theme, it looks like all 3 of these styles change.
Actually, it's quite easy, just add !important to the .ui-state-active class for the background and the border element.
.ui-state-highlight {
border: 1px solid #d3d3d3 !important;
background-color: #e6e6e6 !important;
}