[Appointments+] Layout of two month Appointment booking

Hi

When I try to change my appointment booking product to show a 2 month layout the "Free / Busy / Not Possible" and "Next Month" buttons are in between the two months. I believe it would be better if those buttons were below both calendars.

The trouble is even though I can fix it with css to move to the bottom I still want it above the "Please check the appointment details below and confirm" box but my css just puts it right to the bottom of the page so that bit looks odd when a user is confirming the appointment.

It feels like a bug to me do others have this issue? I want it to still work on mobile devices too!

  • Adam Czajczyk
    • Support Gorilla

    Hello Kieran

    I hope you’re well today!

    I checked your site (the product that you show on screenshots) and that actually doesn’t even require CSS. The key here is the order of shortcodes on the page. Currently there are:

    [app_monthly_schedule]

    [app_pagination month=”1″]

    [app_monthly_schedule add=”1″]

    shortcodes so as you can see the pagination one is “in between” calendars. If you put it like this

    [app_monthly_schedule]

    [app_monthly_schedule add=”1″]

    [app_pagination month=”1″]

    and remove your CSS that should move the pagination (next/prev month) and legend (free/busy/not possible) right below the two calendars and it should stay there above the booking form (once booking slot is selected).

    Give it a try, please, and let me know if it worked for you.

    Best regards,

    Adam

  • Kieran
    • The Crimson Coder

    Hi Adam

    Got excited then but I wish it was that simple. Order Changed and CSS removed and it looks horific now. Screenshot attached. Looks worse when I click on appointment and pick a time.

    Had to add CSS back in to get it to function. Site is open if you want to try a few things

    Regards

    Kieran

  • Kieran
    • The Crimson Coder

    Hi Adam

    I think I might have fixed it. My product page shortcode was wrapped in tables but if I just use the short codes (reove the table code) it seems to work ok. I’ll do a bit more testing before I close the thread

    Regards

    Kieran

  • Kieran
    • The Crimson Coder

    Hi Adam

    I think its working ok if I remove the table. Is there a way to make the service provider drop down menu to be far less wide?

    I’d like the service provider description to take the full width but not the drop down box.

    Screen shot attached. Other than that its working now so thanks for the pointers!

    Regards

    Kieran

  • Adam Czajczyk
    • Support Gorilla

    Hi Kieran

    Yes, the width can be changed with just a simple CSS :slight_smile:

    .app_workers_dropdown_select select {
    width:50%;
    max-width:500px;
    }

    Please note:

    1. you might want to adjust the 50% value so it better suited your layout; you might also want to replace it in value in px instead

    2. you might keep or remove that “max-width” line – it’s there simply to put a “limit” on a possible max width; but it’s purely optional.

    To apply it to the site you can add it e.g. via “Appearance -> Customize -> Additional CSS” option in back-end or via some “custom css” option of your current theme (if there is such an option).

    I hope that helps :slight_smile:

    Best regards,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.