Can I use bootstrap responsive display utility classes?

Dash Python
1

I’m trying to basically use the examples listed here at the Bootstrap doc page

I’m essentially adding to my elements in a bootstrap table the class .d-none .d-lg-block .d-xl-none as in the link I see that the code is putting that class on the td element, which is good. But no matter no how I resize the window or use Safari’s ‘responsive design mode’ to change to other simulated phone sizes etc., the table elements don’t disappear.

I find that it’s hard to get Dash apps and Dash bootstrap components to work well / scale well on mobile. Disappearing some columns from a table seems like a good way to help but I’m not sure why it doesn’t work. Perhaps something is needed so it knows what size the display is?

2

Hello @marcosh,

I think the easiest way to accomplish this is actually using media query’s in the css stylesheet and go from there.

media only screen and (max-width: 768px) {
    .dash-table tr>td:nth-child(4) {
        display: none;
    }
}

Something like this should work. :slight_smile:

1 Like
3

Ah, interesting! I’m using a dash bootstrap table not dash-table, but what does this do exactly? Hides columns 4+? I want to hide specific named columns.

I did get it to work by dynamically adding d-none d-lg-block to all the html.Th and html.Td occurrences of the columns I wanted to hide dynamically, however now the styling is off as the little gray borders are in the wrong spot. I think it’s because the “role” is no longer “Cell” so i need to get that back somehow. You can see here those two columns of date and score will vanish when I change size of the window, but the horizontal rule is now in the wrong spot when they’re not hidden.

Screenshot 2023-01-27 at 1.03.53 PM

4

Ok got it working! First I had to use d-none d-lg-table-cell as the classes, not d-lg-block.

Second I have updated a branch of dash dataframe table to also format html.Th tags with the cell_style_dict information not just the td tags.

I need to clean up the entire class (as I have competing branches that I need to rectify) but passing in

        cell_style_dict={
            'score': lambda x: {
                'className': "d-none d-lg-table-cell",
            },
            'date': lambda x: {
                'className': "d-none d-lg-table-cell"
            },
            'start_ts': lambda x: {
                'className': "d-none d-lg-table-cell"
            }
        },

is hiding the cells of those names dynamically now.

5

Hello Dear, Yes, you can use Bootstrap responsive display utility classes. These classes allow you to control the visibility and display of elements based on the screen size.

For example, you can use classes like d-none, d-sm-block, and d-md-none to hide an element on all screen sizes, show it only on small screens, or hide it only on medium screens, respectively.

These classes can be applied to any HTML element and can be combined with other Bootstrap classes to achieve the desired layout and appearance on different screen sizes.

It’s important to note that Bootstrap’s responsive display utility classes are just one aspect of its responsive design capabilities, and you may also need to use its grid system an other classes to create a fully responsive layout.

Redard,

2 Likes