DataToolbar is displayed wrong

Support
#1

Hi,

I develop an application, that uses HTML/Serverside Rendering with a few sprinkles of React - and Patternfly 4 is an exquisite tool for our requirements.

I want to use the DataToolbar, but I am not able to correctly use it, as it displays without correct spacing and ignoring the real breakpoints. When I look at the correctly displayed examples in https://www.patternfly.org/v4/documentation/core/experimental/datatoolbar/toggle-group, I notice that my browser recognizes a grid/flex layout, when I use the examples, these are missing and it displays stacked without any spacing.

An example, embedded in a simple demo page, can be found here:

First time I noticed the problem was when using the react-version and it is the same behaviour, when I use “yarn build”, although everything works using “yarn watch”. I will probably post a react example later, but the problem looks at leas similar.

best regards,
florian

#2

Hey Florian,
Sorry for the late reply, holidays slow things down around here :slight_smile:
The issue you are experiencing is because the data toolbar is an experimental component and so you’ll need to include the styles for it explicitly as they don’t ship by default. Hopefully I’m understanding you correctly.
I believe it would included like this:
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/components/DataToolbar/data-toolbar.css">

#3

Hi Matthew,

Happy new year and thank you for your answer - works as planned.

I will probably come back with a new question, as I have an application that is part HTML, part React and the React-DataToolbar works when I use “yarn watch”, but I use “yarn build”, the behaviour changes, as the DataToolbarToggleGroup doesn’t correctly work using the resulting build bundle.

I will try to provide a working example.

#4

great! Ya please open a new support ticket for that so it doesn’t get lost in this thread.