Badge and UI

[claudioalfonso]

Hi,

I'm using Badge plugin to decorate a dinamically created set of buttons.
They look very nice, however when I scroll the page or collapse the container where buttons are, badge text stays in its place and remain visible.

What I'm doing wrong?


Before colapse:


After colapse:



Here is my code:

private Ext.Net.Button CrearBoton(string id, string texto, object icon, bool habilitado, bool standout, string comando, string idsender, int badge=0, string idGrupoParent = "")
        {
            Ext.Net.Button boton = new Ext.Net.Button(texto)
                {
                    ID = id,
                    Disabled = !habilitado,
                    StandOut = standout
                };

            if (badge > 0)
                boton.Plugins.Add(new Badge() { Text = badge.ToString() });

            if (icon != null)
                if (icon is Ext.Net.Icon)
                    boton.Icon = (Ext.Net.Icon)icon;

            // Agregar el evento de comando
            if (comando != "")
                boton.Listeners.Click.Handler = "App.direct.Comando('" + comando + "', '" + idsender + "', '" + id + "', '" + idGrupoParent + "');";

            return boton;
        }

[Daniil]

Hi @claudioalfonso,

Welcome to the Ext.NET forums!

Please start a new forum thread for your question, with a full (but simplified as much as you can) test case to reproduce the problem.

If you think the threads are related, please feel free to cross-link between the both.

[geoffrey.mcgill]

I've moved this question to a new thread.

[brunweb]

Hi !
I think yuo should just add RenderToBody = false; : it is explainedd here :

If Badge's component is located inside hidden area (or will be located) then it is required to set RenderToBody="false" for Badge because Badge doesn't track visibility of parent elements

https://examples2.ext.net/#/MessageB...den_Container/

so maybe you should just try:

...
            if (badge > 0)
                boton.Plugins.Add(new Badge() { Text = badge.ToString() , RenderToBody=False});
...

I did not try, but i had this problem myself and if i remember ok, this is the way i fixed it !
Have a nice day

[claudioalfonso]

Hi!,

Thanks for your reply.

I've tested your suggestion, it seems to work very nice, badge moves with its container, also it hides when panel hides.
However, badge appears to be cuted off, inside button.




Observation: this button is inside a toolbar. So maybe the badge is cutted of because of the toolbar height...

Hi !
I think yuo should just add RenderToBody = false; : it is explainedd here :

https://examples2.ext.net/#/MessageB...den_Container/

so maybe you should just try:

...
            if (badge > 0)
                boton.Plugins.Add(new Badge() { Text = badge.ToString() , RenderToBody=False});
...

I did not try, but i had this problem myself and if i remember ok, this is the way i fixed it !
Have a nice day

[Daniil]

Please try to add this for the Badge.

<CustomConfig>
    <ext:ConfigItem Name="getRenderTo" Value="function() { return this.targetEl.parent().parent(); }" Mode="Raw" />
</CustomConfig>

If it doesn't help, please provide a test case.