Hello
Is there any way to "jazz up" the dropdown node ... maybe using template to make it bigger, add colour?
thanks
You could apply CSS styling by adding styles a ui_template node set to "head"
I'm a bit lost with html. Could you elaborate a bit please.
thanks
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
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)
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
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 
great...
thanks again
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.
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.
I just copy pasted an example into a template
[{"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}]
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
[{"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}]
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"
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 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
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.
[{"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}]
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
