Hi!
I'd like to place 3 gauges in a row inside a px-card like seen on https://www.predix-ui.com/#/design/page-layout under the point Cards.
If I use the classes layout and layout_item the content won't be in a row (not only when using px-gauge, but also with text). If I then remove the class style-scope using the Google Chrome dev tools the desired result is gotten. I don't know why the class style-scope prevents me from using layout and layout_item.
And the Predix UI flexbox doesn't work at all inside a px-card altough it works perfectly fine if used in another place of my web app.
Where am I doing something wrong?
Here is the example code I am trying to use:
<px-card header-text="Temperatures">
<!-- 3 gauges in 3 columns -->
<div class="layout">
<div class="layout__item u-1/3">LI1</div>
<div class="layout__item u-1/3">LI2</div>
<div class="layout__item u-1/3">LI3</div>
</div>
</px-card>
Edit: Also, how do I limit the size of px-gauge? If use it it expands to such a size that it doesn't fit into the screen anymore (scrolling is needed).
Answer by Arvind Wanjari · Sep 11, 2017 at 08:35 AM
can you refer sample app and code available here
It has Predix card with multiple gauge , same as given scenario. hope this will help you.
Worked example for px-vis-register? 0 Answers
How do i change px-card background colour? 1 Answer
predix ui seed 3 Answers
Predix ui seed 3 Answers
predix seed ui for time series 2 Answers