[RFC] iFrame Stylability #2342
Replies: 3 comments
-
In my use case I see the iFrame as a viable option for applications where there is no service widget yet available. I am using it to display data from my APC UPS battery. With a bit of tweaking of my internal NUT UPS web page I was able to get a reasonably close look and feel to other Homepage widgets. I hope you will continue your efforts with this and thanks for your contribution so far! al... |
Beta Was this translation helpful? Give feedback.
-
This discussion has been automatically closed due to lack of community support. See our contributing guidelines for more details. |
Beta Was this translation helpful? Give feedback.
-
This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details. |
Beta Was this translation helpful? Give feedback.
-
Description
Users are struggling to adjust styling around the iframe component. I want to do whatever possible to make sure that this component doesn't introduce unwanted noise from issues into the project.
In terms of setting explicit heights / width, colours, paddings, etc across any arbitrary breakpoint
This comment should offer a neat tailwind built in solution for us. tailwindlabs/tailwindcss#8261 (comment)
i.e A user could do something like the following if they really want to adjust their widget with granularity:
classes: "[@media(min-width:768px)]:h-[500px]
Demonstrated here: https://codepen.io/ricehead/pen/XWOZdBZ
However for some reason this doesn't work in my testing, maybe something to do with our tailwind configuration.
Suggestion 1: Move "rounded w-full" within the overridable default, making it easier for users to override the default without adding the need for custom CSS and selecting
Suggestion 2a Add a containerClasses option within the Widget configuration to allow users to easily override the many default classes easily ("bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center service-block")
OR
Suggestion 2b: Add service-name-id's to the container elements and/or iframe elements to make them easily selectable within Custom CSS without having to resort to XPath solutions
Suggestion 3a: Look into why the arbitrary break point solution doesn't work for us?
OR
Suggestion 3b: Add more variants into the tailwind.config safelist to give a bit better customisability with heights, widths, paddings etc
(FYI I am not a fan of 3b but it is atleast an option to be aware of)
Let me know if you think there are any other potential easy optimisations / changes you think could be done to reduce noise in the project
Other
No response
Beta Was this translation helpful? Give feedback.
All reactions