Aligning integer field data

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
mhugh
Posts: 6
Joined: 2019-01-02 20:26

Aligning integer field data

Post by mhugh » 2019-01-13 20:17

Hi,

I have several fields which are integer - basically just numbers (altitude, length, depth).

The data displays ok, but it's all right-aligned in the field display - looks just like Excel would do it! However, this isn't Excel and it looks wrong - other fields (varchars) are left-aligned, and all the field headers are left aligned.

So question is, how can I left-align the display of these integer field data?

(I guess I'd also ask how to adjust the right padding of the table headers? The default CSS say's it's 2px padding, but it certainly doesn't look it!

Thanks
Attachments
dbase-view.JPG
dbase-view.JPG (86.8 KiB) Viewed 261 times

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 330
Joined: 2018-04-01 10:12

Re: Aligning integer field data

Post by pböttcher » 2019-01-13 21:12

Hi,

if you have a look at

templates\caves_templateTV.html (I assume your table is named caves)

You will find the class text-right being part of your integer fields. If you remove this, you should see the numbers left aligned.

sjohn
Veteran Member
Posts: 61
Joined: 2018-05-23 09:32

Re: Aligning integer field data

Post by sjohn » 2019-01-14 09:35

What setting do you have for the field?
alignment.jpg
alignment.jpg (7.41 KiB) Viewed 241 times

mhugh
Posts: 6
Joined: 2019-01-02 20:26

Re: Aligning integer field data

Post by mhugh » 2019-01-14 12:04

Thanks pbottcher and sjohn.

I'm using Appgini 5.12 so things are not quite as they look in your screenshot, sjohn - I've attached my view of the same interface area...no alignment function.

For the same reason, perhaps (i.e. old version), I can't see any text-right class in caves_templateTV.html

The reason for using an older version is that it uses older templattes - the generated layout is much more compact and you can get more info on screen without scrolling. I don't need a responsive bootstrap design, which I find very wasteful on space requiring endless page scrolling to see your data.

Just wish the old design templates were an option in the latest AppGini version. :(
Attachments
dbase-view2.jpg
dbase-view2.jpg (26.88 KiB) Viewed 236 times

User avatar
baudwalker
Veteran Member
Posts: 98
Joined: 2015-02-03 08:08
Location: Bellingen NSW Australia

Re: Aligning integer field data

Post by baudwalker » 2019-01-14 21:54

Hi mhugh,
As you don't seem to be using these fields for calculations you could make those fields "varchar"

Barry

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 207
Joined: 2013-03-21 04:37

Re: Aligning integer field data

Post by peebee » 2019-01-14 23:31

I don't recall how/where the CSS alignment was set for templates in the pre-bootstrap versions of Appgini (and included /style.css file?) but a simple CSS class edit/addition should quickly and easily achieve what you're after.

Try using Chrome's built in "Inspect Element" to determine what class you need to edit/add. Refer here for use of the Inspector if you are unfamiliar: https://zapier.com/blog/inspect-element-tutorial/

Basically: using Chrome browser, right click on any of those right-aligned integer values in your table screenshot - select "Inspect" at the bottom of the dropdown menu. In the right hand pane of the Inspector you should see what CSS class is aligning the text right. Edit or add your own left-align CSS class accordingly to the templates/caves_templateTV.html and templates/caves_templateTVS.html files.

PS: you may actually find that your old "Table view" templates will still work with the current version of Appgini? From memory, not much has changed there other than some additional CSS classes/ids being added? You may likely need to include your old CSS file too? Just replace the new generated templates/tablename_templateTV.html and templates/tablename_templateTVS.html with your old versions and see what happens? Detail view could be an issue though, unless you are prepared to do some editing?

Also, you can quite easily compress the views of the new bootstrap templates. A few lines of additional CSS to override exisiting padding/margins and you might be amazed at how compact you can make it. Current Appgini is much better for a variety of reasons.

mhugh
Posts: 6
Joined: 2019-01-02 20:26

Re: Aligning integer field data

Post by mhugh » 2019-01-20 13:29

Sorry to be late getting back and thanks for replies.

bauldwalker - they are just figures, admittedly, but they might be totalled at the bottom of a column...(I think? if that's possible, a la Excel?)

peebee - thanks for suggestions. Yes I know how to use the Chrome and Firefox inspectors, and can often pick up a class from that. But I usually run into trouble adjusting or writing the CSS...I'm not that skilled! Interesting point about using the old templates in the newer appgini version, I might try that and see what happens. But the detail view is a more important view than the table view for this application use. I'm sure if you really know your way around CSS you could rewrite the bootstrap css - but I fear it would be more than 'one or two lines' ;) I can guarantee I'd get hopelessly lost trying to reconfigure that one! lol

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 330
Joined: 2018-04-01 10:12

Re: Aligning integer field data

Post by pböttcher » 2019-01-20 16:52

Hi,

maybe you can try in the hooks/<tablename>.php -> tablename_header function:

Code: Select all

	switch($contentType){
		case 'tableview':

                 $header="<%%HEADER%%><script type=\"text/javascript\">
	                 \$j(function(){
				 \$j('td.TABLENAME-FIELD*').addClass('text-left');
				});
	               	</script>";

Where TABLENAME is your tablename :-) and FIELD is the column that you want the change to be applied to.

mhugh
Posts: 6
Joined: 2019-01-02 20:26

Re: Aligning integer field data

Post by mhugh » 2019-01-22 13:24

peebee,

Thanks for suggestion. But I've sorted it, now - it was in the style.css file as TableHeader classes....so one bit of CSS that wasn't too difficult for me! ;)

Thanks for help. I have another issue now...in a separate thread!

Post Reply