How can I change the style of my new widget?

[Ángel_DanielSuárez_Calero]

Hi, I've made my first widget and wanted to change the style of some elements, such as a button but I can´t get any results.

My html code for the "Consulta" button of the image is:

<button type="button" class="boton" name="button" id="btnConsulta">Consulta</button>

and its css:

#boton {

left: 60px;

color: black;

}

Sorry but my level of developing widgets is low and I'm sure I'm making a lot of mistakes.

Thank you!

[RobertScheitlin__GISP]

Angel,

   Your css rule should be:

.boton {
  left: 60px;
  color: black;
}‍‍‍‍

Your had:

#boton {
  left: 60px;
  color: black;
}‍‍‍‍‍‍‍‍

Which would mean that the id of the element is boton and that is not the case for your code "boton" is the class name. Dot is for class and # is for id.

[Ángel_DanielSuárez_Calero]

Thank you very much for your help Robert, but before I tried with .boton and it didn´t work. 

[RobertScheitlin__GISP]

Angel,

   The left property in the css rule will never work if you do not add the property position and set it to absolute.

.boton {
    left: 60px;
    color: red;
    position: absolute;
}‍‍‍‍‍

[Ángel_DanielSuárez_Calero]

Hi Robert, Thanks for your help, but i tried this and this didn´t work. I think that in WAB I need use the dojo propierties for do this. What is your opinion?

[RobertScheitlin__GISP]

Angel,

   I personally tested that in a widget to make sure that it worked... Yes I never use an elements id in my widget.html, that is what data-dojo-attach-point is for.

[Ángel_DanielSuárez_Calero]

Thanks for all Robert, I tried this in other widget and I could see the css propieties , I think that I have any problem with my widget. 

[RobertScheitlin__GISP]

Angel,

  If you attach your whole widget I can diagnose the issue.

[Ángel_DanielSuárez_Calero]

Hi Robert, I attached my widget on this link: https://drive.google.com/open?id=1Aw2Mi1fPL35NdSPq9wJRTW9dZ63cwNdB   

Thank you for all! 

[RobertScheitlin__GISP]

Angel,

   Here is your widget with the styling working and the widget.html and widget.js converted over to use data-dojo-attach-point instead of ids.