I have been working on this view for a while and for some reason my start and end time DateTimeInput components are not responding to my styles. I have an advanced style sheet set up to change the border radius that doesn’t appear to be working. In an attempt to test out the problem, I added styles to the style class and those styles also failed to do anything! Am I missing something or doing something wrong?
Advanced Style Sheet CSS code:
.psc-dropdown-pill { border-radius: var(--input-border-radius) !important; }
1 Like
--input-border-radius what is this set to? The reason your direct styles aren’t working is because of the !important in the stylesheet
If that variable is set to something other than what’s being produced, it could be being set somewhere else which is overriding the value. Open the dev tools in the designer and check its value from there
Did you actually create a Style named “dropdown-pill”? i.e., does it appear in the dropdown for classes or did you just type it in manually?
I can’t reorder quotes on mobile it seems…
But that adv stylesheet rule creates that style class, and looks correct. You’re not required to create a corresponding perspective style, although it’s highly encouraged so that it does appear in the dropdowns
The --input-border-radius is defined above, sorry for not including it.
I also know that this style class works because I applied it to other components that have applied the border radius successfully
In the browser, hit F12 for Developer tools.
- Inspect tool.
- Select the DatePicker.
- Note the applicable styles.
- Find it in the CSS pane.
- Here you go. Override that in your Advanced Stylesheet.
That border is definitely larger than 6px so I'd be checking the dev tools in the designer (from the help? Menu)
Edit: Tools* menu →External debugger
If styles aren’t working, dev tools are the first place to go
My worry is that wouldn’t this overwrite all DateTimeInput fields across the project?
I think you need to add .ia_dateTimeInputComponent which gets added along with your custom style:
.psc-dropdown-pill, .psc-dropdown-pill .ia_dateTimeInputComponent { border-radius: var(--input-border-radius) !important; }
That sadly did not work. It is odd though because even using the regular styles options, the component does not change. Like setting the font size to 60px
It’s the ia_input that applies the border, not the datetime one. How he’s got it should be OK as it should be overriding the ia input border, just need to check dev tools to see why it isnt
I think the class needs to go under the inputProps style, not the main one:
1 Like
That did the trick! Odd that it’s in a different spot but I am glad it worked! Thank You!
1 Like
