Working ui_template button with flexible text styling

Dashboard
1

I have this:
image
fiddle http://jsfiddle.net/c2e8rykt/2/
Which has CSS

body {
padding: 10px;
background-color: #003;
}

.remote-button.onoff {
  height: 100%;
  opacity: 1;
  color: white;
}

.remote-button {
  border-radius: 10px;
  height: 100%;
  overflow: hidden;
}

.remote-button:hover {
  border-radius: 10px;
  border: 1px solid red;
}

.remote-button span {
  border-radius: 10px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}

and HTML

<div style="height: 200px; width: 100px;" class="remote-button">
  <span style="color: white; background-color: #009900;" class="onoff">Node red line that may overflow the 1234 width of the button<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off<br>off</span>
</div>

How can I put this code into a ui_template for button and ui_template for manipulation ?

Any simple example will do. md is not required as long as the template plays nice with the dashboard.

2

Isn't this a continuation of Ui_template mvc and scope of context/flow/global stores? If not how is it different?

3

Hi, Yes and no. The reason for a new post is because I failed to get any information relating to the bigger picture and the title topic.

It also appears here that one stands a better chance of moving forward if a smaller more concise example is examined so that is why.

I am now just looking for ui_template button examples and am finding them a bit thin on the ground.

I just get a blank screen if I try with the code above. Any idea why ?

By the way what do you think about the css button styling ?

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.