NetTalk Central

Author Topic: Alignment of two browse forms side by side  (Read 102 times)

DonnEdwards

  • Newbie
  • *
  • Posts: 48
    • View Profile
    • Insights and Rants
    • Email
Alignment of two browse forms side by side
« on: July 01, 2021, 10:04:53 AM »
In my NTWS app I have a memory form that has two browse forms as procedures, next to one another.

When there are plenty of rows, the browse forms line up correctly with the top of each form at the same height.

But when one of the browses has only a few records, the tops of the form no longer line up, as shown in the screen shot. It's like a vertical centre alignment, instead of top alignment.

Note: these are not Child forms. They are two separate tables that I need to compare side by side to match up corresponding pairs. Do I need to start messing with CSS styles to fix this?

I think the styles are .nt-form-flex-row, .nt-form-grid-row but I don't want to mess with stuff I don't yet understand.

All suggestions welcome.

If you're happy with your security, then so are the bad guys

Jane

  • Full Member
  • ***
  • Posts: 195
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Re: Alignment of two browse forms side by side
« Reply #1 on: July 01, 2021, 07:12:16 PM »
Yes, you do.   ;)

If you're going to do ANYTHING with web apps, Donn, you need to plan to bite the bullet and spend some time getting a basic understanding of CSS.

Because cascading style sheets "cascade", you don't need to mess with Bruce's stuff.

Rather, your own custom CSS file can override any of his CSS settings that you need to.
And you can also specify custom CSS class elements for most of the stuff you put on a screen with NetTalk.  By adding your own class to something, you don't even need to override Bruce's (which might affect multiple places in your app).

There've been innumerable webinars where Bruce has shown how to use the Developer Tools in Chrome or other browsers to experiment with getting the look you want, then putting that little bit of CSS into your own file.  You might look at some recordings or bring this screen to the next Thursday webinar and have him show you how to approach it.

In my as-always ever-so-humble opinion....   ::)

Jane

DonnEdwards

  • Newbie
  • *
  • Posts: 48
    • View Profile
    • Insights and Rants
    • Email
Re: Alignment of two browse forms side by side
« Reply #2 on: July 02, 2021, 02:03:53 AM »
Thanks Jane

I have seen Bruce demonstrate experimenting with CSS using the Google Chrome inspect tool. And I have designed my own button for this particular app. I was just hoping there would be a setting somewhere in the multitude of NT options that would fix the problem without having to go through the CSS exercise.

If I haven't fixed it by next week I'll see if I can raise the question at the NT webinar.

Thanks for your support and encouragement
Donn
If you're happy with your security, then so are the bad guys

DonnEdwards

  • Newbie
  • *
  • Posts: 48
    • View Profile
    • Insights and Rants
    • Email
Re: Alignment of two browse forms side by side
« Reply #3 on: July 15, 2021, 09:03:54 AM »
I added the following property: align-items: flex-start;
to the following CSS

.nt-form-flex-row,.nt-form-grid-row{
   align-items: flex-start;
}
If you're happy with your security, then so are the bad guys