Layout Problems in HabPanel Custom Widget

[Robert_Bevington]

Hi everyone,

I getting use to creating custom widgets at the moment and it’s great fun. But I always seem to run into the same problems when it comes down to layout. I’m trying to get to grips with bootstrap and CSS, but not progressing very well. Can someone please help?

I have a set of buttons that I use to control my Sonos speakers. I’m trying to get the buttons to spread equally across the widget space, i.e. the same width as the album cover. The first row has 3 buttons, the second 2 buttons and the third row 1 button. My plan is that the form an upside down triangle. However my buttons seems to stick to the left and do not spread across the widget…

What’s the best way to achieve equal column widths and centering of the button images?

Here’s an image of my current widget::

And here’s the code for the buttons:

<div class="row">
      <div class="col-sm-4 mySonosbtn">
        <div ng-click="sendCmd(config.sonos_controller,'PREVIOUS')">
          <img class="" src="/static/buttons/previous.png"></img><img class="imag-top" src="/static/buttons/previous_Hover.png"></img>
        </div>
      </div>
      
      <div class="col-sm-4 mySonosbtn">
        <div ng-if="itemValue(config.sonos_controller)=='PAUSE'" ng-click="sendCmd(config.sonos_controller, 'PLAY')">
          <img class="" src="/static/buttons/play.png"/><img class="img-top" src="/static/buttons/play_Hover.png"/>
        </div>
        <div ng-if="itemValue(config.sonos_controller)=='PLAY'" ng-click="sendCmd(config.sonos_controller, 'PAUSE')">
          <img class="" src="/static/buttons/pause.png"/><img class="img-top" src="/static/buttons/pause_Hover.png"/>
        </div>
        <div ng-if="itemValue(config.sonos_controller)=='NEXT'" ng-click="sendCmd(config.sonos_controller, 'PAUSE')">
          <img class="" src="/static/buttons/pause.png"/><img class="img-top" src="/static/buttons/pause_Hover.png"/>
        </div>
        <div ng-if="itemValue(config.sonos_controller)=='PREVIOUS'" ng-click="sendCmd(config.sonos_controller, 'PAUSE')">
          <img class="" src="/static/buttons/pause.png"/><img class="img-top" src="/static/buttons/pause_Hover.png"/>
        </div>
        <div ng-if="itemValue(config.sonos_controller)=='NULL'" ng-click="sendCmd(config.sonos_controller, 'PLAY')">
          <img class="" src="/static/buttons/play.png"/><img class="img-top" src="/static/buttons/play_Hover.png"/>
        </div>
      </div>
      
      <div class="col-sm-4 mySonosbtn">
        <div ng-click="sendCmd(config.sonos_controller,'NEXT')">
        	<img class="" src="/static/buttons/next.png"></img><img class="img-top" src="/static/buttons/next_Hover.png"></img>
        </div>
      </div>
    </div>
  
  <div class="row">
      <div class="col-sm-6 mySonosbtn">
        <div ng-click="sendCmd(config.sonos_volume, +itemValue(config.sonos_volume) - 5)">
        	<img class="" src="/static/buttons/volumeDown.png"></img><img class="img-top" src="/static/buttons/volumeDown_Hover.png"></img>
        </div>
      </div>
      <div class="col-sm-6 mySonosbtn">
        <div ng-click="sendCmd(config.sonos_volume, +itemValue(config.sonos_volume) + 5)">
        	<img class="" src="/static/buttons/volumeUp.png"></img><img class="img-top" src="/static/buttons/volumeUp_Hover.png"></img>
        </div>
      </div>
   </div>
      
	<div class="row">
    <div class="col-sm-12 mySonosbtn"><div>
      <div ng-if="itemValue(config.sonos_mute)=='ON'" ng-click="sendCmd(config.sonos_mute, 'OFF')">
        <img class="" src="/static/buttons/mute.png"></img><img class="img-top" src="/static/buttons/mute_Hover.png"></img>
      </div>
      <div ng-if="itemValue(config.sonos_mute)=='OFF'" ng-click="sendCmd(config.sonos_mute, 'ON')">
        <img class="" src="/static/buttons/unmute.png"></img><img class=" img-top" src="/static/buttons/unmute_Hover.png"></img>
      </div>
      <div ng-if="itemValue(config.sonos_mute)=='NULL'" ng-click="sendCmd(config.sonos_mute, 'ON')">
        <img class="" src="/static/buttons/mute.png"></img><img class="img-top" src="/static/buttons/mute_Hover.png"></img>
      </div>
    </div>
	</div>

Thanks for any help.

Rob