# Dropdown titivate

**URL:** <https://discourse.nodered.org/t/dropdown-titivate/25231>\
**Category:** Dashboard\
**Created:** [21 April 2020 10:01 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231 "2020-04-21T10:01:05Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [21 April 2020 10:01 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/1 "2020-04-21T10:01:06Z")

</div>

Hello  
Is there any way to "jazz up" the dropdown node ... maybe using template to make it bigger, add colour?  
thanks

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 10:08 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/2 "2020-04-21T10:08:49Z")

</div>

You could apply CSS styling by adding styles a ui\_template node set to "head"

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [21 April 2020 10:21 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/3 "2020-04-21T10:21:19Z")

</div>

I'm a bit lost with html. Could you elaborate a bit please.  
thanks

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 10:25 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/4 "2020-04-21T10:25:49Z")

</div>

If you want to titivate, you're gonna have to spend some time learning I'm afraid.

I'd start here...

[https://www.w3schools.com/html/html\_css.asp](https://www.w3schools.com/html/html_css.asp)

Once you have the basics, you can start searching the net for "fancy drop-down CSS" etc then apply that to your own.

Its not terribly difficult to grasp and is a whole lotta fun (if you like that kinda thing)

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [21 April 2020 10:42 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/5 "2020-04-21T10:42:56Z")

</div>

I thought this stuff was specific to Node Red but you are saying it is generic. In that case I'm happy to research. Thanks

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 10:47 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/6 "2020-04-21T10:47:25Z")

</div>

If you consider the dashboard is essentially a web page & all (most) web pages are HTML + CSS then you can make a leap of faith. I.e. it's all web technology so learn the web technology and you can titivate the dashboard 🙂

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [21 April 2020 11:03 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/7 "2020-04-21T11:03:15Z")

</div>

great...  
thanks again

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [22 April 2020 07:20 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/8 "2020-04-22T07:20:55Z")

</div>

Hello  
Now I'm stuck again. I have found some nice styles and pasted them into a template in dashboard. Looks good but I don't know how to generate a payload when an item is selected from the dropdown.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 April 2020 07:37 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/9 "2020-04-22T07:37:07Z")

</div>

Depends what you did. Are you using the dashboard node drop-down or your own in a ui\_template?

Export the relevant parts of your flow for us to see to be able to help you.

Remember to paste your export between three backticks...

`````  
`like this`  
`````

...to ensure your flow doesn't get mangled.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [22 April 2020 07:54 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/10 "2020-04-22T07:54:51Z")

</div>

I just copy pasted an example into a template

