widget-tutorial/widget-exercises/45f9e213-8f63-49d1-a6b4-953d36d08778.html

A comprehensive tutorial + recipes to get started with widgets in Qlik Sense.

<style>.widget-properties {
	
	border-color: {{settings.backgroundColor}};
	border-width: 5px;
	border-style: solid;
  	padding: 10px 10px 10px 10px;

  	h2 {
	  font-size:18px;
	  color: #999;
	  margin-bottom:20px;
  	}

  	.row {
	  border-bottom: 1px solid #ccc;
	  padding-top:2px;
	  padding-bottom:2px;
  	}

	.row:after {
	   content: ".";
	   display: block;
	   height: 0;
	   clear: both;
	   visibility: hidden;
	}

	.row .label {
	   font-weight: bold;
	   min-width: 100px;
	   display:inline-block;
	   padding-right:20px;
	}

	.row .val {
	   display:inline-block;
	}

	.row:nth-child(2n) {
		background-color:#F7F7F9;
	}
}</style>
<div><div class="widget-properties">
	
	<div class="row">
		<div class="label">
			My Custom Property
		</div>
		<div class="val">
			{{settings.customProperty}}
		</div>
	</div>
	
	<div class="row">
		<div class="label">
			Dropdown Value
		</div>
		<div class="val">
			{{settings.fooBarBaz}}
		</div>
	</div>  
	
	
</div></div>