Ustawienie szerokości dla przycisku Dojo

Uwaga: Jest to powiązane z this question.Ustawienie szerokości dla przycisku Dojo

Próbuję utworzyć przycisk dojo programowo tak:

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

Teraz chociaż określić szerokość, podczas wyświetlania przycisk szerokość jest ustawiony na minimum (czyli tekstu + marża). Powodem opisanym w answer jest to, że dojo zastępuje styl css dla przycisku (class="dijitButtonNode"). Dalej (w tej samej odpowiedzi) szerokość jest ustalana przez nadpisywanie stylów dla tej samej klasy.

Czy można to zrobić (tj. Ustawić szerokość) bez obejścia tego kodu CSS?

Źródło

2011-07-21 Gaurav

W końcu to rozwiązałem. Aby ustawić szerokość musimy ustawić szerokość użyciu dojo.style funkcję

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");

Źródło

2011-07-21 05:41:31 Gaurav

Możesz zaakceptować własną odpowiedź, gdy samodzielnie rozwiązujesz problemy - pomaga wydostać się z nieusuniętej kolejki. – hugomg

@missingno dzięki za przypomnienie Zapomniałem tego :-) – Gaurav

pracował dla mnie:

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

Źródło

2012-07-11 18:01:18 Mikhail

Możesz poprawić swoją odpowiedź, podając pewien kontekst - dlaczego to działa? Czy istnieje dokument referencyjny? – Dhara

Znakomity! Dzięki. – OammieR

zadziałały powyższe kody, ale jak ustawić wysokość? domstyle.set (btnOk.domNode, "height", "30px") nie działa –

Innym możliwym rozwiązaniem jest dodanie klasy do przycisku:

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

W swoim CSS:

.normalButton span{ 
    width: 100px; 
}

Dodatkowe: jeśli dodasz tę klasę, twoje wyrównanie tekstu zostanie pomieszane. Problem ten można rozwiązać poprzez dodanie następujących reguł CSS:

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

Wreszcie, sprawdź my fiddle.

Źródło

2014-12-11 09:08:25 GuyT

Pełna przycisk Szerokość: 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%; 
}

Źródło

2017-02-26 15:59:42 kxxxxoo

Ustawienie szerokości dla przycisku Dojo

Odpowiedz

Powiązane problemy