How to implement Silk UI Baloon widget ?

How to implement Silk UI Baloon widget ?

  

Hi,

I have requirement as shown in below link 

https://silkui.outsystems.com/Patterns_Web.aspx#Web_Content_Balloon

But not able to implement it . Do you have any OML file or any online example ?

Thanks & Regards

DM SIngh

Hi DM,

You can download the SilkUIDemo application into your server, you will get some examples there.

In Common >> LoginInfo webblock, you will find the example for Balloon.

Let me know if you face any issues.

Shashank...

Hi DM,

I've attached an example OML.

While trying to make the example espace for you, I may have figured out a possible issue that you may be running into.

If your espace you are trying to use the balloon widget in, isn't based off a silk theme, the balloon's default tooltipster styles will cause it to appear as if the balloon isn't functioning because the styles will never show the div's.

If you add silks default styles for the balloon, it will work as expected:

/* Balloon **************************/
@-webkit-keyframes balloon {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -5px, 0);
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@-ms-keyframes balloon {
    0% {
        opacity: 0;
        -ms-transform: translate3d(0, -5px, 0);
    }
    50% {
        opacity: .8;
    }
    100% {
        opacity: 1;
        -ms-transform: translate3d(0, 0, 0);
    }
}

@keyframes balloon {
    0% {
        filter: alpha(opacity=0);
        opacity: 0;
        transform: translade3d(0, -5px, 0);
    }
    50% {
        filter: alpha(opacity=80);
        opacity: .8;
    }
    100% {
        filter: alpha(opacity=100);
        opacity: 1;
        transform: translade3d(0, 0, 0);
    }
}

.Balloon {
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 14px;
    line-height: 20px;   
}


.Balloon_content {
    padding: 8px 10px;      
}

.Balloon_footer {
    border-top: 1px solid #ccc;
    padding: 10px;    
}

.Balloon__heading.Heading3 {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}


.js_open.Balloon {
    -webkit-animation: balloon .2s ease-in;
            animation: balloon .2s ease-in;
    display: block;
    filter: alpha(opacity=100);
    opacity: 1;
    z-index: 15;
}

Let me know if you have any issues,

Justin

Hey DM,

please, check if you are looking for this .https://tinyurl.com/y789ak5k

It's easy to be done, I am attaching OML for the same.



Regards,

Pankaj