[Patternfly] [PatternFly] Alignment of buttons within wizard

Andres Galante agalante at redhat.com
Wed Nov 2 15:22:57 UTC 2016


You make a lot of sense Josephine. The right alignment actions are great on
the context of a modal since we know the width of the container.

But since patternfly is fluid having right alignment actions on a full
screen footer push the actions either too far or too close from the content.

I agree that in this examples the btns should be on the left, and for your
specific case this layout works.

Now, this wizard seems odd in a full page as a common component. When the
form is small, the actions are way too detached from the form, the eye jump
is huge. Having a footer fixes to the bottom of the screen can lead to
challenges in different screen sizes and the overall structure doesn't seem
not reusable enough.

The question is do we need to redesign the wizard to work in a  full page
environment?

Also how does this wizard behave on a mobile environment?



On Wed, Nov 2, 2016 at 12:09 PM, Josephine Qian <joqian at redhat.com> wrote:

> Hi,
>
> We chatted about the alignment of buttons of *form within a page *yesterday
> on Slack. According to PatternFly's current implementation, those buttons
> are left aligned. What I wanted to make sure if that I am following this
> rule in the right context.
>
> Here you can see 2 iPaaS screens. This is a *wizard* and users will need
> to go thru multiple steps to finish the task. The visualization is
> presented on the left of every screen. On the right, sometimes we have a
> form, sometimes we have a card view or list view. Does anyone has any
> different suggestions? I can see people argue that we have some
> right-aligned buttons in the list view...Interested about what you think!
> Thanks!
>
> Josephine
>
> [image: Inline image 1]
>
> [image: Inline image 2]
>
> --
> Josephine Qian
> Twitter: @qhjj1990
> Blog: https://medium.com/@qhjj1990
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/64c2243b/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-11-02 at 10.42.39 AM.png
Type: image/png
Size: 95870 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/64c2243b/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-11-02 at 10.38.05 AM.png
Type: image/png
Size: 66106 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/64c2243b/attachment-0001.png>


More information about the PatternFly mailing list