Ticket and Text not full width with Up/Single/etc

[Alan McFarlane]

When using certain Text and Ticker settings their content is not full-width/centred. So for instance if you have a sequence of images and text items, then the user can be disconcerted by the content bouncing left and right and left.

That is, a sequence of images all display in dead centre, then suddenly the (narrow) text item is left aligned, and then the next image is again dead centre. So the viewer gets a sore head. :-,) The text-align style etc is properly set on the text content. Latterly I realised that it is 'Direction' dependent. Thus:

Module Direction => Is full width/centred?
Text None Yes
Ticker None Yes
Image - Yes
Text Up No
Ticker Up No
Ticker Single No
Text Left Yes
Ticker Left Yes

So None (and Left) is fine but Up and Single is broken. (Presumably Down similarly??)

Now follows some guesswork……
From inspecting the HTML DOM tree in a browser debugger (when using the in-browser preview and also .NET client) this appears(!) to occur because the Up and Single (etc) types place the content item(s) in absolute positioned elements and they don't have their width known to them. Therefore those elements size themselves to fit their content rather than being sized to fit their larger (parent) region.

Apparently one magic potion to fix this is by setting style "right:0px;" which make them know their parent width. However a) There may be better solutions. b) I make absolutely no clue where this change needs to be made — or even if it can be made! If it's deep within the JavaScript libraries…

[Dan Garner (dangarner)]

Up and Down can be solved with:

// Correct for up / down
if (options.direction == "up" || options.direction == "down")
    $(this).children().children().css({"white-space": "normal", float: "none"});

Single requires a bit more investigation!

[Dan Garner (dangarner)]

Single mode resolved with:

// Set the width on the cycled slides?
$(".item", this).css({
    width: $("body").css("width")
});

[Alan McFarlane (alanjmcf)]

Grand, thanks Dan. Well done in beating HTML positioning!
--
Sent from my phone

> On 16 Oct 2014, at 18:11, Dan Garner <email address hidden> wrote:
>
> Single mode resolved with:
>
> // Set the width on the cycled slides?
> $(".item", this).css({
> width: $("body").css("width")
> });
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> https://bugs.launchpad.net/bugs/1381211
>
> Title:
> Ticket and Text not full width with Up/Single/etc
>
> Status in Xibo Open Source Digital Signage:
> Fix Committed
>
> Bug description:
> When using certain Text and Ticker settings their content is not full-
> width/centred. So for instance if you have a sequence of images and
> text items, then the user can be disconcerted by the content bouncing
> left and right and left.
>
> That is, a sequence of images all display in dead centre, then
> suddenly the (narrow) text item is left aligned, and then the next
> image is again dead centre. So the viewer gets a sore head. :-,) The
> text-align style etc is properly set on the text content. Latterly I
> realised that it is 'Direction' dependent. Thus:
>
> Module Direction => Is full width/centred?
> Text None Yes
> Ticker None Yes
> Image - Yes
> Text Up No
> Ticker Up No
> Ticker Single No
> Text Left Yes
> Ticker Left Yes
>
> So None (and Left) is fine but Up and Single is broken. (Presumably
> Down similarly??)
>
>
> Now follows some guesswork……
> From inspecting the HTML DOM tree in a browser debugger (when using the in-browser preview and also .NET client) this appears(!) to occur because the Up and Single (etc) types place the content item(s) in absolute positioned elements and they don't have their width known to them. Therefore those elements size themselves to fit their content rather than being sized to fit their larger (parent) region.
>
> Apparently one magic potion to fix this is by setting style
> "right:0px;" which make them know their parent width. However a) There
> may be better solutions. b) I make absolutely no clue where this
> change needs to be made — or even if it can be made! If it's deep
> within the JavaScript libraries…
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/xibo/+bug/1381211/+subscriptions