Ancho de ajuste para el botón Dojo

Nota: Está relacionado con this question.Ancho de ajuste para el botón Dojo

estoy tratando de crear un botón de programación dojo así:

var btnOK = new dijit.form.Button({ 
    label: "OK", 
    showLabel: true, 
    style: "height: 20px; width: 50px;" 
});

Ahora a pesar de que especificar el ancho, mientras se muestra el ancho botón está ajustado al mínimo (es decir, texto + margen). La razón explicada en el answer es que dojo anula el estilo CSS para el botón (class="dijitButtonNode"). Además (en la misma respuesta), el ancho se establece anulando los estilos para la misma clase.

¿Es posible hacer lo mismo (es decir, establecer el ancho) sin esta solución alternativa de CSS?

Fuente

2011-07-21 Gaurav

Finalmente, lo resolví. Para establecer el ancho tenemos que establecer el ancho utilizando dojo.style función

dojo.create("button",{id: "btnOK",type: "button"},dojo.body()); 

    var btnOK = new dijit.form.Button({ 
       label: "OK", 
       showLabel: true, 
       style: "height: 20px;" 
       }, 
       "btnOK"); 

    dojo.style("btnOK","width","40px");

Fuente

2011-07-21 05:41:31 Gaurav

Puedes aceptar tu propia respuesta cuando resuelves las cosas por tu cuenta: te ayuda a salir de la fila no resuelta. – hugomg

@missingno gracias por recordar que se me olvidó eso :-) – Gaurav

a mí me funcionó:

domStyle.set(btnOk.domNode, "width", "100px"); 
    domStyle.set(btnOk.domNode.firstChild, "display", "block");

Fuente

2012-07-11 18:01:18 Mikhail

Puede mejorar su respuesta proporcionando algún contexto: ¿por qué funciona esto? ¿Hay un documento de referencia? – Dhara

¡Magnífico! Gracias. – OammieR

códigos anteriores, pero ¿cómo establecer la altura? domstyle.set (btnOk.domNode, "height", "30px") no funcionó –

Otra posible solución es agregar una clase al botón:

<input type="button" data-dojo-props="label : 'Test'" class="normalButton" id="test" data-dojo-type="dijit/form/Button" />

En su CSS:

.normalButton span{ 
    width: 100px; 
}

Extra: si agrega esta clase, su alineación del texto se arruinará. Esto se puede resolver mediante la adición siguientes reglas CSS:

.{your theme: eg. tundra} .dijitButtonText{ 
    padding: 0; 
}

Por último, echa un vistazo a my fiddle.

Fuente

2014-12-11 09:08:25 GuyT

botón de ancho total: https://jsfiddle.net/51jzyam7/

HTML:

<body class="claro"> 
    <button id="myButtonNode" type="button"></button> 
</body>

JS:

require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], 
    function(Button, dom){ 
    var myButton = new Button({ 
    label: "My big button", 
    class: 'myCSSClass', 
}, "myButtonNode").startup(); 
});

CSS:

.dijitButton.myCSSClass{ 
    display: block; 
} 
.dijitButton.myCSSClass .dijitButtonNode{ 
    width:100%; 
}

Fuente

2017-02-26 15:59:42 kxxxxoo

Ancho de ajuste para el botón Dojo

Respuesta

Cuestiones relacionadas