```auto
[{"id":"60fb6658.20da28","type":"debug","z":"646e8fbc.b0c6a","name":"drop down","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":660,"y":540,"wires":[]},{"id":"f23553c6.ae238","type":"ui_template","z":"646e8fbc.b0c6a","group":"8bf0825d.36a2c","name":"dropdown","order":11,"width":0,"height":0,"format":"<!DOCTYPE html> \n<html> \n\t<head> \n\t\t<style> \n\t\t\th1 { \n\t\t\t\tcolor:green; \n\t\t\t} \n\t\t\tselect { \n\t\t\t\t-webkit-appearance: none; \n\t\t\t\t-moz-appearance: none; \n\t\t\t\t-ms-appearance: none; \n\t\t\t\tappearance: none; \n\t\t\t\toutline: 0; \n\t\t\t\tbackground: green; \n\t\t\t\tbackground-image: none; \n\t\t\t\tborder:1px solid black; \n\t\t\t} \n\t\t\t.select { \n\t\t\t\tposition: relative; \n\t\t\t\tdisplay: block; \n\t\t\t\twidth: 20em; \n\t\t\t\theight: 3em; \n\t\t\t\tline-height: 3; \n\t\t\t\tbackground: #2C3E50; \n\t\t\t\toverflow: hidden; \n\t\t\t\tborder-radius: .25em; \n\t\t\t} \n\t\t\tselect { \n\t\t\t\twidth: 100%; \n\t\t\t\theight: 100%; \n\t\t\t\tmargin: 0; \n\t\t\t\tpadding: 0 0 0 .5em; \n\t\t\t\tcolor: #fff; \n\t\t\t\tcursor: pointer; \n\t\t\t} \n\t\t\tselect::-ms-expand { \n\t\t\t\tdisplay: none; \n\t\t\t} \n\t\t\t.select::after { \n\t\t\t\tcontent: '\\25BC'; \n\t\t\t\tposition: absolute; \n\t\t\t\ttop: 0; \n\t\t\t\tright: 0; \n\t\t\t\tbottom: 0; \n\t\t\t\tpadding: 0 1em; \n\t\t\t\tbackground: #34495E; \n\t\t\t\tpointer-events: none; \n\t\t\t} \n\t\t\t.select:hover::after { \n\t\t\t\tcolor: #F39C12; \n\t\t\t} \n\t\t\t\n\t\t\t<!-- For different browsers -->\n\t\t\t.select::after { \n\t\t\t\t-webkit-transition: .25s all ease; \n\t\t\t\t-o-transition: .25s all ease; \n\t\t\t\ttransition: .25s all ease; \n\t\t\t} \n\t\t</style> \n\t</head> \n\t<body> \n\t\t<center> \n\t\n\t\t<div class=\"select\"> \n\t\t\t<select name=\"slct\" id=\"slct\"> \n\t\t\t <option value=\"volvo\">Volvo</option>\n\t\t\t\t<option>Computer Science Subjects</option> \n\t\t\t\t<option value=\"1\">Operating System</option> \n\t\t\t\t<option value=\"2\">Computer Networks</option> \n\t\t\t\t<option value=\"3\">Data Structure</option> \n\t\t\t\t<option value=\"4\">Algorithm</option> \n\t\t\t\t<option value=\"5\">C programming</option> \n\t\t\t\t<option value=\"6\">JAVA</option> \n\t\t\t</select> \n\t\t</div> \n\t\t</center> \n\t</body> \n</html>\t\t\t\t\t\t\t \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":480,"y":540,"wires":[["60fb6658.20da28"]]},{"id":"8bf0825d.36a2c","type":"ui_group","z":0,"name":"buttons","tab":"b5ca2d9b.d2557","order":1,"disp":false,"width":6,"collapse":false},{"id":"b5ca2d9b.d2557","type":"ui_tab","z":0,"name":"Home","icon":"home","order":1}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 April 2020 08:40 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/11 "2020-04-22T08:40:52Z")

</div>

ok, first thing first,

the dashboard is already a HTML document (thats why it shows up in your browser) so you dont need `<html>`, `<head>` or `<body>` in the template - the only reason (the code you pasted) works is the browser is quite forgiving.

Secondly, just copying an pasting isn't going to teach you much - but hey ho.

Here you go, this works - but you'll have difficulty understanding it or implementing more than one if you dont get to grips with JS / HTML / CSS

```auto
[{"id":"697e8390.573ddc","type":"debug","z":"c70ba4a4.e7fb58","name":"drop down","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":830,"y":540,"wires":[]},{"id":"72cd3d4e.7feae4","type":"ui_template","z":"c70ba4a4.e7fb58","group":"deeae69a.e7f598","name":"dropdown","order":1,"width":0,"height":0,"format":"<script>\n this.scope.onSelectChange = function(el){\n var v = $(el).val();\n this.send({payload:v})\n }\n</script>\n\n<div class=\"select\"> \n\t<select name=\"slct\" id=\"slct\" \n\t onchange=\"angular.element(this).scope().onSelectChange(this)\"> \n\t\t<option value=\"1\">Operating System</option> \n\t\t<option value=\"2\">Computer Networks</option> \n\t\t<option value=\"3\">Data Structure</option> \n\t\t<option value=\"4\">Algorithm</option> \n\t\t<option value=\"5\">C programming</option> \n\t\t<option value=\"6\">JAVA</option> \n\t</select> \n</div> \n\n\t\t\t\t \n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":680,"y":540,"wires":[["697e8390.573ddc"]]},{"id":"27a64d91.ea40f2","type":"ui_template","z":"c70ba4a4.e7fb58","group":"deeae69a.e7f598","name":"styles","order":2,"width":0,"height":0,"format":"<style> \n\th1 { \n\t\tcolor:green; \n\t} \n\tselect { \n\t\t-webkit-appearance: none; \n\t\t-moz-appearance: none; \n\t\t-ms-appearance: none; \n\t\tappearance: none; \n\t\toutline: 0; \n\t\tbackground: green; \n\t\tbackground-image: none; \n\t\tborder:1px solid black; \n\t} \n\t.select { \n\t\tposition: relative; \n\t\tdisplay: block; \n\t\twidth: 20em; \n\t\theight: 3em; \n\t\tline-height: 3; \n\t\tbackground: #2C3E50; \n\t\toverflow: hidden; \n\t\tborder-radius: .25em; \n\t} \n\tselect { \n\t\twidth: 100%; \n\t\theight: 100%; \n\t\tmargin: 0; \n\t\tpadding: 0 0 0 .5em; \n\t\tcolor: #fff; \n\t\tcursor: pointer; \n\t} \n\tselect::-ms-expand { \n\t\tdisplay: none; \n\t} \n\t.select::after { \n\t\tcontent: '\\25BC'; \n\t\tposition: absolute; \n\t\ttop: 0; \n\t\tright: 0; \n\t\tbottom: 0; \n\t\tpadding: 0 1em; \n\t\tbackground: #34495E; \n\t\tpointer-events: none; \n\t} \n\t.select:hover::after { \n\t\tcolor: #F39C12; \n\t} \n\t\n\t<!-- For different browsers -->\n\t.select::after { \n\t\t-webkit-transition: .25s all ease; \n\t\t-o-transition: .25s all ease; \n\t\ttransition: .25s all ease; \n\t} \n</style> \n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":670,"y":500,"wires":[[]]},{"id":"deeae69a.e7f598","type":"ui_group","z":"","name":"buttons","tab":"13129af8.35fd85","order":1,"disp":false,"width":"9","collapse":false},{"id":"13129af8.35fd85","type":"ui_tab","z":0,"name":"Home","icon":"home","order":1}]

