CSS Fix for dcc.DatePickerSingle()
wtfzambo opened this issue · 18 comments
Hi,
the current CSS downloaded from this repo (at least FLATLY, but I'm tempted to believe this applies to all templates) is not compatible to the structure of the aforementioned component and applies a wrong styling, most notably, font-size and width that happen hardcoded inline (I guess due to how the component itself is built?).
Here's also the link to a similar discussion in the Dash forum.
I fixed it overriding these parameters on my app, and managed to make it look in line with the rest of the styling. Especially, font size and width, that are now based on root size and parent container respectively.
It's probably not a clean solution, I apologize in advance, but I'm pretty new to development so most stuff is still a bit shady to me, but it should be clear enough to anyone reading where the mistake is and how to fix it properly.
/* Set the current outer border to 0 because it's messed up,
and put the FLATLY properties inside the DateInput_input class
which works well instead. */
.SingleDatePickerInput {
border: 0px;
}
/* Fix box width of datepicker to be 100% of parent container*/
.DateInput, .DateInput_1 {
width: 100%; /* replace with whatever length you prefer */
}
/* Fix the font size and other stuff of datepicker*/
.DateInput_input, .DateInput_input_1 {
/* my personal stuff */
text-align: center;
line-height: calc(1.5em + 0.75rem);
/* default flatly stuff */
height: calc(1.5em + 0.75rem + 2px);
font-size: 0.9375rem;
font-weight: 400;
color: #7b8a8b;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}Hey @wtfzambo
Thanks for raising this. Yeah, the structure of DatePicker* components changed in Dash v1 (I think it was v1, it was around that time anyway), and I never got around to updating this repo. I had actually done some work on new stylesheets (which are sitting on the css-updates branch on the dash-bootstrap-components repo) but I never pushed them here.
I just opened #8 to address this, can you try downloading the rebuilt CSS from that branch? Here's flatly specifically and let me know if that works for you? I did some testing at this end, but not extensive stuff.
From memory, the changes I made to the DatePicker* components were pretty ready to go, but I got a bit lost trying to restyle the Dropdown component and then life got in the way. Anyway, let me know how you get on with my updates.
So, I tested the new CSS. The border and the font size are fixed on my side, font color I'm not sure where it's coming from but is not aligned with the dropdown color, however width is still hard coded and doesn't resize. Screen for reference:
As you can see, the box that contains the date goes well over the width of its parent container. This is a property that I fixed in the class .DateInput, .DateInput_1 (either is good), by setting width: 100%.
For reference, this is what it looks like on my side with the fixes applied:
Thanks for trying it out. Can you share some code and I'll take a closer look?
Also, are you linking to other stylesheets in addition to the one downloaded from this repo?
@wtfzambo I had a chance to try out your CSS (thanks for including it btw). It works pretty well for DatePickerSingle and Flatly, but causes problems with DatePickerRange and other themes, so it's a little hard to incorporate more generally.
The motivation for having a fixed width is really just that that's what dash-core-components does, and my instinct is to generally try and preserve behaviour as much as possible so that people know what to expect. I'll think some more about how to make things more flexible though.
Yes, of course the CSS I created is tailored for the component I'm using, I didn't test it at all on Range.
Actually, I'm using two single datepickers AS a daterange because I wasn't able to customize some behaviour with range, that I could instead do with single pickers.
As for what stylesheets, I'm just using FLATLY downloaded from this repo and a small override.css that I used to fix the datepicker aspect and a couple of irrelevant aspects (colors and some margin on container), plus the styling for the shadowed box, that's it. It's quite basic.
About the width, it just made more sense to me to have it dynamic, given that I'm using mostly DBC and every component there has dynamic size. Also, for smaller screens, the layout I made would turn out ugly with a fixed width, which is unacceptable to me.
If I get some time, which is probably never, I'll try to come up with some CSS styling that addresses both single and range picker.
PS: what code did you want me to share? The CSS or the layout?
About the width, it just made more sense to me to have it dynamic, given that I'm using mostly DBC and every component there has dynamic size.
That's a very fair point, perhaps I should priorities being consistent with Bootstrap rather than consistent with Dash components. I'll tinker around a bit more and see what I come up with.
PS: what code did you want me to share? The CSS or the layout?
I was thinking the layout itself, but I think I have a good idea now of what the issue is and what you're trying to do, so don't worry about it if you're short on time.
Made some changes, not tested extensively yet, but I think I've got the behaviour you want + sensible behaviour for DatePickerRange
Feel free to point me towards the updated file when you think it's ready so I can test them on my app.
I've been pushing everything to the dash-v1-updates branch. I think the latest updates should accomplish a lot of what you want. DatePickerRange is reasonably well supported too, there appears to be a problem with placement of the fang for the second input if the date picker is too wide, but that's a subtle enough problem that I'll leave it for now.
Going to add some updates for Dropdown too before merging.
I've made some improvements to the styles for dcc.Dropdown too and merged to master. Please do try it out and let me know if you have further issues.
Yep, I guess it's perfect now. Width updates, text is centered and font size is inline with the other elements. I'm not sure about what you changed in the dropdown menu instead.
Anyway, here's the screenshot with the updated style. The only thing I would change, but that's my personal preference, is the font color, to be the same as the one within the dropdown (which is lighter w.r.t this one).
Great, glad to hear it!
Good catch on the font colors, you have a sharp eye 👀. I will take a look.
Actually if you check my CSS it's already there.
The font color I mean. Sorry, edit again: it's hardcoded so I guess it's only good for flatly. Probably for other stylesheets it has to be something else.
I don't think it can inherit it tho cause it will get the body one, at least on my tests.
I just pushed some changes (PR #10) that should address this, it's in master already. Check it out and let me know.
Hi, sorry for the long hiatus. I got stuck into different work stuff and had 0 time in the last month to go back to my dashboard, I'm really sorry.
So, I managed to test the new .css now. It seems that the color of the text in datepicker doesn't change tho:
The color of the text here is #484848, which doesn't appear anywhere in my code nor the CSS, so I guess it takes the browser's default. I see that in the new merge you added the color to .DateInput > input::placeholder. In my specific case the date you see isn't a placeholder, but an actual selected date.
I fixed it by adding the color property also to the .DateInput_input class, right below it (row 9728).
I hope this is somewhat helpful in any way.
Hey @wtfzambo
No worries for the delay, I know how easily other things can come up and get in the way 🙂
Thanks for testing it out. I will take a look into the font colors, I thought I had accounted for that but clearly not.
Hi there, I am pretty new to dash and wondering if there was a fix/workaround the DatePickerSingle input font color?
Apologies for very slow response, for various reasons I didn't have much time for this project for the last several months.
In the testing I've been doing the date picker font colour is being set correctly as far as I can tell. Since this issue is quite old and the original issue that it was opened for has been resolved, I'm going to close it, but please do open up a new issue regarding date picker font colours if you're continuing to have issues. I should have a bit more time to look into it in more detail now.