Feature Request: Enhanced Responsive Modal Widths #12367
Replies: 3 comments 13 replies
-
@zepfietje It would also be great to hear your opinion on this considering that you are the lead UI designer of Filament and a UI master. |
Beta Was this translation helpful? Give feedback.
-
@andrewdwallo, could you provide some use cases where custom modal width is required for different breakpoints? I'm not sure if this is a thing common enough to maintain the added complexity in the framework. E.g. are you only using this to make the modal full-screen on mobile? |
Beta Was this translation helpful? Give feedback.
-
Is there any update on this? Is it still something that could be planned for maybe v4? |
Beta Was this translation helpful? Give feedback.
-
Summary
Introduce a new method,
responsiveModalWidth()
, to Filament to complement the existingmodalWidth()
by providing responsive behavior for modals based on TailwindCSS breakpoints. This method allows developers to specify an alternative width for smaller screens.Feature Description
The
responsiveModalWidth()
method would allow for dynamic adjustment of modal widths based on device screen size:Example Usage
Example Result
DynamicModalWidthForMobile.mp4
Benefits
Improved User Experience on Mobile Devices
By enabling a specific modal width for smaller screens, such as full-screen modals on mobile devices, the
responsiveModalWidth()
method enhances user experience by making better use of limited space. This adaptation is crucial for maintaining usability and accessibility, as users on mobile devices can interact with modal content more comfortably without feeling cramped.Consistency in Responsive Design
The method supports the best practices in responsive design by allowing modals to adapt based on predefined breakpoints of TailwindCSS. This consistency ensures that all users, regardless of their device type, encounter modals that are appropriately sized for their screens, which enhances the overall user interface.
Simplifying Development
This approach simplifies the development process by reducing the complexity typically involved in manually managing different modal sizes for various screen sizes. Developers can set a universal modal size with an exception for smaller screens in a concise, manageable way, which streamlines both development and maintenance.
Summary of Benefits
This method significantly enhances the capability of Filament modals to respond to different screen sizes, providing a powerful tool for developers to create adaptive and user-friendly interfaces. This functionality not only meets the needs of a diverse user base but also aligns with modern web development practices, emphasizing flexibility, consistency, and scalability.
My Current Approach
Because I am currently limited to only being able to specify the modal width using the
modalWidth()
method, I utilize the following to be able to achieve something similar to the video example I showed above.Component Class
Blade view
This could be an issue when using something such as Filament Resources though. @danharrin I would be interested in your input if this is something you could see being beneficial for developers. I was going to try and make the PR myself but thought it would be best to discuss if it was suitable for Filament beforehand to avoid wasting any time. If it is deemed suitable I would also like to discuss different approaches towards implementing this feature and whatever would be best for Filament.
I would also like to hear anyone else's thoughts on this.
Beta Was this translation helpful? Give feedback.
All reactions