Calendar label and button width on mobile

  • kaposvaruniversity
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 28
  • Thank you received: 0

kaposvaruniversity created the topic: Calendar label and button width on mobile

Hi!

Please help me how can I set the width of the calender label and button to get beautiful 100% width on mobile. Now on desktop is ok, on tablet is ok, but not seen the date label... and I attached how seen on mobile device.

Thanks
#235546
Attachments:
  • Posts: 2360
  • Karma: 85
  • Thank you received: 316

mihaela replied the topic: Calendar label and button width on mobile

Hello,

Can you please send me a link to your form so I can take a look at the CSS from the first hand?

Also, have you checked the "Mobile Forms" or "Force Mobile Forms" checkbox in the form's Advanced properties?

Regards,

Mihaela
#235548
  • kaposvaruniversity
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 28
  • Thank you received: 0

kaposvaruniversity replied the topic: Calendar label and button width on mobile

Hi Mihaela!

I tried with mobile forms and force also, but the same. I tried to set it, so maybe my changes cause that not work these functions? The link is: koltozz.nadasdavid.hu/

Thanks
#235550
  • Posts: 2360
  • Karma: 85
  • Thank you received: 316

mihaela replied the topic: Calendar label and button width on mobile

Hello again,

I took a look at your form on mobile and this is how your form looked like.


The calendar element was stretched through the whole page.

Either way, to make sure it looks like this on all mobile devices you can try to add some CSS code to your form. Do that as follows.

Go to form's Advanced properties > More options > Form pieces and in the Before Form section set Type to Custom.
In the code area below put the following code:
echo '<style>
@media (max-width: 480px) {
#ff_elem589_calendarButton {
    width: 100% !important;
    }
}
</style>';

Let me know whether this resolves the issue.

Regards,

Mihaela
#235567
Attachments:
  • kaposvaruniversity
  • Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 28
  • Thank you received: 0

kaposvaruniversity replied the topic: Calendar label and button width on mobile

Unfortunately it's not solve the problem. Now in mobile the button is go under the date label, and if I rotate mobile to wide browser, it's still near the label and not 100% width :(
#235571
  • Posts: 2360
  • Karma: 85
  • Thank you received: 316

mihaela replied the topic: Calendar label and button width on mobile

Hello again,

Ok, I understand, because the width of the button is now too big.

Back to your previous post "I tried with mobile forms and force also, but the same. I tried to set it, so maybe my changes cause that not work these functions?"

What exactly did you mean that didn't work?

Regards,

Mihaela
#235602
Moderators: ForumSupporttomeperica
Time to create page: 0.185 seconds

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans & templates!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here