es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo lograr que un `St.BoxLayout` tenga un ancho del 100% en un applet de Cinnamon (CJS / GJS)?

Cómo lograr que un `St.BoxLayout` tenga un ancho del 100% en un applet de Cinnamon (CJS / GJS)?

17 Jul, 2023 Programación

Estoy escribiendo mi primera applet de Cinnamon (después de haber logrado escribir un escritorio).

Tengo un St.BoxLayout insertado en un PopupMenu.PopupBaseMenuItem para colocarlo en un menú emergente.

Ahora quiero que su anchura sea del 100% del ancho del menú emergente, pero se ve así (es decir, el recuadro que contiene 1 + 2 = 3 en la captura de pantalla) y solo toma el ancho mínimo para contener el texto incorporado y crece cuando escribes en él:

screenshot Cinnamon calc applet

He intentado:

  • una clase de estilo expression-box y en CSS width: 100%
  • x_align: Clutter.ActorAlign.FILL,
  • x_expand: true

Pero simplemente no expande su anchura. ¿Qué más puedo intentar?

Debo admitir que todavía estoy buscando una documentación extensa de CJS / GJS, parece que navegar por las fuentes de otras applets es la mejor manera de descubrir qué está funcionando realmente …

Aquí está el código:

applet.js:

JS
this.widgets.expressionItem = new PopupMenu.PopupBaseMenuItem({reactive: false, focusOnHover: true});
this.menu.addMenuItem(this.widgets.expressionItem);
this.widgets.expressionBox = new St.BoxLayout({
style_class: "expression-box",
vertical: true,
x_align: Clutter.ActorAlign.FILL,
x_expand: true
})

stylesheet.css:

CSS
.expression-box {
background-color: lightslategray;
color: black;
border-radius: 4px;
width: 100%;
padding: 4px;
}

Puedes encontrar el código fuente completo en GitHub.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que el St.BoxLayout tenga un ancho del 100% de su elemento padre del menú, puedes intentar agregar la siguiente regla CSS a tu archivo stylesheet.css:

    .expression-box > StBin:first-child {
  width: 100%;
}

    Esto apunta al primer hijo del contenedor St.BoxLayout (que es un widget StBin) y establece su ancho como el 100% del contenedor. Esto debería hacer que el St.BoxLayout se expanda para llenar su padre del menú.

    Alternativamente, puedes intentar ajustar la propiedad min_width del St.BoxLayout para que sea igual al ancho del elemento padre del menú, de la siguiente manera:

    this.widgets.expressionBox = new St.BoxLayout({
  style_class: "expression-box",
  vertical: true,
  min_width: this.widgets.expressionItem.get_width()
});

    Esto establece el ancho mínimo del St.BoxLayout para que sea el mismo que el ancho de su PopupMenu.PopupBaseMenuItem padre, lo que debería hacer que se expanda para llenar el espacio disponible.

    ¡Espero que esto ayude! Para obtener más información sobre CJS y GJS, puedes consultar la documentación oficial en el sitio web de GNOME:

Comments are closed.