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

How to make repeating sections the same height

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

    How to make repeating sections the same height

    Hello all,

    I have a UX with 2 repeating sections next to each other. Repeating section 1 (R1) has one field that is a dropdown. Repeating section 2 (R2) has two fields both textboxes. When they display next to each other the height in R1 is longer than R2.

    NotLiningUp.jpg


    If I change the dropdown to a lookup and use "Stored value is different than display value", then R1 and R2 are almost the same but not quite. I know I could just laugh it off as, "it's close enough for government work", but one of the folks I work with noticed it immediately so I don't think I can ignore it. Any advice?


    NotLiningUp2.jpg

    #2
    Re: How to make repeating sections the same height

    A simple, very manual, solution is to change the css class... however, this would affect all controls of that class. E.g. you're using the GrBlue style... is that right?

    For me a GrBlue Dropdown has an offsetHeight (that's the one you want to check) of 27px. The Class Name is GrBlueEdit. The Local CSS definitions property would be...

    Code:
    .GrBlueEdit {
        height: 27px;
    }
    But, this would affect ALL GrBlueEdit controls. By the way, there is a 2px difference between a dropdown (27px) control and a textbox (25px) control.

    If you didn't want to do this then, after render, you could go get the offsetHeight of one of the largest controls (dropdown) and then loop through each of the 2nd repeating sections... changing the height to match.

    rs_size.PNG

    Comment


      #3
      Re: How to make repeating sections the same height

      You could also just make the height property of the order & objective text controls 27px...assuming this is GrBlue and category is a drop down control.

      Ashampoo_Snap_Friday, April 19, 2019_09h20m35s_001_.png
      Mike Brown - Contact Me
      Programmatic Technologies, LLC
      Programmatic-Technologies.com
      Independent Developer & Consultant​​

      Comment


        #4
        Re: How to make repeating sections the same height

        Hi guys, thanks for replying.

        It's actually the MobBlue style but I changed it to GrBlue and adjusted the size of the dropdown to 27px (see the result) and it is good. Now my question is, how/where did you find those text control heights or 25/27 px? If I know where they are I can go back to MobBlue and use the same method.

        I've only just moved to V12, lots of neat features but I'm sure I'll have more questions

        Thanks

        -JohnLiningUp27px.jpg

        Comment


          #5
          Re: How to make repeating sections the same height

          Chrome debugger is what I use. Go to working preview, open the chrome debugger (it's an option at the bottom of working preview), go to the elements tab in the debugger. Now you can use your mouse to select specific elements. You can also use the pointer to select elements on the screen. Getting comfortable using debugging tools is important for development work.

          Ashampoo_Snap_Friday, April 19, 2019_09h42m30s_003_.png

          Short video: Click Me
          Last edited by mikeallenbrown; 04-19-2019, 10:49 AM. Reason: added video l ink
          Mike Brown - Contact Me
          Programmatic Technologies, LLC
          Programmatic-Technologies.com
          Independent Developer & Consultant​​

          Comment


            #6
            Re: How to make repeating sections the same height

            Thanks again Mike,

            I followed the instructions but I don't see the height in pixels unless I specifically enter .27px into the field. Am I missing something?

            Thanks again.

            Debug1.jpg

            Comment


              #7
              Re: How to make repeating sections the same height

              Hi guys,

              Here's yet another issue. I must be doing something wrong. I didn't think this was going to take so long to get things lined up.....Ignoring the above issue, I did a live preview of the screen and it's a little off but looks okay for now.

              LivePreview1.jpg

              Then I click on the Google Chrome button to see how it looks in the browser and it doesn't look okay at all. I'm at a loss having not used a UX before. What I want to have is the 2 top repeating sections at least start out the same width and height. I know once a user clicks the + to enter a new category it will go off but at least if there are the same amount in each repeating section I'd like it to look good and line up. For the 3rd repeating section below I'd like that to line up also. It's very close in Live Preview but goes haywire in the browser. How do I accomplish this?

              LivePreviewInBrowser.jpg

              Thanks (again)

              -John

              Alignment.jpg

              Comment


                #8
                Re: How to make repeating sections the same height

                Originally posted by Jberry View Post
                Thanks again Mike,

                I followed the instructions but I don't see the height in pixels unless I specifically enter .27px into the field. Am I missing something?

                Thanks again.

                [ATTACH=CONFIG]45788[/ATTACH]
                The height in pixels is there in your screen shot: 448 x 25.
                Mike Brown - Contact Me
                Programmatic Technologies, LLC
                Programmatic-Technologies.com
                Independent Developer & Consultant​​

                Comment


                  #9
                  Re: How to make repeating sections the same height

                  DOH!

                  Comment


                    #10
                    Re: How to make repeating sections the same height

                    You're using a TextBox control set up as a Lookup, Edit-Compbo. Using this control involves a lot more CSS... and as your attachments show, the textbox is actually wrapped in a Table. This adds 2 more pixels to the height.

                    If Height is not specifically set, then height does not show when inspecting HTML. If you choose the Select arrow (next to Elements in the toolbar, while inspecting) then you can hover your cursor over the Textbox, and it's height will be displayed. Now hover in the blue area just outside the Textbox and you'll see it's height. It's this overall height you want.

                    Can you change to a Dropdown control - it's easier to muck around with. If so, then using MobBlue you'll see it's height is 33px. Then you can change your Textobx control (not a Lookup) height to 33px.

                    Comment


                      #11
                      Re: How to make repeating sections the same height

                      Hi David, I changed it to a dropdown, changed height etc. all okay.

                      I also removed any formatting on the frames, ie: removed the frame widths. If I put a width for that 3rd repeating section and make it scrollable it splits the repeating section in half and puts a scroll bar in the middle, so I removed its width.

                      Scrollable2.jpg


                      I changed all the repeating sections to scrollable but now when opening they are all at the bottom of the repeating section which is ugly and just plain wrong.

                      Scrollable.jpg

                      All I'm trying to do is something like this. I wouldn't have thought it would be this difficult so it has to be something I'm doing or not doing but what, I just don't know :(

                      screen.jpg

                      Thanks

                      -John

                      Comment


                        #12
                        Re: How to make repeating sections the same height

                        o-k-a-y, I gave up. Two days going on 3 isn't worth it. I reverted back to non-scrolling and added a spacer between the 2 top repeating sections.

                        I'd love to know how to get it to work like I wanted though if someone can point me towards a solution.

                        Thanks

                        -John

                        screen2.jpg

                        Comment

                        Working...
                        X