How to change the CSS for Alteryx Buttons

[sjoseph1848]

I am using V2 for Alteryx: document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">')

I am attempting to align and display inline buttons. I would like to have the buttons show up on the right side of the page and next to one another. I am having difficulties getting the correct element that controls the buttons for Alteryx widgets.

    <ayx data-ui-props='{ type: "Button", widgetId: "NextButton1", label: "Next", onClick:Next} '></ayx>

    <ayx data-ui-props='{ type: "Button", widgetId: "Previous", label: "Previous", onClick:Previous }'></ayx>

Has anyone attempted and succeeded at this feat? 

[PaulN]

Hi @sjoseph1848,

Just to confirm, are you trying to do something like the following ?

        <div style="text-align: right;">
            <ayx data-ui-props='{ type: "Button", widgetId: "NextButton1", label: "Next", onClick:Next}'></ayx>
            <ayx data-ui-props='{ type: "Button", widgetId: "Previous", label: "Previous", onClick:Previous }'></ayx>
        </div>

Thanks,

Paul Noirel

Sr Customer Support Engineer, Alteryx

[JessicaS]

Hi @sjoseph1848,

Moderators note here: I moved this post over to the dev space section of community for greater visibility

[sjoseph1848]

That was very close and does move them to the left, right or center, but I am unable to get them to "display:inline" with one another as well: 

 <div style="display: inline-block;"> <ayx data-ui-props='{ type: "Button", widgetId: "NextButton1", label: "Next", onClick:Step3}'></ayx> <ayx data-ui-props='{ type: "Button", widgetId: "Previous", label: "Previous", onClick:Debug }'></ayx> </div>

[PaulN]

Hi @sjoseph1848,

Sorry but I am not sure to understand correctly what you are trying to achieve. Would you have an example or mockup please?

Thanks,

Paul Noirel

Sr Customer Support Engineer, Alteryx