Okay
  Public Ticket #3007691
Form display bug
Closed

Comments

  •  1
    ZHUO SIKAI started the conversation

    Hi, I have customise the form and was able to show the correct time slots. However, the "time" text over flow out of the button. How can I rectify this or where can I change the CSS?

  •  1,851
    Miloš replied

    Hi, ZHUO SIKAI 

    Thanks for reaching out to us

    Can you please send me a link to this page, and I can isolate the issue for you?

    It is possible if you maybe activated Google translate and it is conflicting in some way, or it could be a conflict with something else, that is overriding Amelia's default CSS styles,

    but I don't wanna guess too much before investigating the page.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

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

    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

  •   ZHUO SIKAI replied privately
  •  1,851
    Miloš replied

    Hi, ZHUO SIKAI

    Sorry for taking so much time working on this.

    Seems I isolated the issue. I believe it is most probably the active WP theme or another active plugin that is adding a bit of custom CSS and overriding Amelia's. It is placing a fixed width of pixels to the span holding the time slot.

    Can you please add this custom CSS to all the pages that you have booking forms on, and let's see if it resolves it?

    .amelia-app-booking #amelia-booking-wrap #am-step-booking .am-select-date .am-appointment-times .el-radio-button .el-radio-button__inner, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-select-date .am-appointment-times .el-radio-button .el-radio-button__inner {
       
        width: 100%;
    }
    

    Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

    If you need help with adding custom CSS to the page, please take a look at this article.

    -

    On the page you sent, it is looking much better for me when I apply the CSS in the browser:

    7197865082.png

    Let me know how it goes.

    If after doing this, it is still the same on your end, we can take a look from your WP Admin dashboard.

    If you wish that, you can  provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. 

    We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties. 

    You can write credentials here just check PRIVATE Reply so nobody can see them except us.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

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

    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

  •  1
    ZHUO SIKAI replied

    Hi Milos, 

    Thank you so much. It works. However, I have added !important so the css code that you have given will override the theme's css. 

  •   Miloš replied privately