Setting direction of text in SlideOut add on widget

1
Good Day all!  I am currently trying to change the direction of the text on the SlideOut AddIn widget so it matches our Feedback widget text direction. It currently goes Top to bottom on the side of the page, we are trying to find out how to set it to go Bottom to Top. (see screenshot below) Any assitance would be greatly appreciated!
asked
3 answers
0

Jelte, that CSS is a good starting point, but it actually causes the widget to not display.  I ended up using following:

.slideout-control {
    -webkit-transform-origin: 100% 50%;
        -moz-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            -o-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: rotate(-90deg) translate(0%, -50%);
        -moz-transform: rotate(-90deg) translate(0%, -50%);
        -ms-transform: rotate(-90deg) translate(0%, -50%);
            -o-transform: rotate(-90deg) translate(0%, -50%);
            transform: rotate(-90deg) translate(0%, -50%);
}

 

answered
1

You'll probably have to add some css to your custom.css in your theme folder (or the sass if you are doing other styling). Add this:

.slideout-control {
    -webkit-transform-origin: 100% 50%;
       -moz-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
         -o-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: rotate(-90deg) translate(50%, 50%);
       -moz-transform: rotate(-90deg) translate(50%, 50%);
        -ms-transform: rotate(-90deg) translate(50%, 50%);
         -o-transform: rotate(-90deg) translate(50%, 50%);
            transform: rotate(-90deg) translate(50%, 50%);
}

I've copied and edited it from here: https://github.com/appronto/-Slide-In-Slide-Out-widget/blob/master/src/SlideOut/widget/ui/SlideOutContext.css

(Assuming it is this widget)

answered
1

Hello Eric,

kindly use the below code inside the custom.css file in order to reflect the text to bottom->top readable, and please change the number of "right" as you see fit.


 .slideout-control {
-webkit-transform: rotate(-180deg) translate(50%, 50%);
transform: rotate(-180deg) translate(50%, 50%);
right: -20px;
}

answered