Predix_Logo
  • Categories
    • Questions
    • Predix | Updates
      • Pricing
      • Product
    • Deloitte - Private
    • How-To
    • Accenture-Private
  • Explore
    • Topics
    • Questions
    • Articles
    • Feedback or Feature Requests
  • Sign in
  • Home /
  • Questions /
avatar image
0
Question by m.lorenz@tug.at · Sep 11, 2017 at 06:47 AM · predix-uipx-cardpredix ui seed

Predix UI: Layout inside px-card

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).

Comment
Add comment
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

  • Sort: 
avatar image
0

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.

Comment
Add comment · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Follow this Question

Answers Answers and Comments

83 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

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

GE Monogram
  • Legal
  • Cookies
  • Forum Terms
  • Contact Us
  • Copyright © 2017 General Electric Company. All rights reserved.


Enterprise
Social Q&A

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Create an article
  • Submit your feedback or feature request
  • Categories
  • Questions
  • Predix | Updates
    • Pricing
    • Product
  • Deloitte - Private
  • How-To
  • Accenture-Private
  • Explore
  • Topics
  • Questions
  • Articles
  • Feedback or Feature Requests