N
Nuxt•2w ago
Prem

How to set ` USlideover` component width?

Hi everyone! I’m working with the USlideover component and trying to adjust its width on smaller screens. Specifically, I want the slider to take about 85% of the screen width on mobile devices. Here’s what I’ve tried so far: • Setting :ui="{ width: 'max-w-xs' }" worked for mobile but made the slider too small on larger screens. • I also tried :ui="{ width: 'sm:max-w-xs' }", but it didn’t seem to work as expected.
No description
3 Replies
kapa.ai
kapa.ai•2w ago
Hi @Prem. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To adjust the width of the USlideover component, including making it responsive for different screen sizes, you can use the ui prop to customize its appearance. Based on the information from the Slideover documentation, here's how you can achieve what you're looking for: 1. The default width of the USlideover component is set to w-screen max-w-md in the configuration. 2. To make it 85% wide on mobile devices and adjust for larger screens, you can use Tailwind CSS classes with responsive prefixes. Here's an example of how you can set the ui prop: 
<USlideover
  :ui="{
    width: 'w-[85%] sm:w-full sm:max-w-md'
  }"
>
  <!-- Your slideover content -->
</USlideover>
<USlideover
  :ui="{
    width: 'w-[85%] sm:w-full sm:max-w-md'
  }"
>
  <!-- Your slideover content -->
</USlideover>
This configuration does the following: - w-[85%]: Sets the width to 85% of the screen on mobile devices. - sm:w-full: From the 'sm' breakpoint and up, sets the width to 100% of its container. - sm:max-w-md: From the 'sm' breakpoint and up, sets a maximum width of md (which is typically 28rem or 448px in Tailwind). This approach should make the slideover 85% wide on mobile devices and then adjust to a more suitable width on larger screens. Remember that you can further customize this based on your specific needs. For example, if you want different widths for different breakpoints, you can add more responsive classes: 
<USlideover
  :ui="{
    width: 'w-[85%] sm:w-full sm:max-w-md lg:max-w-lg xl:max-w-xl'
  }"
>
  <!-- Your slideover content -->
</USlideover>
<USlideover
  :ui="{
    width: 'w-[85%] sm:w-full sm:max-w-md lg:max-w-lg xl:max-w-xl'
  }"
>
  <!-- Your slideover content -->
</USlideover>
This will progressively increase the maximum width as the screen size increases. If you need more control or have more complex requirements, you might want to consider using dynamic classes or computed properties to set the ui prop based on your application's state or viewport size. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@659974026617421844> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Prem
PremOP•2w ago
That did'nt work.

Did you find this page helpful?