<ix-application> <ix-pane-layout> enable flex layout for content slots - Githubissues

siemens / ix

Siemens Industrial Experience is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.

https://ix.siemens.io/

MIT License

174 stars 62 forks source link

<ix-application> <ix-pane-layout> enable flex layout for content slots #1302

Open intuiquest opened 1 month ago

intuiquest commented 1 month ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Suggestion / feature request

Implementing a responsive full-height flex layout in iX applications can be difficult.

Some components, such as ix-pane-layout, have a default display: block for their content slots.

Additionally, in some cases, these styles cannot be overridden due to the shadow root (e.g., ix-application > main.content).

This is the custom CSS I had to use to overcome this issue:

html, body {
  display: flex;
  width: 100%;
  height: 100%;
}

ix-pane-layout > [slot=content] {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
}

matthiashader commented 1 month ago

Hello @intuiquest! Could you kindly provide us with a working stackplitz example, so we can analyse it in more detail?