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;
}
Related
Basically, I have two Plotly Dash dropdowns. I loaded custom CSS upon page load like this. Each child of my select keywords dropdown selected has a designated color in my custom CSS. Now, I have another dropdown that I want to color dependent on the colors of the first dropdown. For example:
11797656 asset has the Agedwip keyword. So, I would like it to be red like the keyword Agedwip element. This is hard to achieve because the CSS I have been using is from a static file which is loaded only upon page load. So even if I know the color 11797656 should be, I cannot actually alter the CSS and make it that color as far as I know, since it would not read the file and update the CSS in the browser.
I figured using custom javascript would make this possible, if I could directly alter the browser's CSS as opposed to just the static file that I loaded as a stylesheet. The way I am thinking about this now is...create a javascript function that will alter the color of a specific element, find a library with a javascript interpreter that has Python bindings, call the javascript function from within Python and pass it the necessary values which should update my browser's CSS.
Example:
javascript function( child_index_num, color )
alter asset css with child_index_num to give it color I want
Here is the code I currently use, to define the keyword static CSS upon page load. There are many more elements, this is just the first 3 for sake of understanding how I do this:
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(1) {
background-color: rgb(228,26,28);
border-color: "grey";
color: #fff;
}
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(2) {
background-color: rgb(55,126,184);
border-color: "grey";
color: #fff;
}
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(3) {
background-color: rgb(77,175,74);
border-color: "grey";
color: #fff;
}
Essentially just a color for each spot that could possibly exist. Can someone validate my idea for coloring select assets prior to me trying it, or provide a better alternative? Or is this just not possible to do/would it slow down my website drastically to implement? I am a novice with Javascript, so this solution was a bit out of my comfort zone. Feedback would be appreciated, thank you!
I have a bootstrap (v4.5.3) form, where my selects look like this in firefox:
When someone tries to submit the form, I have some JS code that runs, and does validation. One of the things it checks for is that someone actually chose an option, and didn't leave it on -- Select an Option --. When I detect this, my javascript would stop form submission, and highlight the option by setting the border to red:
ELEMENT.style.borderColor = "red";
Unfortunately, when I do that, my select loses whatever styling bootstrap put on it, and looks like this:
I left the bottom one untouched for easy comparison.
Am I highlighting it wrong? Is there some css class I'm supposed to use instead of changing the borderColor?
Edit: See https://jsfiddle.net/xbqucoLp/ for example
Bootstrap actually comes with validation CSS built in. The style of the select in bootstrap is different to what you have in your question so it may not be to your liking. It does however keep the select arrow consistent unlike what you currently have.
See https://getbootstrap.com/docs/5.0/forms/validation/ for details
Here is a working fiddle: https://jsfiddle.net/0gqL7641/1/
The advantage of using this is that when you choose an option it changes from red to green.
If the above is unacceptable to you, then the following will work:
You can use outline instead of border and this doesn't change the styling of select
this.style.outline = "solid 1px red";
Another way of changing the outline without touching border is to use shadow
.redOutline {
-webkit-box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
}
and use the following to add the outline
this.classList.add("redOutline");
You can tweak the shadow CSS using this tool https://html-css-js.com/css/generator/box-shadow/
Have you tried adding a class to the element instead?
like this
element.classList.add("mystyle");
that might work as long as the only thing that class contains is a border color with !important
Ah I didn't realize there was a difference sorry. Usually for these custom selects, there are classes that overlay the browser select to get custom features. I would see if you can target those classes and change their border color. Looking for the elements in the browser dev-tools allows you to change their css in the browser to test if you can do that to see what element you need to target.
I'm trying to change the background color of a text input field with
$('input[name=testname]').css({"background-color": "#ffffff"});
but after that the style of the textbox is changed like this (the right one is the changed one)
Seems to only happen in Firefox, is there a workaround for that?
Edit: Example
The first textinput has different style than the second. (Not in Chrome, here, just in Firefox 25.0.1) This is what it looks like here.
Edit 2: i corrected the color, this even happens, if the new color is the same as the old color.
This is a really strange behavior. I can't really find the source of this problem... I could find the source code of the default input field(in which it changes), but could not find the css source of the normal look of it.
Solution 1
However i can force the input field the look like the default input field:
.changeBg
{
background-color: white;
border-radius: .18em;
border-width: 1px;
border-style: solid;
border-top-color: #abadb3;
border-left-color: #e2e3ea;
border-bottom-color: #e3e9ef;
border-right-color: #dbdfe6;
padding: 2.23px;
}
.changeBg:hover
{
border-top-color: #3d7bad;
border-bottom-color: #b7d9ed;
border-right-color: #a4c9e3;
border-left-color: #b5cfe7;
}
Where i just used an class which changes the css background:
$('input[name=test]').addClass('changeBg');
Note that is only a fallback for Firefox
jsFiddle
Update
You may want to use #-moz-document url-prefix() { } to only target firefox for this fallback.
jsFiddle
It also seems to happen on chrome, just with plain css
Solution 2
As this not only occurs to firefox and every browser has it own markup, you might as well create one input markup for every browser.
This way you do not have to specify ever markup for every browser.
By default: all form elements are styled by user-agent(browser) style-sheet. If you try to override style to the elements, then user-agent partially (observed) or fully (may be) remove its style-sheet**.
Just Add border styling to element to textbox to maintain the inconsistent look.
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
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.