jQuery UI date picker displays incorrectly (see-through) - javascript

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

Related

No styles being loaded for TipTap in React

I am in the process of finding a rich text editor to add to my application and came across TipTap. It looks great so I followed a tutorial I found on YouTube however no styles are being loaded on my site.
I have been searching for a solution for ages but can't find a replication of this problem.
No styles are being loaded on render so the editor is no more than a line of text indicating the menu buttons and a blank box (which is editable) for the input area.
All of the buttons behave as expected but there are no styles.
I noticed that if I try to render a simple HTML button on another page it also comes without default styling. Is there something obvious I'm missing here? I have been searching for a solution for a few hours now.
This is how my editor looks
This is how it should look
This is a HTML button also showing without a default style I tried to render on another page
<button type="button">Where is the style?</button>
I tried deleting the cache on Chrome however nothing changed
If anyone is in the same boat I have found a solution, each element on the page needs to be defined explicitly within the css file. Default behaviour wasn't working as expected so for the buttons I added to the style sheet:
button {
border: 2px solid black;
padding: 3px;
border-radius: 2px;
}
and styles appeared.
Adding .ProseMirror to each element had no effect on its styling so I had to style elements globally. This affected other components I had made such as a Button component, to overcome this I added editor to the class name of each button in the Editor component
<button
//
className={editor.isActive('underline') ? 'is-active' : 'editor'} //default is '' but 'editor' added
>
This allowed me to style the Editor buttons separately
button.editor {
border: 2px solid black;
padding: 6px;
width: 80x;
border-radius: 8px;
background-color: ##C1BCAC;
}

Remove JS role="log" Divs but keep tooltip formatting

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

Bootstrap multiple date picker

i am trying to implement the multiple date picker option in bootstrap modal popup. I have used jquery plugin for the same. However nothing seems to work. Please help me with the implementation.
project files
Set datepicker's z-index above the modal's which is 1050.
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}

Datepicker size in jQuery cannot be adjusted

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.

jQuery UI Datepicker: don't highlight today when it is also selected

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;
}

Categories

Resources