3 replies Latest Post - ‏2013-08-02T16:01:13Z by jbooth
9 Posts

Pinned topic Button Alignment

‏2013-07-31T15:28:20Z |

I'm just getting back to WEF after a break of nearly a year and only slowly picking up things...

For example -

In a Details Page, I would like to ensure that the "Back, Edit, Delete" buttons are always on the left hand side of the page. As far as I can see the standard alignment is "centered" .   I have a situation where one of the fields in the Details page is particularly wide (I'm sure I can fix this using Data Field Settings builder) but it has the effect of pushing the three button combination way out to the right ... and the user sometimes misses this.

Any idea how I make sure the buttons stay on the left?



  • kevintap
    111 Posts

    Re: Button Alignment

    ‏2013-07-31T17:18:11Z  in response to DonH

    In order to change the layout of your HTML, you would need to modify the base page templates which are used.  Since you're talking about a details view, I assume you're using View and Form or DSUI.  I'm not aware of any base pages used by View and Form or DSUI that would not have the buttons left aligned, or that would have buttons affected by the width of the columns in the data.  I'd suggest inspecting the HTML markup in a browser debugger like Firebug or the Chrome debugger and see if you can determine why the buttons are located where they are.

    The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.

    • mburati
      425 Posts

      Re: Button Alignment

      ‏2013-07-31T17:25:56Z  in response to kevintap

      Note,  you don't necessarily have to change the page layout, to change the actual rendered layout,  unless the changes are significant in nature (changing structure, as opposed to just positioning).

      As with most current/modern web applications,   WEF based webapps are positioned using CSS.    As Kevin mentions,  the best way to see why something is placed where it is in the browser (whether built with WEF or not) is to use the browser's inspect element / debugging tools to look at which styles/stylesheets affect each element of the DOM, so you'll know what style(s) to change.

      Recent versions of WEF (which you should be using if you're doing new development)  use a WEF UI Theme to set the base pages and stylesheets for use by high level builders (such as V&F, DSUI etc).   A Theme can be set via property for the whole project and/or you can set a Theme for a particular model with a Theme builder at the top of the model's builder call list.   If you're building your own Theme file  (which is recommended if you need to customize a bunch of portlets/models in the same way for your branding) it's best if you have all the stylesheet options pointing at a single stylesheet for your app, rather than a bunch of individual stylesheets, to minimize the number of http requests created.

      I hope that info helps,
      ..Mike Burati 
      The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.
  • jbooth
    11 Posts

    Re: Button Alignment

    ‏2013-08-02T16:01:13Z  in response to DonH

    And just one more comment on available techniques...

    To easily create custom HTML for a page (including the data fields), you can use the right-click command on a page for "Export HTML for Customization".   If you choose "Complete Page" you can customize the layout of both data fields and buttons/etc.   This will add an Imported Page builder to your model with the "Replace Contents" option set.   This lets you override the HTML layout for a page regardless of which builder initially created the page.

    I think  that the CSS styling suggestion may be simplest/best  in your case, but I just wanted to make you aware of the custom HTML feature.