I am trying to override the style for the datapicker today and change the blue box around todays date to red.
Inspecting the element I find the class to override is the following:
:where(.css-dev-only-do-not-override-sk7ap8).ant-picker-dropdown .ant-picker-cell .ant-picker-cell-inner {
position: relative;
z-index: 2;
display: inline-block;
min-width: 24px;
height: 24px;
line-height: 24px;
border-radius: 4px;
transition: background 0.2s,border 0.2s;
}
I have tried a number of combinations of that className to override yet have not been able to get the styles to render. Can anyone offer guidance?
Actually, the css style to ovveride the blue box is different from what you have done. Do this instead:
.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
border: 1px solid green;
border-radius: 2px;
}
You should get this:
Related
On my site, I have a few footer links that are showing the wrong border color for iOS devices when the link is visited. This is happening on Chrome and Safari for iOS.
Desktop
iOS
I searched through my code and I am not setting this style anywhere.
I have tried reproducing this in a fiddle/codepen, but since they don't let you redirect, I can't see what the a:visited looks like for mobile.
Code
.productsalessection {
width: 34%;
padding-top: 10px;
padding-right: 1%;
padding-bottom: 10px;
float: left;
font-family: Lato, sans-serif;
}
.productsalesbox {
width: 100%;
padding: 14px 12px;
float: left;
border-right: 1px solid #e2e2e2;
}
.productsalesbadge {
width: 80px;
height: 100%;
margin-right: 6px;
float: left;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
.productsalesheading {
margin-top: 3px;
color: #444;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
.productsalestext {
font-size: 12px;
line-height: 14px;
color: #777;
}
<a class="w-clearfix productsalessection" target="_blank" href="http://www.google.com">
<div class="w-clearfix productsalesbox">
<div class="productsalesbadge"><img src="http://www.chicmarket.com/images/SJ.svg">
</div>
<div class="productsalesheading">Trusted</div>
<div class="productsalestext">We proudly maintain a strong relationship with our customers.</div>
</div>
</a>
Changing the color of the a:visited works.
a:visited {
color: #C8C8C8;
}
But this solution is not ideal because this will mess with other a tags on my site.
I have also tried.
a:visited {
color: rgba(0, 0, 0, 0.0);
}
But instead of making the color transparent, it just makes the border black.
I don't normally post links to external sites, but if you would like to take a look and see the problem for yourself, you can check it out here.
Is there a simple fix for this that doesn't require me to set the a:visited color for each a tag that I have?
Looks like this was only happening to borders of divs inside of <a> tags on mobile. In order to fix this I had to not only set color: rgba(0, 0, 0, 0.0); for a:visited, but I had to select the specific div that had the border.
a:visited .productsalesbadge {
color: rgba(0, 0, 0, 0.0);
}
This completely removed the purple visited border I was seeing on mobile.
I have been trying to get my jQuery UI Select dropdown to be aligned on Chrome for some time. Its off by 1px however the list and the parent span.ui-selectmenu-button are both "151px".
All other browsers display it correct.
I've been going through the computer styles one by one but can't find anything.
Its instantiated with the common:
$("#mainlanguage").selectmenu();
And the select box which jQuery uses has basic styling on it. (SCSS)
jquery ui language !select
.mainSearch{
.ui-selectmenu-button {
background:$upsbrown;
outline-style:none!important; // reset
&.ui-state-hover{
border:0;
border-radius:0;
}
border:0;
border-radius:0;
left: 63.3%;
span{
background-color: $upsbrown;
background-position: 93.5% center;
//border-top: 1px solid $navtext;
color: $navtext;
font-size: 11px;
line-height: 18px;
position: relative;
padding-left: 6px;
max-width: 151px;
height: 21px;
z-index: 400;
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
}
}
I've been following along with the examples in the book in making a online catalog and am having a couple of discouraging difficulties in Chapter 8 task C: Catalog display.
I have input the code for the stylesheets as instructed but it has created a slightly skewed result as compared to what is shown in the book. Whilst minor and aesthetic in nature its a little shock to my confidence and slightly irritating when trying to carry on through the book.
As you can see the border seems a little confused and the image at the top is covering the header text.
I've been through the code time and time again but can't seem find out where I've gone wrong. Could anybody give me some clues?
Code from application.css.scss (I'm assuming its here)
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 1em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
colour: #bfb;
font-size: small;
}
}
}
}
The only thing that gives me a hint is in sublime text 2 all beginning with a hash (#banner, #notice etc) are green, but #main is not for some reason?
Same happens to me. I am not sure what to make of this problem as the #banner.img should float left. When examining the compiled application.css, I find the following:
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center; }
#banner img {
float: left; }
As shown above, we have a "#banner img {" starting block which is properly closed, and the #banner block is correctly closed just before that on the same line as 'text-align: center;'. Even if I eliminate all other css elements after the #banner and #banner img blocks, the problem persists.
With my limited CSS knowledge, the only semblance of correct positioning I could quickly figure out was to remove the text-align: center from the #banner block, and add some padding, or alternatively, set the left-margin of the #banner.img to -400px or something. It's not very elegant nor perfectly functional (resizing screws it all up).
I've implemented the jQuery datepicker. It seems to be working fine but the calendar is too large.
jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png
The site I'm working on has many layers of stylesheets and parent pages and controls. And I don't seem to be able to isolate what is making it large. (Sorry, the site isn't public.)
It appears the calendar is based on a font size. I tried wrapping my textbox in a div with a smaller font but it seems to ignore that. Is there any way to specify a fixed font size?
While changing the font size for .ui-widget works, I got the best results with the following.
#ui-datepicker-div { font-size:11px; }
Not only does this seem to do exactly what I need, it is also unlikely to impact any other jquery-ui widgets.
try setting font-size for class .ui-datepicker
.ui-datepicker {font-size:11px;}
http://jsfiddle.net/pxfunc/ps5cA/
It takes some digging in firebug but I have included one of the versions I use to reduce it. The key is to copy the exact styles from the jQuery-ui CSS file and put them in the head of the page you need them or in a CSS style sheet after the jQuery-ui style sheet.
.ui-datepicker {
padding: 0.1em 0.1em 0;
width: 11em;
}
.ui-widget {
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
}
.ui-datepicker th {
border: 0 none;
font-weight: normal;
padding: 0.2em 0.1em;
text-align: center;
}
.ui-datepicker th span {
font-size: 11px;
}
.ui-datepicker td span, .ui-datepicker td a {
padding: 0.1em;
}
.ui-datepicker td {
padding: 0.9px;
}
.ui-datepicker .ui-state-highlight {
height: 12px;
margin-bottom: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
font-size: 10px;
font-weight: normal;
text-align: center;
}
.ui-datepicker .ui-datepicker-title {
line-height: 13px;
}
.ui-datepicker .ui-datepicker-title span {
font-size: 11px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
margin-left: -8px;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
height: 15px;
top: 1px;
width: 15px;
}
.ui-datepicker-next-hover .ui-icon {
height: 16px;
width: 16px;
}
Adding this to the site.css worked for me
.ui-widget {
font-size: .7em !important;
}
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;
}
Our calendar was big and ugly looking with hard to click month arrows. It was caused by mismatching versions of the jquery-ui css and jquery-ui js includes.
version numbers must match e.g.
jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js
but also needed the css recommended above
#ui-datepicker-div { font-size:11px; }
I agree with mdmullinax. You have to change the font size for the whole class
.ui-datepicker-div { font-size:11px; }
because datepicker is not controlled by id so below change has no impact on size
ui-datepicker-div { font-size:11px; }
h
I have a simple scaffold rails application that is doing validataes_presence_of.
The validation is making each textfield bordered. I just want the error messages to be displayed on top.
How can I make these type of changes or color changes to the validation
Rails applications store their CSS in [application_root]/public/stylesheets. A new rails app will have a file called default.css in this directory. This file contains the following:
#errorExplanation {
width: 400px;
border: 2px solid red;
padding: 7px;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#errorExplanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
background-color: #c00;
color: #fff;
}
#errorExplanation p {
color: #333;
margin-bottom: 0;
padding: 5px;
}
#errorExplanation ul li {
font-size: 12px;
list-style: square;
}
If you play about with the values of some of the parameters here - in particular border - you might find something that looks more to your taste.
Have you checked rails guide about validation errors?
I would suggest having a look at Formtastic. Easy to setup, works great with scaffold-type apps and has some nice clean HTML and CSS.