DBR Skinning 1.2.1


#1

Hey,

In the previous releases of Canvas I was able to skin dbr references with a picklist using things like the following:

tm1-ui-dbr-small > select {
font-size: 10px;
}

…for picklists.

.tm1-ui-dbr-small > form > input {
font-size: 10px;
}

For the new dbr picklists I can see that it’s using .form-control, .input-group and .input-group-addon but i’ve not been able to style the new picklists via tm1-ui-class.

Can you point me in the right direction?

Cheers,

Jack


#2

…for anyone that’s interested, there’s an additional class in the new picklists:

.tm1-ui-dbr-large .tm1-ui-select .input-group .form-control {....

That applies the tm1-ui-class (adding .tm1-ui-select).

Jack


#3

In the prior build to 1.2.1 i was able to style a tm1-ui-dbr picklist to wrap text where there was a lot of content, like so:

`.tm1-ui-dbr-large > select {
  font-size: 11px;
  text-align: left !important;
  text-align-last: left !important;
  height: 85px;
  word-wrap: break-word;
  text-overflow: inherit;
  white-space: normal;
  border-radius: 0px;
  padding: 1px;
}

.tm1-ui-dbr-large > form > input {
  font-size: 11px;
  text-align: center;
  height: 85px;
  word-wrap: break-word;
  text-overflow: inherit;
  white-space: normal;
  border-radius: 0px;
  padding: 1px;
}

I know the new picklists have changed to no longer use a select element, but an input element instead, the last .css class above would wrap the “displayed” item in the group, and then the rest would be unwrapped.

Is this something I can still achieve now the picklists work in the new way, i’ve tried a few styles to no avail, so was looking for some guidance as to if this is no longer possible?

Cheers,

Jack


#4

Hi Jack,

It isn’t possible to wrap because an input box is being used for pick lists. You will need to make it wider instead.


Tm1-ui-dbr directive alignment
#5

Hey Tim,

Thought that was the case, cheers for the confirmation.

Jack