Vertical alignment for DataSet Ticker

Introduction

Allow vertical alignment of text in DataSet Ticker as it can be done in the Text widget.

User Story

The text widget allows under “EFFECT” to align the content vertically. Doing that manually in the DataSet ticker is cumbersome.
I would like to have the same Vertical Align drop-down available for the DataSet ticker. The settings are under “EFFECT” in the text widget and under “APPEARANCE” in the DataSet ticker.
…maybe also align the naming of the tabs by renaming it “APPEARANCE” in the text widget as well since it contains more than the effect setting?

1 Like

Same issue for me.
I tried to set css like this :
p {
font-family: verdana;
color:#ffffff;
font-size: 20px;
vertical-align: middle;
text-align: center;

}
Font Size and color is working but the vertical-align not.
If someone fixed it, please share it :slight_smile:
Best regards,

I think this will work for you. I got the base from someone at Xibo back then, I think…or reading it somewhere:

Set the text in Main like this in code with your own text element:

<div class="container">
    <span class="text">[Text|20]</span>
</div>

And the stylesheet: set height in the CSS to the area height (this will center everything):

.container {
    height: 216px;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.text {
    font-family: verdana;
    color:#ffffff;
    font-size: 20px;
}

Hi Mark,
Thank’s. It’s working fine :slight_smile:
Have a nice week-end.
Best regards,
Philippe