search

infor-design / enterprise-wc

Enterprise-grade web component library for the Infor Design System
Apache License 2.0
27 stars 22 forks source link

General: Need an example of a responsive layout #2411

Open ashachodavarapu opened 1 month ago

ashachodavarapu commented 1 month ago

ISSUE:

Version: "ids-enterprise-wc": "^1.1.0",

The implemented service (using window.matchMedia) recognizes the device type when resizing the browser, but the HTML is not updated. I tried using CSS media queries, but the same issue occurred. I also tried using Angular CDK breakpoint observer, but the issue persisted.

Please observe the videos below: https://github.com/infor-design/enterprise-wc/assets/105051938/2013e475-b140-4973-a860-14d7e988fa99 https://github.com/infor-design/enterprise-wc/assets/105051938/b39253cd-003c-441f-9b11-f16dca511dcb

Expected Behavior:

Please show how we can make an example like this:

https://github.com/infor-design/enterprise-wc/assets/105051938/5b1d59da-565a-42a9-a79a-a7abccd3e254

tmcconechy commented 1 month ago

I updated the title. To be clear we do support "responsiveness". But to help will make an example layout with a list like your "working example" but maybe a bit simpler.

ashachodavarapu commented 1 month ago

@tmcconechy okay!

tmcconechy commented 1 month ago

@ashachodavarapu one question. In the old one that works did you use the list detail pattern here: https://main-enterprise.demo.design.infor.com/components/page-patterns/example-list-detail.html

ashachodavarapu commented 3 weeks ago

Hi @tmcconechy, The old application used an angular splitter and a mat-list-item(angular material). Everything is placed inside the ng-container.

Thanks.

tmcconechy commented 3 weeks ago

@jmacaluso711 note the use of splitter in the example.. Thanks!