How can I change the style of my new widget?

347
15
Jump to solution
01-03-2019 01:52 AM
Ángel_DanielSuárez_Calero
New Contributor III

 

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!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

View solution in original post

15 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
Ángel_DanielSuárez_Calero
New Contributor III
Thank you very much for your help Robert, but before I tried with .boton and it didn´t work. 
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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;
}
0 Kudos
Ángel_DanielSuárez_Calero
New Contributor III

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
Ángel_DanielSuárez_Calero
New Contributor III

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. 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Angel,

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

0 Kudos
Ángel_DanielSuárez_Calero
New Contributor III

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

Thank you for all! 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.