Anyone know how to resize this button?

Dashboard
1

I copied this code and have used it for quite a few buttons on my dashboard. Its a push on push off button that changes color and message when on and off. It looks fine when allowed to be full width on a column, but if you try to put two of them side by side, you get a scroll bar and have to scroll over to see the message. I’ve tried changing every number I can find in the code, but I can’t get it to reduce in size so that it doesn’t need the scroll bar.

[{"id":"1d6a9719.bbaee9","type":"ui_template","z":"fe166526.3bb3b8","group":"ce1619f6.d5e248","name":"Forward button","order":7,"width":"10","height":"1","format":"<!DOCTYPE html>\n\n<style>\n:focus {\noutline: 0;\n}\nmd-button45{\n display: block;\n background-color:#2e466e;\n\tmargin: 0px 0px -5px 0px; \n\twidth: 1500px; \n\t//height: 34px;\n line-height: 30px;\t\t\n border: 2px solid #666666;\n border-radius:30px;\n -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;\n border-radius: 30px;\n box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;\n cursor:pointer;\n color:#ffffff;\n font-family:Arial;\n font-size:10px;\n text-align:center;\t\n}\nmd-button45:hover {\n\tbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #415989), color-stop(1, #2e466e));\n\tbackground:-moz-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-webkit-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-o-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-ms-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:linear-gradient(to bottom, #415989 5%, #2e466e 100%);\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#2e466e',GradientType=0);\n\tbackground-color:#415989;\n}\nmd-button45:active {\n\tposition:relative;\n\ttop:1px;\n}\n</style>\n\n<md-button45\n ng-style=\"{background: msg.payload=='1' ?'green':'transparrent'}\"\n ng-click=\"msg.payload = (msg.payload=='x' ? '1' : 'x'); send(msg) \"\n>\n{{msg.payload == 'x' ? 'Fwd Off' : 'Fwd On'}}\n</md-button45>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":380,"y":140,"wires":[["727d57c7.dd4d28","7703ae49.a3e6e"]],"outputLabels":["msg.payload"]},{"id":"ce1619f6.d5e248","type":"ui_group","z":"","name":"Column 2","tab":"4a3b55c0.22eccc","order":2,"disp":false,"width":"11","collapse":false},{"id":"4a3b55c0.22eccc","type":"ui_tab","z":"","name":"Robot Dashboard","icon":"dashboard"}]

2

Just change the "width: 1500px" on the ccode to 500 for instance and you will get:

image

3

Thanks, you are right. I guess when I tried changing that number, I didn’t reduce it enough. When I tried 100px it sizes properly.

4

I just tried it, and what’s weird is that if I alter the dimensions of one button, all the buttons change. What’s going on here?

5

Are you changing this CSS directive for material design buttons?

md-button45{
  display: block;
  background-color:#2e466e;
  margin: 0px 0px -5px 0px;
  width: 1500px;
  //height: 34px;
  line-height: 30px;
  border: 2px solid #666666;
  border-radius:30px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 30px;
  box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:10px;
  text-align:center;
}

If so, it will affect every <md-button45> element in all of your dashboard pages. You can avoid that by setting the button width directly on that one button, like so:

<md-button45 ng-style="{width: 100px; background: msg.payload=='1' ?'green':'transparrent'}" ...

or by assigning it another class that overrides only some of the button properties (like width).

6

Oh, I had no idea. Thanks, I will try that. I have many buttons of that type on my dashboard. That explains why editing just one has strange results.

7

I have another problem, I would like to display the button or group across the entire screen without scrolling.

I tried this code in a <style<, but it don´t work:

#RobotDashboard_Column2,
#RobotDashboard_Column2 md-card {
background : rgba(205,205,205,0);
border: rgba(205,205,205,0);
width: 100vw;
height: 20vh;
}

Does anyone have an idea how it might work?

Thanks Georg

8

Without seeing the rest of what you have it would be guessing

9

That´s my flow:
[{"id":"8f3bbe23.3da1f","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"79dd7922.c7cce8","type":"ui_template","z":"8f3bbe23.3da1f","group":"6a39adb8.5cf4f4","name":"Forward button","order":7,"width":"0","height":"0","format":"<!DOCTYPE html>\n\n<style>\n:focus {\noutline: 0;\n}\nmd-button45{\n display: block;\n background-color:#2e466e;\n\tmargin: 0px 0px -5px 0px; \n\twidth: 100vw; \n\t//height: 34px;\n line-height: 30px;\t\t\n border: 2px solid #666666;\n border-radius:30px;\n -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;\n border-radius: 30px;\n box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;\n cursor:pointer;\n color:#ffffff;\n font-family:Arial;\n font-size:10px;\n text-align:center;\t\n}\nmd-button45:hover {\n\tbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #415989), color-stop(1, #2e466e));\n\tbackground:-moz-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-webkit-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-o-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-ms-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:linear-gradient(to bottom, #415989 5%, #2e466e 100%);\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#2e466e',GradientType=0);\n\tbackground-color:#415989;\n}\nmd-button45:active {\n\tposition:relative;\n\ttop:1px;\n}\n</style>\n\n<md-button45\n ng-style=\"{background: msg.payload=='1' ?'green':'transparrent'}\"\n ng-click=\"msg.payload = (msg.payload=='x' ? '1' : 'x'); send(msg) \"\n>\n{{msg.payload == 'x' ? 'Fwd Off' : 'Fwd On'}}\n</md-button45>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":240,"y":140,"wires":[[]],"outputLabels":["msg.payload"]},{"id":"841248be.0532e8","type":"ui_template","z":"8f3bbe23.3da1f","group":"6a39adb8.5cf4f4","name":"","order":0,"width":0,"height":0,"format":"\n<style>\n #RobotDashboard_Column2,\n #RobotDashboard_Column2 md-card {\n background : rgba(205,205,205,0);\n border: rgba(205,205,205,0);\n width: 100vw;\n height: 20vh;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":240,"y":180,"wires":[[]]},{"id":"6a39adb8.5cf4f4","type":"ui_group","z":"","name":"Column2","tab":"96506970.337258","order":2,"disp":false,"width":"13","collapse":false},{"id":"96506970.337258","type":"ui_tab","z":"","name":"RobotDashboard","icon":"dashboard"}]

10

Try changing the group width to a number that makes the horizontal scrollbar dissapear.
37 worked for me with your flow.
part1

part2
part2.png891×393 11.5 KB
part3
part3.png1917×382 11.9 KB

11

this does not work for me, since no wide fits.
Is not there a way to do it regardless of screen size?

12

Is there a possibility to set the width of the whole group to 100vw in a template?
Below is a screenshot of the web inspector with the desired width

image
image.png1374×42 4.63 KB