It is currently 10 December 2022, 6:33 Advanced search

Bootstrap: how to keep sum fields aligned with columns

Questions and answers on how to best use Instant Developer

Bootstrap: how to keep sum fields aligned with columns

Postby ljwilson » 11 June 2018, 18:51

Although this isn't officially supported as of InDe 18.0 r6:
http://doc.instantdeveloper.com/eng/?ARTID=2FC2885D-90F7-4F9A-A760-79F90628DBF8&LANG=eng
This functionality is not supported in applications that use the Bootstrap Theme.


I've run into the need for this a couple of times. I've worked out how to do it using some JavaScript executed in the Forms OnResize event using ExecuteOnClient.

The JS Code (with parameters used by FormatMessage)

Code: Select all
var h1 = document.getElementById('|1').getBoundingClientRect();
var d1 = document.getElementById('|2');
d1.style.position = "fixed";
d1.style.left = h1.left + |3 + 'px';


The idea is to get the left position of the column header that you want the sum field to be under. Then adjust the sum field's left position to be the same. Bootstrap handles all of the sizing and positioning except for the x coordinates. In my case the headers were not right-aligned, but the values were, so I needed to adjust it 10px (see example).

I layout each sum field to be the same width, have the same resizing, and be directly under its parent list column as seen in the ide. So all we have to do is get the left position correct.

This code fires in the forms on resize event. Here is an example from a working application:
2018-06-11_14-37-40.png
2018-06-11_14-37-40.png (112.1 KiB) Viewed 2150 times


...jack
ljwilson
 
Posts: 678
Joined: 26 November 2013, 14:15

Re: Bootstrap: how to keep sum fields aligned with columns

Postby Micropedia » 24 March 2022, 10:56

could you send a small sample project please?
User avatar
Micropedia
 
Posts: 1047
Joined: 4 February 2018, 11:56
Location: Napoli

Re: Bootstrap: how to keep sum fields aligned with columns

Postby ljwilson » 26 March 2022, 15:38

Sure!
Sum Alignment Example Express.zip
InDe 2.15 r6 Express Version
(508.63 KiB) Downloaded 59 times


This example has one sum column, and uses the zen bootstrap theme since I saw you mention it in the Italian Forum.

Notice that I have open forms on the left turned-off. Since it appears/disappears depending on the width of the browser window, some extra work would be required to make the sum field align properly with it enabled.

...jack
ljwilson
 
Posts: 678
Joined: 26 November 2013, 14:15

Re: Bootstrap: how to keep sum fields aligned with columns

Postby Micropedia » 27 March 2022, 9:45

Cool it works fine!
Thanks Jack
User avatar
Micropedia
 
Posts: 1047
Joined: 4 February 2018, 11:56
Location: Napoli

Re: Bootstrap: how to keep sum fields aligned with columns

Postby ljwilson » 27 March 2022, 14:53

Marco,

Great!

Glad it helped.

...jack
ljwilson
 
Posts: 678
Joined: 26 November 2013, 14:15

Re: Bootstrap: how to keep sum fields aligned with columns

Postby massimo.z » 7 October 2022, 14:56

Mi rifaccio a questo vecchio post che speravo mi aiutasse ma nonostante il codice inserito sia uguale a quello dell'esempio, nel mio pannello la somma appare per poi subito scomparire, penso quanto interviene l'evento resize del pannello, visto che se lo commento riappare in posizione errata.

Sia il codice che il debug è identico a quello confrontato con l'esempio Sum Alignment Express.

Quindi non capisco quale sia il problema.

C'è qualche anima pia che mi sa dare un aiuto

Grazie in anticipo

Massimo Z.
Attachments
AllineaSomma_BS.PNG
AllineaSomma_BS.PNG (44.85 KiB) Viewed 522 times
massimo.z
 
Posts: 198
Joined: 22 December 2015, 16:16

Re: Bootstrap: how to keep sum fields aligned with columns

Postby ljwilson » 7 October 2022, 17:31

I'm assuming the example project worked for you.

If you can create a simple example project based on your app which demonstrates the problem and post it, then maybe we could help.

...jack
ljwilson
 
Posts: 678
Joined: 26 November 2013, 14:15

Re: Bootstrap: how to keep sum fields aligned with columns

Postby ljwilson » 11 October 2022, 18:29

I think the problem you are having is you have a forms list on the left, which as I mentioned previously this example depends on the menu being on top. I've created a slightly more complex example, which can handle the menu being on the top or on the left side.

The attached version has the menu set to the left, but you can change it to top and recompile and it should still work.

For this version I use the trick to create a random class name, assign it to the forms list menu, then in the JavaScript find the element with this same classname, then get its parent object. If the parent object's classname has navbar-left in it, then it is a top menu. Otherwise assume it is the left menu, and adjust accordingly.

Sum Alignment Example V2 Express.zip
Express version InDe 22.0 r18
(513.46 KiB) Downloaded 11 times


...jack
ljwilson
 
Posts: 678
Joined: 26 November 2013, 14:15


Return to Tips & Tricks

Who is online

Users browsing this forum: No registered users and 12 guests

cron