Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook
Devcon 2020 Goes Virtual! LEARN MORE >

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Left, Center, Right Align question in One Panel Header

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Left, Center, Right Align question in One Panel Header

    On a panel header - I have two buttons, one on each side inside the header and a static text item at the center of the header.
    I would like to setup correctly to see the buttons on the two extreme sides of the panel header and the static text item
    exactly in between.
    Did not use the 'spacer' and 'Tabstop' because I think these may not work consistently on the different orientation and different devices (I think?)
    (Tabstop may bring the button-2 to extreme right on one device/portrait orientation, but leave it mid way (and not extreme right) for other device/landscape orientation).

    So, I used a FlexLayout container inside the panel header.
    Within the FlexLayout container I have 3 regular containers each aligned to 1) Left, 2) Center and 3) Right (document says contents are aligned - not the container itself - & that is what I need.)
    The contents of the 3 regular containers are 1) Button-1, 2) Text and 3) Button-2

    The problem is that even after doing this the Button-2 is not being shown at the extreme right, but right next to the Text with little space in between.
    Ideally, this should have shown as
    Button-1 <---------Space----------> Text <---------Space----------> Button-2
    but is shown as
    Button-1 <---------Space----------> Text <-LittleSpace-> Button-2

    Design Info: (I may be over doing this - but should work in theory)
    PanelHeader: Container_10 (sub-type: PanelHeader)
    FlexLayout: Container_22 (sub-type: FlexLayout) - layout width setting:flex(1),flex(1),flex(1)
    Container: Container_21 (sub-type: None) - Container alignment: Left, Width: 33%
    Button-1
    Container End: Container_21
    Container: Container_19 (sub-type: None) - Container alignment: Center, Width: 34%
    Static Text: Signature
    Container End: Container_19
    Container: Container_20 (sub-type: None) - Container alignment: Right, Width: 33%
    Button-2
    Container End: Container_20
    FlexLayout End: Container_22
    PanelHeader End: Container_10
    I made sure that there are no line break for any objects above.

    Please help. Thanks.Aligh_right_capture.JPG
    Last edited by JPMPA; 10-09-2013, 12:41 PM.
    Tags: None
    #2
    Re: Left, Center, Right Align question in One Panel Header

    Option #1
    Option #2
    • Create your buttons in the header
    • HIDE THEM ALL
    • Create a free-form container
    • In your free-form container, create a table with three cells
    • Put in your buttons and your text
    • NOTE: there can be issues with table width and there are tricks for this too... ask if required


    Helpful note:
    • There are 1000+ Alpha videos
    • It may seem overwhelming... but it is not
    • In your Alpha developer, go to the HELP MENU
    • Then select VIDEO FINDER
    • And then use the "search field"
    • For example, searching for "UX" and "ALIGN" can be done by entering: ux&&align


    Took me a while to figure this out also insofar as it is not initially obvious.

    Comment

      #3
      Re: Left, Center, Right Align question in One Panel Header

      Thank you Allan.

      Comment

        #4
        Re: Left, Center, Right Align question in One Panel Header

        Allan, Please provide help with issues with table width also. I appreciate your help. Thanks!

        Comment

          #5
          Re: Left, Center, Right Align question in One Panel Header

          You'll need to provide some detail:
          1. Screen shot of your current panel when in "live preview"
          2. Screen shot of the underlying UX definition (exploded panels)
          3. OR... you could export your component (will go to a zip file) and post it here.

          Comment

            #6
            Re: Left, Center, Right Align question in One Panel Header

            Thanks - please see attachment

            I changed the html to aligh left center and right but no effect.

            <table width="100%" border="0" bordercolor="" bordercolorlight="" bordercolordark="" bgcolor="" cellpadding="0" cellspacing="0" align="Center" >
            <tr>
            <td align="left"> {button:BUTTON_29}</td>
            <td align="Center">{statictext:STATICTEXT_10}</td>
            <td align="right">{button:BUTTON_25}</td>
            </tr>
            </table>


            .Capture107.JPGCapture106.JPGCapture105.JPGCapture104.JPGCapture103.JPG
            Last edited by JPMPA; 10-09-2013, 05:12 PM.

            Comment

              #7
              Re: Left, Center, Right Align question in One Panel Header

              Right off the bat I see part of the problem.

              Unfortunately you can't use a width of 100% in a table.

              Why?

              The UX component, and particularly the table, does not know what the dimensions of your device or browser will be. What then is 100%?

              So right away, try a width of 310px (this is just a pixel or so smaller than the typical iPhone screen).

              width=310

              You can also specify a width within each <TD> to further govern things:

              <td width=72 align=center valign=left>LEFT</td>
              <td width=166 align=center valign=middle>CENTER</td>
              <td width=72 align=center valign=right>RIGHT</td>


              This tends to work nicely but it has a limitation. The overall free-form container will align to the left of the screen.

              If you want to center the entire guts of the header, you can wrap all those guts (or at least the free-form container) in another container.

              Yes... I know that sounds odd. However, this technique works for a LOT of things. Somewhere in the execution order of an Alpha Five UX component, the "container" objects does get informed about the width of the device or browser. So, it will properly CENTER.

              So highlight your free-form container, "add a container" and choose to put it AROUND your target.

              Then change the property of the wrapping container to be "centered". This will work for all device sizes and orientations.

              I'm not in a position to upload screen shots... but I do have examples.

              Comment

                #8
                Re: Left, Center, Right Align question in One Panel Header

                Originally posted by parkjammer View Post
                You can also specify a width within each <TD> to further govern things:

                <td width=72 align=center valign=left>LEFT</td>
                <td width=166 align=center valign=middle>CENTER</td>
                <td width=72 align=center valign=right>RIGHT</td>
                Sorry, that should have included "left/center/right" for the "align" and "middle" for "valign"

                <td width=72 align=left valign=middle>LEFT</td>
                <td width=166 align=center valign=middle>CENTER</td>
                <td width=72 align=right valign=middle>RIGHT</td>

                Comment

                  #9
                  Re: Left, Center, Right Align question in One Panel Header

                  Allan, I will try what you said.


                  Meanwhile, I am still wondering why my original plan did not work - where I had three containers and all of them were in a flexlayout. And first container (contents - 1 button) were left aligned, second container (content - text) was center aligned and third one container (content - 1 button) was right aligned with in it.

                  Looks good on paper but did not work.

                  Capture110.JPG
                  Last edited by JPMPA; 10-09-2013, 06:00 PM.

                  Comment

                    #10
                    Re: Left, Center, Right Align question in One Panel Header

                    I don't have the flex-layout component. I know that was supposed to come out in the next update (it was new about a month ago) but I haven't received an upgrade notice. I'll ping Alpha.

                    Comment

                      #11
                      Re: Left, Center, Right Align question in One Panel Header

                      In your original method I might suggest removing the 100% from each of your sub-containers since you are also specifying they should "flex". I can't test it since I don't have that component in my version. But I've definitely had to play with the container and/or LIST widths depending on what I was doing at the time.

                      Comment

                        #12
                        Re: Left, Center, Right Align question in One Panel Header

                        Good Information
                        Last edited by Mkpatil; 10-09-2013, 11:01 PM.

                        Comment

                          #13
                          Re: Left, Center, Right Align question in One Panel Header

                          Problem solved - Within the Header container for a panel header and - With just 3 containers with sub-type=none, each for left button, center text and right button, I was able to align the buttons to the extreme sides and text at the center. Did not need to use flexlayout. Works fine now for iphone/ipad all orientations. Just had to define the widths as 10%, 80% and 10% respectively. The panel header container was set to left alignment. The three inside containers were set to left, center and right alignment respectively.
                          *If the right button goes to next line - use center container width as 76% instead of 80%. Do not use any line break for any object within the header container.

                          C-1.jpgC0.jpgC4.jpgC3.jpgC1.jpg
                          Last edited by JPMPA; 10-18-2013, 12:54 PM.

                          Comment

                          Previous template Next
                          Working...
                          X