Bootstrap and Slider Misplacement

Dash Python
1

I’m getting some apparently weird displaying of a slider in a col-md-6 div using bootstrap. I’m afraid I can’t share the exact code, but I’m uploading a screenshot.

image
image.png950×111 5.28 KB

Some slider labels and nodes aren’t displaying where they’re supposed to, and they end up on top of a heat map object placed on the left col-md-6 div element. The right column starts at the ‘C’ character in “Choose Date”. The basic structure of the code is as follows:

div
    div
        labels and heat map part
        className="col-md-6"
    /div
    div
        labels, date picker, and slider part
        className="col-md-6"
    /div
    className="row"
/div

The slider part looks something like this:

dcc.Slider(
    id="my-slider",
    marks=my_marks,
    min=my_marks_rng[0],
    max=my_marks_rng[1],
    value=float(my_slider_marks[0]),
    step=my_marks_step,
    updatemode="drag",
),

If needed, I’ll try to spend sometime to generate a MWE. What’s strange about this is that it’s the only element to behave like this in the entire document. I have other rows of col-md-6 columns with charts and labels and they all display correctly. Any thoughts?