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: Consulta 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!

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

Trouver plus de publications taguées avec

Accepted answers

RobertScheitlin__GISP

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

All comments

RobertScheitlin__GISP

Angel,

Your css rule should be:

<SPAN class="selector token">.boton</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 60px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Your had:

<SPAN class="selector token">#boton</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 60px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.

<SPAN class="selector token">.boton</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 60px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> red<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Á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.

Huella.zip

Ángel_DanielSuárez_Calero

Hello Robert, thank you very much for fixing my widget, thanks to you I have learned more about Dojo and my widget works 100%. On the other hand, I've been testing another widget of yours, "Zoomgrid" and it works correctly, but I wanted to know if it's possible to hide the layer in the "Layerlist widget". I attached the "Zoomgrid" in this link: https://drive.google.com/open?id=1765kf1iaTj6MdIRG8uustdMJnlGr0wyA.

Thanks for all !

RobertScheitlin__GISP

Angel,

Sure add this new line (line 5) to the widget.js:

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>statesLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fsampleserver1.arcgisonline.com%2FArcGIS%2Frest%2Fservices%2FDemographics%2FESRI_Census_USA%2FMapServer%2F5" target="_blank">https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SELECTION<SPAN class="punctuation token">,</SPAN>
&nbsp; outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"ObjectID"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"STATE_NAME"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"POP2000"</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setObject</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'_wabProperties.isTemporaryLayer'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>statesLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Ángel_DanielSuárez_Calero

This works correctly in the widget, thanks again Robert .

RobertScheitlin__GISP

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

Ángel_DanielSuárez_Calero

I think that I clicked on the "Mark Correct" now , this is correct?

Thanks and sorry

RobertScheitlin__GISP

Now you got it.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.