# Anyone know how to resize this button? **URL:** \ **Category:** Dashboard\ **Created:** [7 June 2018 01:53 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654 "2018-06-07T01:53:22Z")\ **Posts on this page:** 12\ **Page:** 1

**Author:** ![Northof49](https://avatars.discourse-cdn.com/v4/letter/n/2acd7d/32.png) [@Northof49](https://discourse.nodered.org/u/Northof49)\ **Post date:** [7 June 2018 01:53 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/1 "2018-06-07T01:53:22Z")

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":"\n\n\n\n\n{{msg.payload == 'x' ? 'Fwd Off' : 'Fwd On'}}\n","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"}]` ---

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\ **Post date:** [7 June 2018 06:36 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/2 "2018-06-07T06:36:06Z")

> [@Northof49](#): > > [{"id":"1d6a9719.bbaee9","type":"ui\_template","z":"fe166526.3bb3b8","group":"ce1619f6.d5e248","name":"Forward button","order":7,"width":"10","height":"1","format":"\\n\n\\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\\n\n\\n{{msg.payload == 'x' ? 'Fwd Off' : 'Fwd On'}}\n\","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"}] Just change the "width: 1500px" on the ccode to 500 for instance and you will get: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/b66871c1e3487ca450977b3ffb8220f8b62b8745.png) ---

**Author:** ![Northof49](https://avatars.discourse-cdn.com/v4/letter/n/2acd7d/32.png) [@Northof49](https://discourse.nodered.org/u/Northof49)\ **Post date:** [7 June 2018 15:23 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/3 "2018-06-07T15:23:09Z")

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

**Author:** ![Northof49](https://avatars.discourse-cdn.com/v4/letter/n/2acd7d/32.png) [@Northof49](https://discourse.nodered.org/u/Northof49)\ **Post date:** [7 June 2018 15:34 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/4 "2018-06-07T15:34:41Z")

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? ---

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\ **Post date:** [7 June 2018 16:39 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/5 "2018-06-07T16:39:45Z")

Are you changing this CSS directive for material design buttons? ```auto 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 `` element in all of your dashboard pages. You can avoid that by setting the button width directly on that one button, like so: > ` **Author:** ![Northof49](https://avatars.discourse-cdn.com/v4/letter/n/2acd7d/32.png) [@Northof49](https://discourse.nodered.org/u/Northof49)\ **Post date:** [7 June 2018 17:23 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/6 "2018-06-07T17:23:09Z") 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. ---

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\ **Post date:** [19 November 2018 20:27 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/7 "2018-11-19T20:27:05Z")

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 \ **Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\ **Post date:** [20 November 2018 00:19 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/8 "2018-11-20T00:19:17Z") Without seeing the rest of what you have it would be guessing ---

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\ **Post date:** [20 November 2018 07:18 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/9 "2018-11-20T07:18:59Z")

> [@zenofmud](#): > > Without seeing the rest of what you have it would be guessing 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":"\n\n\n\n\n{{msg.payload == 'x' ? 'Fwd Off' : 'Fwd On'}}\n","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","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"}]` ---

**Author:** ![JayGhb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jayghb/32/5550_2.png) [@JayGhb](https://discourse.nodered.org/u/JayGhb)\ **Post date:** [20 November 2018 08:39 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/10 "2018-11-20T08:39:38Z")

Try changing the group width to a number that makes the horizontal scrollbar dissapear. 37 worked for me with your flow. ![part1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e5346bf2a8f1481a9349483f129973dd6abc83ea.png) ![part2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3dc301d57b2966c40471208630e60a1393f892cc.png) ![part3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3f9e53f537577c255cd47295a9ba3b9adc49b0e0.png) ---

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\ **Post date:** [20 November 2018 12:03 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/11 "2018-11-20T12:03:32Z")

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

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\ **Post date:** [25 November 2018 15:26 UTC](https://discourse.nodered.org/t/anyone-know-how-to-resize-this-button/654/12 "2018-11-25T15:26:34Z")

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/73f7f6ed6923581e6bce00cd0252b8489a1b8ea4.png)