Skip to Content (Press Enter)
UserImage.jpg
Bruno Nabiça
111Views
3Comments
Editable Tables - Icon Title
Question
CSS
OutSystems Widgets
In an Editable Table, we can't get see the icons for saving, cancelling and deleting actions in the service studio, only on browser. Is there a way to use the css property "title" when putting the mouse over those three icons?

Thanks
0
0
04 Mar 2016
Copy Link
2023-12-12 08-53-15
Cristiano Marques
 
MVP
Hello Bruno,

There are probably more ways of doing what you need, but I can try to help you with one of my own.

The code wasn't exactly the one I have below but It was something like that. The porpuse of this is to load after the original click is made and you can customize it the way you want.

Make a WB with the following script inside, you can plaice it inside a onDocumentReady function if you prefer. Make 3 text parameters to change the title to whatever you feel like : ) For now I'll leave placeholders but I think you will get it.

$('.EditableTable tr').click(function(e){
addTitles();
});
 
function addTitles(){
setTimeout(function(){ 
$('.RowControlGroup .SaveRowAction').attr('title','Save');
$('.RowControlGroup .CancelRowAction').attr('title','Cancel');
$('.RowControlGroup .DeleteRowAction').attr('title','Delete');
}, 200);
}

I have the set timeout to assure that it runs after the original script, so that the icons are created first.

Anything let me know : )
Cristiano
0
0
07 Mar 2016
Copy Link
UserImage.jpg
Nina Li

Cristiano Marques wrote:

Hello Bruno,

There are probably more ways of doing what you need, but I can try to help you with one of my own.

The code wasn't exactly the one I have below but It was something like that. The porpuse of this is to load after the original click is made and you can customize it the way you want.

Make a WB with the following script inside, you can plaice it inside a onDocumentReady function if you prefer. Make 3 text parameters to change the title to whatever you feel like : ) For now I'll leave placeholders but I think you will get it.

$('.EditableTable tr').click(function(e){
addTitles();
});
 
function addTitles(){
setTimeout(function(){ 
$('.RowControlGroup .SaveRowAction').attr('title','Save');
$('.RowControlGroup .CancelRowAction').attr('title','Cancel');
$('.RowControlGroup .DeleteRowAction').attr('title','Delete');
}, 200);
}

I have the set timeout to assure that it runs after the original script, so that the icons are created first.

Anything let me know : )
Cristiano


Hi Cristiano Marques,

I tried what you suggested but it didn't work. Can I ask where to put the js webblock?

Thanks.


Nina


0
0
05 Mar 2018
Copy Link
2020-10-02 21-47-41
Samuel Nunes Marques

Hi Bruno,

My solution for this was with css only.

.SaveRowAction:hover:after{
    content: "Gravar";
    background: #4c4c4c;
    background: rgba(0,0,0,.7);
    bottom: 26px;
    color: #fff;
    left: 20%;
    padding: 5px 10px;
    position: absolute;
    z-index: 98;
    width: 50px;
}

You can do this also with Js if you need to use multi-language.

Samuel

0
0
05 Mar 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.