Alpha Video Training
Results 1 to 12 of 12

Thread: How to make repeating sections the same height

  1. #1
    Member
    Real Name
    John Berry
    Join Date
    Nov 2007
    Location
    Maryland, USA
    Posts
    626

    Default 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. #2
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,550

    Default 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

  3. #3
    "Certified" Alphaholic mikeallenbrown's Avatar
    Real Name
    Mike Brown
    Join Date
    Nov 2009
    Location
    United States
    Posts
    1,746

    Default 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

  4. #4
    Member
    Real Name
    John Berry
    Join Date
    Nov 2007
    Location
    Maryland, USA
    Posts
    626

    Default 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

  5. #5
    "Certified" Alphaholic mikeallenbrown's Avatar
    Real Name
    Mike Brown
    Join Date
    Nov 2009
    Location
    United States
    Posts
    1,746

    Default 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 at 10:49 AM. Reason: added video l ink
    Mike Brown - Contact Me
    Programmatic Technologies, LLC
    Programmatic-Technologies.com
    Independent Developer & Consultant

  6. #6
    Member
    Real Name
    John Berry
    Join Date
    Nov 2007
    Location
    Maryland, USA
    Posts
    626

    Default 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

  7. #7
    Member
    Real Name
    John Berry
    Join Date
    Nov 2007
    Location
    Maryland, USA
    Posts
    626

    Default 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

  8. #8
    "Certified" Alphaholic mikeallenbrown's Avatar
    Real Name
    Mike Brown
    Join Date
    Nov 2009
    Location
    United States
    Posts
    1,746

    Default Re: How to make repeating sections the same height

    Quote 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.

    Debug1.jpg
    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

  9. #9
    Member
    Real Name
    John Berry
    Join Date
    Nov 2007
    Location
    Maryland, USA
    Posts
    626

    Default Re: How to make repeating sections the same height

    DOH!

  10. #10
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,550

    Default 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.

  11. #11
    Member
    Real Name
    John Berry
    Join Date
    Nov 2007
    Location
    Maryland, USA
    Posts
    626

    Default 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

  12. #12
    Member
    Real Name
    John Berry
    Join Date
    Nov 2007
    Location
    Maryland, USA
    Posts
    626

    Default 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

Similar Threads

  1. DBF's, xbasic and UX Repeating Sections
    By Ronald Anusiewicz in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 05-27-2017, 10:12 AM
  2. Report with 2 repeating sections
    By joegrun4 in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 05-04-2015, 01:28 PM
  3. Refresh All Repeating Sections on UX
    By Medic1196 in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 08-26-2014, 05:33 PM
  4. Labels for repeating sections
    By bob9145 in forum Application Server Version 11 - Web/Browser Applications
    Replies: 6
    Last Post: 08-26-2014, 10:52 AM
  5. Help with dialog and repeating sections
    By mikew2 in forum Application Server Version 11 - Web/Browser Applications
    Replies: 5
    Last Post: 06-05-2013, 10:18 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •