Design issue (Text overlap)

  • Resolved Ahtisham

    (@ahtisham11)


    5 years, 10 months ago

    Hi there,
    Whenever I complete a created tracking order from backend and tried to access it from the frontend the design shows me overlapped.

    Please have a look on this screenshot: https://nimb.ws/AyX8aL

    I’ve tried to resolve this case by applying CSS but it is not useful for me.
    Please let me know about this one.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Ahtisham

    (@ahtisham11)

    5 years, 9 months ago

    Looking for your response.

    Plugin Support jaysupport

    (@jaysupport)

    5 years, 9 months ago

    Hello Ahtisham,

    At first glance, that would appear to just be that you have one status set to 100% and another that is set to very close to 100% (e.g. 95%). And, since they’re so closed together, they overlap. You could either decrease the percentage of the other status or you can use CSS to hide the 100% status. If you want to do the latter, then can you please provide me a working order number, so I can see the results page and provide you with the CSS?

    • This reply was modified 5 years, 9 months ago by jaysupport.
    Thread Starter Ahtisham

    (@ahtisham11)

    5 years, 9 months ago

    Hi, Yeah sure.
    Here is the order number: e5000059
    And here is the link to the page: https://d42.gotomy.dev/fixmob/tracker/

    Also, I’ve checked the other case mentioned by you as well. But the completed status is 100% and the failed status is set to 0% but it is still overlapping the texts.
    Please check the screenshot of backend status setting here: https://nimb.ws/NGa3fj

    Thanks!

    • This reply was modified 5 years, 9 months ago by Ahtisham.
    Plugin Support jaysupport

    (@jaysupport)

    5 years, 9 months ago

    Something is not right in the way you have it configured. If you look at the following screenshot, you’ll see that “Failed” is set as the ending status… So the percentages are not set up correctly for at least one of your statuses.

    With that in mind:

    – Make sure you don’t have two statues with the same percentage.
    – Make sure you only write a number in for the percentage (i.e. don’t write in the percentage sign).

    • This reply was modified 5 years, 9 months ago by jaysupport.
    Thread Starter Ahtisham

    (@ahtisham11)

    5 years, 9 months ago

    Hi,
    Sorry for the delay. I haven’t configured according to my settings. The plugin is currently working with the default status settings.
    Please have a look on this screenshot: https://nimb.ws/ZeKIjy

    There are only 3 statues with the 0 percentage. I tried by changing each of them but it is still overlapping the design for me in the frontend.
    Please share your email address with me so I can able to share the backend credentials to you so you can check the backend status settings accordingly.

    Thanks.

    • This reply was modified 5 years, 9 months ago by Ahtisham.
    Plugin Support jaysupport

    (@jaysupport)

    5 years, 9 months ago

    Please do not offer your credentials or access to your admin. That is against WordPress guidelines and not something we can accept or do.

    Don’t have more than one status with the same percentage, especially not for 0 or 100.

    Try this: Remove all your statuses and create three new ones. One at 0, one at 50 and one at 100. Then set an order to the 50% status. What does that look like?

    Thread Starter Ahtisham

    (@ahtisham11)

    5 years, 9 months ago

    Hi,

    I’ve removed all the statuses from the backend and added 3 new statuses with the same percentage you mentioned.
    Check in this screenshot: https://nimb.ws/21qxPo

    After this, I create a new order with the 50% (Processing) order status and it looks like this: https://nimb.ws/oQUI5t

    But when I updated the status to 0% (Failed). The same overlapping case appears.
    You can check it here: https://nimb.ws/lYO7vo

    Please check this case.
    Thanks!

    Plugin Support jaysupport

    (@jaysupport)

    5 years, 9 months ago

    In that case, you’ll likely just need to add some CSS to force the ewd-otp-current-status selector to never be more than a certain amount left or right. For example:

    #ewd-otp-current-status {
margin-left: 150px;
margin-right: 150px;
}

    If that doesn’t work, you’ll need to set the order you provided to us (e5000059) to a status that causes the issue, so I can inspect the source code of the page and suggest alternative CSS.

    • This reply was modified 5 years, 9 months ago by jaysupport.
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Design issue (Text overlap)’ is closed to new replies.

Tags