Customize positioning of the boolean slider widget

0
One of our primary pages in a mobile view displays groups of information about products we offer and products our customers own.  I am using the slider to display a set of items if true and a set if false.  The default position of the slider is to the left of the true/false response statements configured in the properties in modeler.  I would like to move the slider to the right side of the page but have had a difficult time trying to figure out how to accomplish this by modifying the scss files.  Can anyone offer guidance and preferably some steps to accomplish this?  I have tried floating it right but then that throws the text off the page.  Here is an edited version of what I mean.  
asked
3 answers
0

Is it an option to seperate the text from the boolean slider with a layoutgrid or table?

answered
0

That is one option that I tried but the boolean slider requires some text to be in the True and False fields.  I could look into adding a single character and styling that character to where it is not visible but is just a workaround.  I know it's possible to move it and I'm sure it is not easy but I would like to learn.  

answered
0

Adding float:right to the parent div works on my machine without throwing of the text.

Edited this in the inspector-F12 in Chrome:

<div class="wgt-BooleanSlider mx-name-booleanSlider1" id="BooleanSlider_widget_BooleanSlider_2" data-mendix-id="0_10" focusindex="0" widgetid="BooleanSlider_widget_BooleanSlider_2" style="float: right; display: block;">
    <div class="wgt-BooleanSlider_control form-control btn btn-primary" data-dojo-attach-point="controlNode">
        <input type="checkbox" class="wgt-BooleanSlider__input" data-dojo-attach-point="inputNode" checked="">
        <div class="wgt-BooleanSlider__toggle">
            <span class="wgt-BooleanSlider__toggletrue" data-dojo-attach-point="trueNode">Yes</span>
            <span class="wgt-BooleanSlider__togglefalse" data-dojo-attach-point="falseNode">No</span>
        </div>
    </div>
</div>

 

Does that perhaps work for you as well?

answered