```

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [22 April 2020 10:33 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/12 "2020-04-22T10:33:50Z")

</div>

thank you so much.  
When I said I "just" did a cut and paste, I meant that I had spent time discovering CSS and some html tidbits, before experimenting with some code. I do some coding in VB NET and Arduino but this is a whole new field to me. I can get the html bit and CSS but the JS??  
Maybe I'm using the wrong technique but the dropdown code includes "onSelectChange"  
I would love to have a fixed header that says "choose an option" which on click shows a list of options to click. Then after clicking one restore to "choose an option"

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 April 2020 11:03 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/13 "2020-04-22T11:03:11Z")

</div>

It takes time & lots of play

Its a quite a different mindset to .NET / client side programming but you at least (I imagine through [VB.NET](http://VB.NET) and C from Aurduino) have an understanding of objects, properties, setting values etc.

The bits to learn for HTML / JS are not so different except always remember things are stateless (each page refresh - things start again)

good luck

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [23 April 2020 16:20 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/14 "2020-04-23T16:20:46Z")

</div>

I'm back!  
I've been experimenting and modifying some examples which do what I want. Unfortunately this one works well (except for outputting a payload) in my windows web server but has strange behaviour within dashboard. I am way out of my depth. Anyone help please.

```auto
[{"id":"50036c9b.c44cec","type":"ui_template","z":"5081acab.0242b4","group":"b61097ba.80be5","name":"","order":2,"width":0,"height":0,"format":"\n\n\n<script>\nvar _hmt = _hmt || [];\n(function() {\nvar hm = document.createElement(\"script\");\nhm.src = \"//hm.baidu.com/hm.js?73c27e26f610eb3c9f3feb0c75b03925\";\nvar s = document.getElementsByTagName(\"script\")[0];\ns.parentNode.insertBefore(hm, s);\n})();\n\nfunction myTest() {\nalert(\"you pressed test 3 via a function and would like to pass on as a payload\");\n}\n</script>\n\n\n<div class=\"dropdown\">\n<button onclick=\"myFunction()\" class=\"dropbtn\">Dropdown</button>\n <div id=\"myDropdown\" class=\"dropdown-content\">\n<a href=\"javascript:alert('you pressed test1');\">Test1</a>\n<a href=\"javascript:alert('you pressed test2');\">Test2</a>\n<a href=\"#\" onclick=\"myTest()\">Test3</a>\n </div>\n</div>\n<p id=\"demo\"></p>\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":720,"y":420,"wires":[["6f0dc163.19bb48"]]},{"id":"1287f23e.e9c836","type":"ui_template","z":"5081acab.0242b4","group":"2b599cf9.f7374c","name":"mystyle","order":2,"width":0,"height":0,"format":"<style>\n.dropbtn {\n background-color: #4CAF50;\n color: cyan;\n padding: 16px;\n font-size: 16px;\n border: none;\n cursor: pointer;\n\n}\n\n.dropbtn:hover, .dropbtn:focus {\n background-color: #3e8e41;\n}\n\n.dropdown {\n position: relative;\n display: inline-block;\n}\n\n.dropdown-content {\n display: none;\n position: absolute;\n background-color: #f9f9f9;\n min-width: 160px;\n overflow: auto;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n}\n\n.dropdown-content a {\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n}\n\n.dropdown a:hover {background-color: #f1f1f1}\n\n.show {display:block;}\n</style>\n<script>\n/* When the user clicks on the button, \ntoggle between hiding and showing the dropdown content */\nfunction myFunction() {\n document.getElementById(\"myDropdown\").classList.toggle(\"show\");\n}\n\n// Close the dropdown if the user clicks outside of it\nwindow.onclick = function(event) {\n if (!event.target.matches('.dropbtn')) {\n\n// var x = document.getElementsByClassName(\"dropdown-content\");\n// document.getElementById(\"demo\").innerHTML = \"You selected: \" + x;\n // var x = document.getElementById(\"myDropdown\").value;\n// document.getElementById(\"demo\").innerHTML = \"You selected: \" + x;\n\n\n var dropdowns = document.getElementsByClassName(\"dropdown-content\");\n var i;\n for (i = 0; i < dropdowns.length; i++) {\n var openDropdown = dropdowns[i];\n if (openDropdown.classList.contains('show')) {\n openDropdown.classList.remove('show');\n }\n }\n }\n}\n\n\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":700,"y":360,"wires":[[]]},{"id":"6f0dc163.19bb48","type":"debug","z":"5081acab.0242b4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":900,"y":420,"wires":[]},{"id":"b61097ba.80be5","type":"ui_group","name":"Group 1","tab":"5d4402ab.d95724","order":1,"disp":true,"width":6},{"id":"2b599cf9.f7374c","type":"ui_group","z":"","name":"buttons","tab":"d029df62.a8cad8","order":1,"disp":false,"width":"9","collapse":false},{"id":"5d4402ab.d95724","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":3},{"id":"d029df62.a8cad8","type":"ui_tab","z":0,"name":"Home","icon":"home","order":1}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 May 2020 16:20 UTC](https://discourse.nodered.org/t/dropdown-titivate/25231/15 "2020-05-23T16:20:49Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.