want to have a toggle button with text inside the toggle

Want to have a toggle button with text inside the button.  Anyone done this?

Hi,Not done this in Outsystems but did alter layout once.


The layout is basically no more than css, have a look at this site. it includes code examples.

https://freefrontend.com/css-toggle-switches/

You can place a Label or Expression inside the toggle button, but you have to customize the CSS of the Expression to have it on top and to align it, with something like:

"

position: absolute;

z-index: 1;

"

Jason, had to try it out myself:

.toggle-button:after{

content: ''No!;

}
.toggle-button.toggle-button-checked:after{

content: 'Oh Yes!';

}

This will put text in your toggle button.

Stefano Valente wrote:

Jason, had to try it out myself:

.toggle-button:after{

content: ''No!;

}
.toggle-button.toggle-button-checked:after{

content: 'Oh Yes!';

}

This will put text in your toggle button.

Just tried it and it didn't.  Are you using their built in toggle button?


Achim Schneider wrote:

You can place a Label or Expression inside the toggle button, but you have to customize the CSS of the Expression to have it on top and to align it, with something like:

"

position: absolute;

z-index: 1;

"

Achim, ok this did work to superimpose the text, but the toggle switch is not resizing and the text is over the moving toggle.


Jason Herrington wrote:

Stefano Valente wrote:

Jason, had to try it out myself:

.toggle-button:after{

content: ''No!;

}
.toggle-button.toggle-button-checked:after{

content: 'Oh Yes!';

}

This will put text in your toggle button.

Just tried it and it didn't.  Are you using their built in toggle button?


Yes Jason, 

I used the standard toggle-button. Are you using OS11?


Jason,

if you want to put the same text on all of your ToggleButtons, you can modify your CSS with something like:


SyntaxEditor Code Snippet

.ToggleButton::before {
    content: 'Hello';
    position: absolute;
    left: 5px;
    top: 3px;
    font-weight: bold;
    font-size: 18px;
}
.ToggleButton {
    position: relative
}


If you just want to change some ToggleButtons or want to have different texts you can name them and then address them using CSS selectors to change them.