Hey there, Awesome Customers!

Just a heads up: We'll be taking a breather to celebrate International Workers' Day (May 1st and 2nd - Wednesday and Thursday) and Orthodox Easter from Good Friday (May 3rd) through Easter Monday (May 6th). So, from May 1st to May 6th, our team will be off enjoying some well-deserved downtime.

During this time, our customer support will be running on a smaller crew, but don't worry! We'll still be around to help with any urgent matters, though it might take us a bit longer than usual to get back to you.

We'll be back in action at full throttle on May 7th (Tuesday), ready to tackle your questions and requests with gusto!

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find loads of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel). These gems might just have the answers you're looking for while we're kicking back.

Thanks a bunch for your understanding and support!

Catch you on the flip side!

Warm regards,

TMS

Okay
  Public Ticket #3623595
Customize dimension of step by step booking form
Closed

Comments

  •  1
    Adam Hubálovský started the conversation

    Hello, 

    is there any possibility to customize dimensions of step-by-step booking form? Names of my services are longer, and so are hidden by dots in booking window.

    2318090772.png

    I can't shorten the names so I need to widen the booking form.  

    Thank you for your help! 

    Adam 

  •  1,313
    Marko replied

    Hello there,

    Our support does not fully provide customization solutions, but we can try to provide some basic CSS in situations like this.

    For manipulating the width of the "outer Booking container", you can try this CSS:

    .amelia-v2-booking #amelia-container.am-fs__wrapper {
        max-width: 1200px !important;
        width: 100%;
        height: 560px;
        margin: 99px auto;
        border-radius: 8px;
        box-shadow: 0 30px 40px #0000001f;
    }

    For example, on our Demo page, if i add that CSS, the outer container expands like this :

    3146601994.png

    Just the background colour we set is transparent, so it is not very visible on our page,

     but that width can be changed like that.

    -

    Now, if you also wish to manipulate this "inner Booking container width", you can use this CSS selector :

    .amelia-v2-booking #amelia-container .am-fs__main {
        
        max-width: 1200px;
        width: 100%;
    }

    If i add that to our Demo, here is the result :

    5856364923.png

    As you see, we have successfully changed the width this way.

    The main property to edit is "max-width" with a fixed pixel value.

    Let us know if that works for you.smile.png

    -

    If you wish to see a built-in solution for users to choose the Booking Form width from the Amelia's Customize interface, 

    please feel free to search through our feature suggestion page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like, where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    Thank you

    Kind Regards, 

    Marko Davidovic
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables