tcbegley / dash-bootstrap-css Goto Github PK

There seems to be an issue in all themes with spacing of the x-icon in the multiselect values.
I'm currently using the following versions:

• dash==1.11.0
• dash-bootstrap-components==0.9.2
• dash-core-components==1.9.1
• dash-html-components==1.0.3

dash-bootstrap-components v1 uses Bootstrap 5 but this project uses Bootstrap 4, so updates are needed.

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.

customise radio item checked color

Not sure how well this will work since DataTable uses a lot of inline styling, but it should at least be investigated.

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;
}