Skip to Content (Press Enter)
2017-08-09 12-12-29
Jason Herrington
554Views
7Comments
want to have a toggle button with text inside the toggle
Question

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

0
0
05 Sep 2019
Copy Link
2020-09-01 10-42-42
Stefano Valente
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/

0
0
05 Sep 2019
Copy Link
2019-09-10 07-48-48
Achim Schneider

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;

"

Screenshot50.png
0
0
05 Sep 2019
Copy Link
2017-08-09 12-12-29
Jason Herrington

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.


0
0
05 Sep 2019
Copy Link
2020-09-01 10-42-42
Stefano Valente

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.

0
0
05 Sep 2019
Copy Link
2017-08-09 12-12-29
Jason Herrington

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?


0
0
05 Sep 2019
Copy Link
2020-09-01 10-42-42
Stefano Valente

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?


0
0
05 Sep 2019
Copy Link
2019-09-10 07-48-48
Achim Schneider

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.

0
0
10 Sep 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.