Okay
  Public Ticket #3813337
Displaying services in the Step-by-Step Booking Form 2.0
Closed

Comments

  • Francis started the conversation

    Hello,

    I created the soluce-bien-etre.fr website for my client Mrs. Luce-Anne Berger. I integrated the Amelia Start extension. After setting up the employee, services and schedules, I created the Step-by-Step Booking Form 2.0 form. In the frontend, on the form, I notice that the display of the services, when it is a little long, is truncated (see screenshot 1). In the css code on the "am-adv-select__item-label" selector, there is the following property: white-space: nowrap; By changing the value of white-space to normal (white-space: normal;), the content of these fields is displayed in full on two lines. (see screenshot 2). There is the same problem with the ameliacatalogbooking widget. Is there a particular reason for this?

    Best regards

    P.S : I'm reposting this ticket because I forgot the attachments. Sorry...

    Attached files:  screenshot-1.jpg
      screenshot-2.jpg

  •  1,655
    Marko replied

     

    Hello there,

    Thank you for reaching out to us.

    The reason names are shortened and displayed with "..." is to maintain a clean and structured layout. In some cases, user names can be excessively long, which could negatively impact the form's appearance, even if multiple lines were used.

    If you'd like a different display, you may consider using the catalog view, or you can try adjusting the layout via CSS, step by step, to expand the space allocated for names. However, please note that the current default view is designed to ensure optimal readability and design consistency.

    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 color 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 Amelia's Customize interface, 

    please feel free to search through our feature suggestion page

     to see if someone may have 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.

    This should help. 

    Should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.

    We wish you all the best and hope you have a wonderful day ahead.  

    Kind Regards, 

    Marko Davidovic [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, floor plans, choropleth maps, and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

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

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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

  • Francis replied

    Hello,
    I had found your explanation on how to expand the container and the fields, but on mobiles it does not work...
    It seems more logical to me that the information contained in these fields is visible correctly because a visitor who wants to make a choice in the drop-down lists must be able to see them in full otherwise he cannot make his choice.
    Personally I will keep the configuration that I found...
    Best regards

    Attached files:  mobile.jpg

  •  1,655
    Marko replied

    Hello again,

    Of course you can use whatever works for you best.

    Should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.

    We wish you all the best and hope you have a wonderful day ahead.  

    Kind Regards, 

    Marko Davidovic [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, floor plans, choropleth maps, and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

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

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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