Responsive layout - grid with image
Hi everyone,
I was asked to create a layout of a table next to an image. There were a few constraints:
* The table declare its width
* The image aspect ratio is 16 / 9
* Table and image should be aligned (table should be scrollable if content does not fit)
* Both image and table should not overflow, there should not be scroll and the padding bottom should not be exceeded
Attaching a codepen with my approach which doesnt seem to work if the screen is too wide (which makes the image height too big and causes scroll) . This is a rough abstraction as I develop using angular and there are many many components (hence the nesting of html tags that might seem not required) and the image should be a drawable canvas which I will have to deal with later on.
https://codepen.io/AllHailJojoba/pen/ZEdNdvw
From angular perspective:
Each section is a component (table and resizable canvas) and the article is the layout I place both of them in
I was asked to create a layout of a table next to an image. There were a few constraints:
* The table declare its width
* The image aspect ratio is 16 / 9
* Table and image should be aligned (table should be scrollable if content does not fit)
* Both image and table should not overflow, there should not be scroll and the padding bottom should not be exceeded
Attaching a codepen with my approach which doesnt seem to work if the screen is too wide (which makes the image height too big and causes scroll) . This is a rough abstraction as I develop using angular and there are many many components (hence the nesting of html tags that might seem not required) and the image should be a drawable canvas which I will have to deal with later on.
https://codepen.io/AllHailJojoba/pen/ZEdNdvw
From angular perspective:
Each section is a component (table and resizable canvas) and the article is the layout I place both of them in
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
