[SOLVED] How do I align text with an icon in the Template Widget?

Apps & Services HABPanel
1

I’m using the Template Widget and want to align text with an icon. It seems the icon stretches the height of the grid so the text goes towards the top. I’d want to move the text down a bit to be more aligned with the icon.

Here is my code

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-8"><span style="color: white; font-size: 12pt">Wireless Gateway</span></div>
        <div class="col-xs-2"><div ng-if="itemValue('networkGateway')=='ON'"><span><widget-icon iconset="'freepik-gadgets'" icon="'wifi-router'" size="32" state="itemValue('networkGateway')" /></span></div></div>
        <div class="col-xs-2"><div ng-if="itemValue('networkGateway')=='OFF'"><span><widget-icon iconset="'freepik-gadgets'" icon="'wifi-router'" size="32" state="itemValue('networkGateway')" /></span></div></div>
	</div>
</div>
<p></p>
<div class="container-fluid">
	<div class="row">
		<div class="col-xs-8"><span style="color: white; font-size: 12pt">Solar</span></div>
		<div class="col-xs-2"><div ng-if="itemValue('networkSolar')=='ON'"><span><widget-icon iconset="'smarthome-set'" icon="'solar-panel'" size="32" state="itemValue('Solar')" /></span></div></div>
        <div class="col-xs-2"><div ng-if="itemValue('networkSolar')=='OFF'"><span><widget-icon iconset="'smarthome-set'" icon="'solar-panel'" size="32" state="itemValue('Solar')" /></span></div></div>
	</div>
</div>

Here is a screenshot
image

Any ideas on how to move the text ‘Wireless Gateway’ down so that it aligns with the bottom of the icon? This is probably a noob question, but I am just starting to learn :slight_smile:

EDIT:
I changed the grid type from col-xs-… to container-… and that seemed to adjust the text lower.

Here is my updated code

<div class="template-container">
  <div class="template-contents"><span style="color: white; font-size: 12pt">Wireless Gateway</span></div>
  <div class="template-contents"><div><span><widget-icon iconset="'freepik-gadgets'" icon="'wifi-router'" size="32" state="itemValue('networkGateway')" /></span></div></div>
</div>
<p></p>
<div class="template-container">
  <div class="template-contents"><span style="color: white; font-size: 12pt">Solar</span></div>
  <div class="template-contents"><div><span><widget-icon iconset="'smarthome-set'" icon="'solar-panel'" size="32" state="itemValue('Solar')" /></span></div></div>
</div>

And an updated screenshot
image

Thank you in advance.
Greg

1 Like