Skip to Content (Press Enter)
2022-11-12 11-28-30
Gonçalo Martins
Staff
508Views
14Comments
[Silk UI Web] [Silk UI Framework] - Change Balloon behavior
Question
Forge
silk-ui-web
Web icon
Silk UI Web (O11)
Forge asset by OutSystems
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 https://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

1
0
30 Oct 2015
Copy Link
UserImage.jpg
Nuno Taylor
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:

1
0
30 Oct 2015
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
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:

 
 
1
0
03 Nov 2015
Copy Link
UserImage.jpg
Nuno Taylor
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:

 
 
 
 
0
0
04 Nov 2015
Copy Link
2018-05-03 15-48-34
Samuel Jesus
Staff
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:

 
 
0
0
04 Nov 2015
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
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:

 
 
 
 
0
0
04 Nov 2015
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Hello everyboby,

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

Kind Regards,
GM
 
0
0
03 Nov 2015
Copy Link
2018-05-03 15-48-34
Samuel Jesus
Staff
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 https://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
 
 
 
0
0
04 Nov 2015
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
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 https://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
 
 
 
 
 
0
0
04 Nov 2015
Copy Link
2018-05-03 15-48-34
Samuel Jesus
Staff
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
0
0
04 Nov 2015
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
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
 
 
1
0
05 Nov 2015
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
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.
2
0
06 Nov 2015
Copy Link
2018-05-03 15-48-34
Samuel Jesus
Staff
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
0
0
15 Mar 2016
Copy Link
2018-04-19 14-41-27
Bruno Cavalcanti

Hello Samuel,

Some feedback for Gonçalo problem now?

Thanks!


Samuel Jesus wrote:

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


0
0
14 May 2018
Copy Link
2018-04-19 14-41-27
Bruno Cavalcanti

Gonçalo Martins 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 https://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


Hello Gonçalo Martins,


I have the same problem as you. What was your solution?

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