So i have included some pictures to illustrate the issue.
Here is the panel that i am working on:
Here is an image of the buttons with how i laid them out in the dashboard with the designer:
(you can ignore the buttons under the red x in this picture those are some that are also under a template that i was starting to experiment with). The others however are more indicative of the sizing that i would ultimately like the buttons to display at when invoked from the template widget.
Here is my code when used in the template widget:
<div class="row no-gutters" >
<div class="col-md-8">
<div ng-init="All={'name': 'All',
'item': 'Light3',
'type': 'button',
'action_type': 'toggle',
'command': 'ON',
'command_alt': 'OFF',
'font_size': '48',
'background_active': '#FFFFFF',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'ceiling-lamp',
'foreground_active': '#000000',
'background': '#000000'}">
<widget-button ng-model="All"></widget-button>
</div>
</div>
<div class="col-md-4">
<div ng-if="itemValue('Light11')=='ON'">
<div ng-init="TV_Pwr={'name': 'OFF',
'item': 'TV_Pwr',
'command': 'OFF',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'old-tv-with-antennas',
'background_active': '#FFFFFF',
'font_size': '48',
'font_color':'#000000',
'background': '#FFFFFF',
'foreground': '#000000'}">
<widget-button ng-model="TV_Pwr"></widget-button>
</div>
</div>
<div ng-if="itemValue('Light11')=='OFF'">
<div ng-init="TV_Pwr={'name': 'ON',
'item': 'TV_Pwr',
'command': 'ON',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'old-tv-with-antennas',
'background_active': '#000000',
'font_size': '48',
'font_color':'#FFFFFF',
'background': '#000000'}">
<widget-button ng-model="TV_Pwr"></widget-button>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-4">
<div ng-init="Back={'name': 'Back',
'item': 'Light24',
'type': 'button',
'action_type': 'toggle',
'command': 'ON',
'command_alt': 'OFF',
'font_size': '48',
'background_active': '#FFFFFF',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'ceiling-lamp',
'foreground_active': '#000000',
'background': '#000000'}">
<widget-button ng-model="Back"></widget-button>
</div>
</div>
<div class="col-md-4">
<div ng-init="TV={'name': 'TV',
'item': 'Light23',
'type': 'button',
'action_type': 'toggle',
'command': 'ON',
'command_alt': 'OFF',
'font_size': '48',
'background_active': '#FFFFFF',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'ceiling-lamp',
'foreground_active': '#000000',
'background': '#000000'}">
<widget-button ng-model="TV"></widget-button>
</div>
</div>
<div class="col-md-4">
<div ng-if="itemValue('Display_EMBY_Poster')=='ON'">
<div ng-init="EMBY={'name': 'EMBY',
'item': 'EMBY_ON',
'command': 'OFF',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'old-tv-with-antennas',
'background_active': '#FFFFFF',
'font_size': '48',
'font_color':'#000000',
'background': '#FFFFFF',
'foreground': '#000000'}">
<widget-button ng-model="EMBY"></widget-button>
</div>
</div>
<div ng-if="itemValue('Display_EMBY_Poster')=='OFF'">
<div ng-init="EMBY={'name': 'EMBY',
'item': 'EMBY_ON',
'command': 'ON',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'old-tv-with-antennas',
'background_active': '#000000',
'font_size': '48',
'background': '#000000'}">
<widget-button ng-model="EMBY"></widget-button>
</div>
</div>
</div>
</div>
<div class="row no-gutters" >
<div class="col-md-6">
<div ng-init="BackYard={'name': 'Backyard Lights',
'item': 'Light15',
'type': 'button',
'action_type': 'toggle',
'command': 'ON',
'command_alt': 'OFF',
'font_size': '48',
'background_active': '#FFFFFF',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'ceiling-lamp',
'foreground_active': '#000000',
'background': '#000000'}">
<widget-button ng-model="BackYard"></widget-button>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters-special" >
<div class="col-md-12" style="padding-right: 0">
<div ng-init="Lamp={'name': 'Lamp',
'item': 'Light25',
'action_type': 'toggle',
'command': 'ON',
'command_alt': 'OFF',
'font_size': '48',
'background_active': '#FFFFFF',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'ceiling-lamp',
'foreground_active': '#000000',
'background': '#000000'}">
<widget-button ng-model="Lamp"></widget-button>
</div>
</div>
</div>
<div class="row no-gutters-special2" >
<div class="col-md-12" style="padding-right: 0">
<div ng-init="KnoxCamera={'name': 'Knox Camera',
'item': 'Knoxwebcameview',
'type': 'button',
'action_type': 'toggle',
'command': 'ON',
'command_alt': 'OFF',
'font_size': '48',
'background_active': '#FFFFFF',
'backdrop_iconset': 'freepik-gadgets',
'backdrop_icon': 'ceiling-lamp',
'foreground_active': '#000000',
'background': '#000000'}">
<widget-button ng-model="KnoxCamera"></widget-button>
</div>
</div>
</div>
</div>
</div>
As you can see from looking at this i have nested the lower buttons such that the Backyard lights button is in a row where the bottom of the row is even with the knox camera button yet the button is still only formatting to the size of the text? That is the first issue. The second is how to i make the other rows that i want to increase the height increase (Back TV, EMBY, and LAMP) so that the button size can increase. The button height is all formatting based on the text of the button.
here is my css
.row.no-gutters {
margin-right: 0;
margin-left: 0;
margin-top:20px;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 1;
padding-left: 0;
}
.row.no-gutters-special {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters-special2 {
margin-right: 0;
margin-left: 0;
margin-top:20px;
}
Any help here would be appreciated