Toggle – The preview(style) is different

  • Resolved edisooon

    (@edisooon)


    4 months, 3 weeks ago

    Hi,

    Thanks a lot for this useful, nice plugin.

    I just want to report that the toggle in the tab style > default is not what we get.

    The default: (toggle-hint-text)

    The result: (text-hint-toggle)

    How to get the same result as the preview, please?

    I tried to correct that by some custom CSS using align-self for the div that contains the toggle only but that doesn’t work.

    What works relatively is to apply(flex-direction: row-reverse) to the div that contains all the elements (toggle, text and hint). That resolves the problem but creates another one. That aligns everything in the right(easy to resolve) but the hint is now in the middle. It supposed to be in end(toggle-text-hint).

    Thanks again.

    Have a nice day

    • This topic was modified 4 months, 3 weeks ago by edisooon.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support mgordonStylemixThemes

    (@mgordon7)

    Hello,

    Thank you for reaching out!

    Try to use the custom CSS below (insert my shared CSS at the very top section under the appearance > customize > CSS section);

    body .calc-toggle-item {
    display: flex;
    flex-direction: row-reverse; /* Reverses the order / justify-content: flex-end; / Aligns everything to the right */
    }

    body .calc-toggle-item .calc-toggle-postfix {
    margin-right: 5px;
    }

    Cheers

    Thread Starter edisooon

    (@edisooon)

    Thanks a lot for your reply and reactivity.

    Your code gives the same result as mine: (toggle-hint-text), all centered to the right.

    Is it possible to get the hint at the end(toggle-text-hint) as shown in the style tab default preview(what it is supposed to be).

    I want the hint to be at the end because the popup risques to be partially truncated if it is not far enough from the edge, especially on mobile.

    Screenshot: https://freeimage.host/i/dqF3m5F

    Thanks again

    Have a nice day

    Thread Starter edisooon

    (@edisooon)

    I found a solution. in case someone needs it too.

    Just put this CSS code in WordPress > appearance > customize > additional CSS:

    .calc-toggle-wrapper { order: -1;
    margin-right: 5px !important;
    margin-left: 0 !important;
    }

    Thanks again,

    Have a nice day

    Plugin Support mgordonStylemixThemes

    (@mgordon7)

    That is great to hear!

    Let us know if you will have additional questions, we will be glad to assist

    Best regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Tags