tcbegley / dash-bootstrap-css Goto Github PK
View Code? Open in Web Editor NEWBootstrap CSS for use with Plotly Dash
License: Apache License 2.0
Bootstrap CSS for use with Plotly Dash
License: Apache License 2.0
dash-bootstrap-components v1 uses Bootstrap 5 but this project uses Bootstrap 4, so updates are needed.
customise radio item checked color
The dropdown and date picker styles are informed by the form-control
class in Bootstrap. It would be good to support sizing of these like Bootstrap does through the form-control-sm
and form-control-lg
classes.
The best way to do this is likely by applying an additional class to a parent of the component in question. E.g. dash-bootstrap-sm
.
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;
}
Not sure how well this will work since DataTable
uses a lot of inline styling, but it should at least be investigated.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.