[Silk UI Framework] [Silk UI Framework] - Change Balloon behavior

[Silk UI Framework] [Silk UI Framework] - Change Balloon behavior

  
Forge Component
(45)
Published on 10 May by OutSystems Labs
45 votes
Published on 10 May by OutSystems Labs
Hello everyboby,

I would like to ask for some help to change de default behavior of the pattern Ballon.
When we click in an element with an associated Ballon, the default behavior of this pattern while opening in the desktop, is to take its position in the bottom of the related icon (like for example in this sampleapp http://labs.outsystems.net/sampleapp/).



However, when the Balloon don't have enough vertical space, the pattern moves to the top of the icon, has we can see:



How can I change this behavior only for the elements of the Header, forcing the Balloon to always be opened in the bottom of the icon that triggers that Balloon (the same for the Balloon Footer).
Hope to get some help and thank you all for your attention.

Kind Regards,
GM

Hi guys,

Is it also possible to hide (create a css rule for example) the line that separates the two placeholders in a BalloonFooter, when the footer has no content?
The line is the one that the arrow is pointing:

Hello Nuno,

In order to do that, you can add something like the following (I think that you have a ballon Pattern with a Post pattern enclosed in a link, for each row):

.Balloon a:last-child .PostConnect { border-bottom: 0; }
With the last-child attribute and the hierarchy set, this rule will be applied only to the last div of the chain.

Hope this helps.

Kind Regards,
GM

 
Nuno Taylor wrote:
Hi guys,

Is it also possible to hide (create a css rule for example) the line that separates the two placeholders in a BalloonFooter, when the footer has no content?
The line is the one that the arrow is pointing:

 
 
Hello everyboby,

Can anyone help me with this, please?
Hope to get some help and thank you all for your attention.

Kind Regards,
GM

 
Hi Gonçalo,

Thanks you a lot for your help and explanation.
It worked perfectly.



Gonçalo M. wrote:
Hello Nuno,

In order to do that, you can add something like the following (I think that you have a ballon Pattern with a Post pattern enclosed in a link, for each row):

.Balloon a:last-child .PostConnect { border-bottom: 0; }
With the last-child attribute and the hierarchy set, this rule will be applied only to the last div of the chain.

Hope this helps.

Kind Regards,
GM

 
Nuno Taylor wrote:
Hi guys,

Is it also possible to hide (create a css rule for example) the line that separates the two placeholders in a BalloonFooter, when the footer has no content?
The line is the one that the arrow is pointing:

 
 
 
 
Hello Nuno,

Thank you for the feedback.
The solution that Gonçalo suggested works fine. However, we are adding this issue to the SIlk UI Backlog so that it can be solved inside Silk.

Best Regards,
Samuel Jesus

Nuno Taylor wrote:
Hi guys,

Is it also possible to hide (create a css rule for example) the line that separates the two placeholders in a BalloonFooter, when the footer has no content?
The line is the one that the arrow is pointing:

 
 
Hello Samuel,

About my issue, can you guys help me?

Kind Regards,
GM

Samuel Jesus wrote:
Hello Nuno,

Thank you for the feedback.
The solution that Gonçalo suggested works fine. However, we are adding this issue to the SIlk UI Backlog so that it can be solved inside Silk.

Best Regards,
Samuel Jesus

Nuno Taylor wrote:
Hi guys,

Is it also possible to hide (create a css rule for example) the line that separates the two placeholders in a BalloonFooter, when the footer has no content?
The line is the one that the arrow is pointing:

 
 
 
 
Hello Gonçalo,

First of all sorry for  the late reply.
There is no easy way to solve this issue, because it is a behaviour from the Tooltispter script (external script used to build the balloons).

The Tooltispter script, has an API that you can use to force the Balloon to open in a specific direction. However, every time you use your scroll, it recalculates its position, and when there is not enough vertical space to show the balloon, it will then have the behaviour you reported.

The only way to do what you want is to actually create your own balloon, where you actually change the base code of the Tooltispter to prevent that scroll behaviour on a specific situation (for example, by using a new variable on the script).

Best Regards,
Samuel Jesus


Gonçalo M. wrote:
Hello everyboby,

I would like to ask for some help to change de default behavior of the pattern Ballon.
When we click in an element with an associated Ballon, the default behavior of this pattern while opening in the desktop, is to take its position in the bottom of the related icon (like for example in this sampleapp http://labs.outsystems.net/sampleapp/).



However, when the Balloon don't have enough vertical space, the pattern moves to the top of the icon, has we can see:



How can I change this behavior only for the elements of the Header, forcing the Balloon to always be opened in the bottom of the icon that triggers that Balloon (the same for the Balloon Footer).
Hope to get some help and thank you all for your attention.

Kind Regards,
GM
 
 
 
Hi Samuel,

Ok, I'll try to change the code.
I wanted to avoid this solution, since we'll loose the sequential upgrades to SilkUI.
But a urgent issue here at my client, is the on present in this post.

Kind Regards,
GM


Samuel Jesus wrote:
Hello Gonçalo,

First of all sorry for  the late reply.
There is no easy way to solve this issue, because it is a behaviour from the Tooltispter script (external script used to build the balloons).

The Tooltispter script, has an API that you can use to force the Balloon to open in a specific direction. However, every time you use your scroll, it recalculates its position, and when there is not enough vertical space to show the balloon, it will then have the behaviour you reported.

The only way to do what you want is to actually create your own balloon, where you actually change the base code of the Tooltispter to prevent that scroll behaviour on a specific situation (for example, by using a new variable on the script).

Best Regards,
Samuel Jesus


Gonçalo M. wrote:
Hello everyboby,

I would like to ask for some help to change de default behavior of the pattern Ballon.
When we click in an element with an associated Ballon, the default behavior of this pattern while opening in the desktop, is to take its position in the bottom of the related icon (like for example in this sampleapp http://labs.outsystems.net/sampleapp/).



However, when the Balloon don't have enough vertical space, the pattern moves to the top of the icon, has we can see:



How can I change this behavior only for the elements of the Header, forcing the Balloon to always be opened in the bottom of the icon that triggers that Balloon (the same for the Balloon Footer).
Hope to get some help and thank you all for your attention.

Kind Regards,
GM
 
 
 
 
 
Hell Gonçalo,

Actually, since my suggestion is to copy the pattern to your application, you won't loose the sequential update of Silk. You will only loose that if you change the Silk UI Framework eSpace.

Best Regards,
Samuel Jesus
Hello Samuel,

I know that, I was talking about the specific new component, since it will be outside of SilkUI.
Since you might know the plugin code much better than me, can you indicate the method that I should change to do what I need?
Thank you.

Kind Regards,
GM



Samuel Jesus wrote:
Hell Gonçalo,

Actually, since my suggestion is to copy the pattern to your application, you won't loose the sequential update of Silk. You will only loose that if you change the Silk UI Framework eSpace.

Best Regards,
Samuel Jesus
 
 
The SilkUI patterns web page shows the balloon above the item, while in fact, as established here (and is clear from the code) it is always displayed below. Why does the balloon not have a parameter for position, like the ToolTip? It'd be very easy to implement, and give the user (us) more control.
Hello Killian,

Sorry for the really late reply, but somehow your post evaded our radars.
We will add your feedback to our backlog so that it can be analyzed.

Cheers,
Samuel Jesus