Date Picker: Calendar gets distorted if runs on same tab with another table template

[DannyTMo]

Hi,
The idea is Date picker provides a date, I convert it to a week day and print out the time table of that day ( from a given schedule file). I use the dynamic table from natcl.

Issue: Calendar worked fine for the first pick, then it got distorted. This only happened if date picker and the table are on the same tab

Flow:

[{"id":"8fc5754d.2b4068","type":"template","z":"b147afd5.d980b","name":"css","field":"style","fieldType":"msg","format":"html","syntax":"mustache","template":"table {\n color: #333;\n font-family: Helvetica, Arial, sans-serif;\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0\n}\ntd, th {\n border: 1px solid transparent;\n /* No more visible border /\n height: 30px;\n transition: all 0.3s;\n / Simple transition for hover effect /\n}\nth {\n background: #DFDFDF;\n / Darken header a bit /\n font-weight: bold;\n}\ntd {\n background: #FAFAFA;\n text-align: center;\n}\n\n/ Cells in even rows (2,4,6...) are one color /\n\ntr:nth-child(4n) td {\n background: #F1F1F1;\n}\ntr:nth-child(4n+1) td {\n background: #F1F1F1;\n}\n\n/ Cells in odd rows (1,3,5...) are another (excludes header cells) /\n\ntr:nth-child(4n+2) td {\n background: #FEFEFE;\n}\ntr:nth-child(4n+3) td {\n background: #FEFEFE;\n}\ntr td:hover {\n background: #666;\n color: #FFF;\n}\n\n/ Hover cell effect! /","x":890,"y":320,"wires":[["be60a259.0f2eb"]]},{"id":"9d917274.bc804","type":"function","z":"b147afd5.d980b","name":"Get Week day","func":"var weekdays =[\n 'Sunday',\n 'Monday',\n 'Tuesday',\n 'Wednesday',\n 'Thursday',\n 'Friday',\n 'Saturday'\n ]\nvar ts = msg.payload\nvar xx = new Date(ts)\nmsg.number = xx.getDay()\nmsg.payload = weekdays[xx.getDay()]\nmsg.original =ts\nflow.set('week_day',msg.payload);\nreturn msg","outputs":1,"noerr":0,"x":260,"y":320,"wires":[["8f7c822b.1ebc2"]]},{"id":"f8d2d4ba.b94a58","type":"function","z":"b147afd5.d980b","name":"Get schedule","func":"msg1 ={}\nmsg2={}\nmessage =[]\ntimeconv = {\n "8":"8:00",\n "8.5":"8:30",\n "9":"9:00",\n "9.5":"9:30",\n "10":"10:00",\n "10.5":"10:30",\n "11":"11:00",\n "11.5":"11:30",\n "12":"12:00",\n "12.5":"12:30",\n "13":"13:00",\n "13.5":"13:30",\n "14":"14:00",\n "14.5":"14:30",\n "15":"15:00",\n "15.5":"15:30",\n "16":"16:00",\n "16.5":"16:30",\n "17":"17:00",\n "17.5":"17:30",\n "18":"18:00",\n "18.5":"18:30",\n "19":"19:00",\n "19.5":"19:30",\n "20":"20:00",\n "20.5":"20:30",\n "21":"21:00",\n "21.5":"21:30",\n "22":"22:00",\n "22.5":"22:30",\n}\nroomschedule= msg.payload.schedule[flow.get('week_day')];\nmessage.push({"time": "Time", "class":"Class"})\nfor (var i=0; i< roomschedule.length; i++){\n var temp ={}\n temp.time = timeconv[roomschedule[i].Start];\n temp.class = roomschedule[i].Class;\n message.push(temp);\n temp = {};\n temp.time = timeconv[roomschedule[i].End];\n temp.class = roomschedule[i]['Course Code'];\n message.push(temp);\n}\n/\nfor (var i=0; i< parseInt(roomschedule.length); i++){\n var temp ={}\n temp["time"] = roomschedule[i]['Start']\n temp["class"] = roomschedule[i]['Class']\n message.push(temp)\n break\n}\n*/\nmsg1.payload = message;\nmsg2.payload = message\n//msg1.payload = roomschedule;\nreturn [msg1, msg2]","outputs":2,"noerr":0,"x":730,"y":320,"wires":[["8fc5754d.2b4068"],[]]},{"id":"1cc2e3a8.a12f1c","type":"ui_date_picker","z":"b147afd5.d980b","name":"","label":"date","group":"144b4bff.e045a4","order":1,"width":0,"height":0,"passthru":true,"topic":"","x":90,"y":320,"wires":[["9d917274.bc804"]]},{"id":"be60a259.0f2eb","type":"ui_template","z":"b147afd5.d980b","group":"9bad2b8d.5ff248","name":"","order":1,"width":"8","height":"8","format":"<style>\n {{msg.style}}\n</style>\n\n

\n <tr ng-repeat="obj in msg.payload">\n \n \n \n

{{ obj.time }}

{{ obj.class }}

","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1060,"y":320,"wires":[[]]},{"id":"8f7c822b.1ebc2","type":"template","z":"b147afd5.d980b","name":"Schedule","field":"payload","fieldType":"msg","format":"json","syntax":"mustache","template":"{\n "_id": "77faf749ae2d3f3b824856219df74c8a",\n "_rev": "1-f3121b32feec614d9ec0cd9c5fbfea97",\n "classroomID": "E121",\n "schedule": {\n "Monday": [\n {\n "Class": "Microsoft Server Admin Part 2",\n "Course Code": "COMP 10051",\n "Start": 8,\n "End": 9.5\n },\n {\n "Class": "Protocol Analysis & Troubleshooting",\n "Course Code": "COMP 10027",\n "Start": 13,\n "End": 16\n }\n ],\n "Tuesday": [\n {\n "Class": "Cisco Routing and Swtich",\n "Course Code": "COMP 10023",\n "Start": 8,\n "End": 10\n },\n {\n "Class": "Microsoft Security",\n "Course Code": "COMP 10030",\n "Start": 10,\n "End": 12\n },\n {\n "Class": "Microsoft Server Admin Part 2",\n "Course Code": "COMP 10051",\n "Start": 12.5,\n "End": 14\n },\n {\n "Class": "Cisco Routing and Swtich",\n "Course Code": "COMP 10023",\n "Start": 17,\n "End": 19\n }\n ],\n "Wednesday": [\n {\n "Class": "Cisco Routing and Swtich",\n "Course Code": "COMP 10023",\n "Start": 8,\n "End": 10\n },\n {\n "Class": "Server, Platform & Network Security",\n "Course Code": "COMP 10067",\n "Start": 10,\n "End": 12\n },\n {\n "Class": "Cisco Routing and Swtich",\n "Course Code": "COMP 10051",\n "Start": 13,\n "End": 15\n },\n {\n "Class": "Network Capstone",\n "Course Code": "COMP 10177",\n "Start": 15,\n "End": 17\n }\n ],\n "Thursday": [\n {\n "Class": "Microsoft Server Admin Part 2",\n "Course Code": "COMP 10051",\n "Start": 9.5,\n "End": 11\n },\n {\n "Class": "Network Risk and Security",\n "Course Code": "COMP 10028",\n "Start": 12,\n "End": 16\n }\n ],\n "Friday": [\n {\n "Class": "Cisco Routing and Switch",\n "Course Code": "COMP 10023",\n "Start": 9,\n "End": 11\n },\n {\n "Class": "Cisco Routing and Switch",\n "Course Code": "COMP 10023",\n "Start": 12,\n "End": 14\n },\n {\n "Class": "Microsoft Server Admin Part 2",\n "Course Code": "COMP 10051",\n "Start": 14,\n "End": 15.5\n }\n ],\n "Saturday": [],\n "Sunday": []\n }\n}","x":420,"y":320,"wires":[["cb4355b3.66b048"]]},{"id":"cb4355b3.66b048","type":"json","z":"b147afd5.d980b","name":"","x":550,"y":320,"wires":[["f8d2d4ba.b94a58"]]},{"id":"144b4bff.e045a4","type":"ui_group","z":"","name":"Default","tab":"8f480d4c.9e966","disp":true,"width":"8","collapse":false},{"id":"9bad2b8d.5ff248","type":"ui_group","z":"","name":"12312","tab":"8f480d4c.9e966","disp":true,"width":"8","collapse":false},{"id":"8f480d4c.9e966","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

[dceejay]

Well the style you are injecting takes over the complete table style - so maybe you can target that a bit more by using class names ?

[dceejay]

... but I can pin it as it is a fixed width - will be pushed to master later tonight