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

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

Horizontally Center Freeform Snaking List in a panel

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Horizontally Center Freeform Snaking List in a panel

    I've been struggling for a while with this issue. I have read some related posts but it seems nothing is working with this particular list.
    I am using the Ipad version 1 to preview the ux component and its resolution allows to display 4 items per row, but in the Ipad Air it can display 5 items.
    When in the Ipad 1 there is a wide gap in the right just a little narrower than the item dimension and the list seems to be left align or the center aligned container is not being honored.
    Any idea how to accomplish this so no matter how many are listed per row it always center the list?

    Screenshot_2.jpg

    #2
    Re: Horizontally Center Freeform Snaking List in a panel

    try setting the width to 100% and margin:auto

    Comment


      #3
      Re: Horizontally Center Freeform Snaking List in a panel

      to the container or the list?

      Comment


        #4
        Re: Horizontally Center Freeform Snaking List in a panel

        It looks like you can't use a percentage to control the width. but if you hard set the width and use margin:auto it will honor it. Have you worked with the responsive layout feature in AA? I have not but it may be worth a look if you need to developed for devices with different resolutions and screen size.

        Comment


          #5
          Re: Horizontally Center Freeform Snaking List in a panel

          I placed a container around the list control and I can hard set the width to let's say 10in and use margin:auto and it honors it.

          Comment


            #6
            Re: Horizontally Center Freeform Snaking List in a panel

            It seems the list generates a gap on the right, please take a look at the screenshot, you'll see the container border with a 1000px width. and the list inside, you can still see a huge gap on the right.Screenshot_3.jpg

            Comment


              #7
              Re: Horizontally Center Freeform Snaking List in a panel

              How hard would it be to provide the component you are working on? Is that possible? I've wrestled with these types of issues quite a bit and feel like I could get you there but it would be easier if I could work with your ux.

              Comment


                #8
                Re: Horizontally Center Freeform Snaking List in a panel

                it will take me some time to get you a sample from the table...

                Comment


                  #9
                  Re: Horizontally Center Freeform Snaking List in a panel

                  Here is a testcase based on AlphaSports.
                  uxtest.zip

                  Comment


                    #10
                    Re: Horizontally Center Freeform Snaking List in a panel

                    Double post... how come?

                    I run into this a lot when dealing with images... centering height and width. Most of the time I don't care about width since I know my item width and device width. But... height was a bit of pain because I had other stuff going on the list.

                    I think Multiple Layouts may hold an answer to this but I haven't looked into it enough yet. I also don't know what effect this will have for a Retina vs non-Retina... so you're mileage may vary.

                    Having a container wrapped around the List is a good start. The general idea is to get the width of the device. Based on the width figure out how many items will fit into that width. If you've set your item width to 200px, by default (I think) Alpha adds 28px... so you've got a total item width of 228px. If you're on an iPad Landscape you've got about 1089px in Width. 1089 / 228 = 4 with 177px left over. 177 - 28 = 149 / 2 = 74.5 which should be the margins you need to centre the list.

                    Try this in your List OnListDraw event.

                    Code:
                    var containerWidthPX = $('device.screen').style.width;
                    var containerWidth = containerWidthPX.slice(0, -2);
                    var nbrCols = parseInt(containerWidth / 228);
                    colWidth = nbrCols * 228;
                    remainWidth = containerWidth - colWidth - 28;
                    listMargin = remainWidth / 2;
                    listMargin = listMargin + "px";
                    $('{dialog.ComponentName}.V.R1.CONTAINER_1').style.marginLeft = listMargin;
                    $('{dialog.ComponentName}.V.R1.CONTAINER_1').style.marginRight = listMargin;
                    I'll bet there a way easier way of getting this done... but this seems to be close...

                    In your List Layout Properties, you have your Item Width set to 200px. You also have to set your Item Height... e.g. 50px so that your items are lined up nicely. It depends on what's in the table.
                    Attached Files

                    Comment


                      #11
                      Re: Horizontally Center Freeform Snaking List in a panel

                      Sorry for the double posting, when I tried to access it I was getting a 404 error, that's why I wrote it again.
                      Thank you David, it works perfectly, I'll save the code because I know I will be using it a lot.

                      Comment


                        #12
                        Re: Horizontally Center Freeform Snaking List in a panel

                        The code is not allowing the list to render correctly in the ipad, it works ok in the alpha Live Preview but when doing a remote test it doesn't work and also the other controls (spin controls I have) are not filtering the list as they are supposed to. As soon I comment the code everything is back to normal in the Ipad.

                        Comment


                          #13
                          Re: Horizontally Center Freeform Snaking List in a panel

                          Well that's not good. I didn't realize the list wasn't working. I'm getting different results. Commenting out the code doesn't help. Getting rid of the container helps. Try this. Get rid of the container and in the code... where you set the margin for the container, do this instead. Set the margin of the panel body. Not sure about this but you may not need to set the right margin... just the left.

                          Code:
                          $('{dialog.ComponentName}.R1.PANEL.0.BODY').style.marginLeft = listMargin;
                          If this works... let us know if the effect is different for a retina vs non-retina iPad. Thanks.

                          Overall... remember that we're messing with the DOM here... which is usually not the best practice. Specially when Alpha has a lot going on.

                          Comment


                            #14
                            Re: Horizontally Center Freeform Snaking List in a panel

                            Well that doesn't work either... does under LivePreview and rendered on a browser... but not the device. It seems that something isn't there that we're going after. So... go after something else. This works on the device...

                            Code:
                            var containerWidthPX = $('{dialog.ComponentName}.R1.BODYINNER').style.width;
                            var containerWidth = containerWidthPX.slice(0, -2);
                            var nbrCols = parseInt(containerWidth / 228);
                            colWidth = nbrCols * 228;
                            remainWidth = containerWidth - colWidth - 28;
                            listMargin = remainWidth / 2;
                            listMargin = listMargin + "px";
                            $('{dialog.ComponentName}.R1.PANEL.0.BODY').style.marginLeft = listMargin;

                            Comment

                            Working...
                            X