Inline Fields without label

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
User avatar
wsiconcrete
Posts: 18
Joined: 2015-04-27 16:39
Location: SC, USA

Inline Fields without label

Post by wsiconcrete » 2020-04-17 04:55

Jan,

Unless I am missing something I guess this is a feature request for a future release. Would like to create a few rows as Inline fields but do not need/want the label to the left. This is the code I am using to generate the rows:

Code: Select all

var addon1 = new AppGiniFields(["item_2", "item_2_quantity", "item_2_price", "item_2_extended"]).inline("",[6,2,2,2]);
var addon2 = new AppGiniFields(["item_3", "item_3_quantity", "item_3_price", "item_3_extended"]).inline("",[6,2,2,2]);
var addon3 = new AppGiniFields(["item_4", "item_4_quantity", "item_4_price", "item_4_extended"]).inline("",[6,2,2,2]);
My thought is to eventually hide the div rows onload and show them onclick with an "add item" button. I notice the div's are created with a generic class and no id though, but I should be able to access them using jQuery. Would be even cooler if AG Helper assigned some type of id (maybe the var used to create the row) to the generated html for the rows though. ;)

Thanks!
Brandon

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Inline Fields without label

Post by jsetzer » 2020-04-17 05:33

Hi,

thank you for the feature request. I hope I got it right.

If you want to remove the label, you can do it this way:

Code: Select all

new AppGiniFields(["first_name", "middle_names", "last_name"]).inline("");
Just pass an empty string "" into the inline() function.

Before

chrome_RhTixa7DuE.png
chrome_RhTixa7DuE.png (2.16 KiB) Viewed 1610 times

After

chrome_uZT1Z6GTyT.png
chrome_uZT1Z6GTyT.png (6.22 KiB) Viewed 1610 times

Reason

If there is no argument, the function will use the text of the first label.
If there is an argument, the function will use that - even if is an empty string.

Hope this helps. If not, please post a screenshot/drawing of what you need.

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Inline Fields without label

Post by jsetzer » 2020-04-17 05:44

Second question:

You can access the fields' row using jQuery like this:

Code: Select all

var row = $j("#first_name").closest(".appginihelper-inline-row");
row.css("border", "3px dotted blue");
chrome_g3oXPwYG6E.png
chrome_g3oXPwYG6E.png (3.61 KiB) Viewed 1610 times

If you need an id, just add it:

Code: Select all

row.attr("id", "my-id-123");
$j("#my-id-123").css("border-color", "lime");
RIagQR2Ry9.png
RIagQR2Ry9.png (3.62 KiB) Viewed 1610 times

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
wsiconcrete
Posts: 18
Joined: 2015-04-27 16:39
Location: SC, USA

Re: Inline Fields without label

Post by wsiconcrete » 2020-04-17 14:25

Thanks for the replies Jan! Easy enough for the row id access. Just had to go back to .closest(".form-group"). The detail view is on the same page as the table, so not sure if that makes a difference, but I got that part.

As for the labels guess I should have been more clear. What I am looking for is to remove the whitespace created when I pass an empty string. Is it possible to create the row without adding a whitespace for the label. This is what it looks like when I add these inline fields below standard rows. Was hoping to get them to line up a little better.
inlinews.gif
inlinews.gif (50.8 KiB) Viewed 1599 times

User avatar
wsiconcrete
Posts: 18
Joined: 2015-04-27 16:39
Location: SC, USA

Re: Inline Fields without label

Post by wsiconcrete » 2020-04-19 05:57

Well, circled back around to this and decided to just rewrite the classes to match the row above using jQuery. Probably not ideal and definitely not something I have a lot of knowledge in, but adding this to the tv.js (combined tv+dv view) seems to have addressed the issue.

Code: Select all

jQuery(function () {
  var addonrows = new Array('#addonrow1', '#addonrow2', '#addonrow3');
  $j.each(addonrows, (function(key, value) {
  $j(value).children('.control-label').hide();
  $j(value).children('div.col-sm-9').removeClass('col-sm-9');
  $j(value).removeClass('form-group row btn-block container vspacer-md').addClass('appginihelper-layout-row row');
  $j(value).find('div.row').removeClass('row');
  $j(value).find('div.col-sm-6').removeClass('vspacer-sm col-xs-12 col-sm-6').addClass('appginihelper-layout-column col-md-6 appginihelper-column');
  $j(value).find('div.col-sm-2').removeClass('vspacer-sm col-xs-12 col-sm-2').addClass('appginihelper-layout-column col-md-2 appginihelper-column');
  }));
});
Annotation 2020-04-19 015051.png
Annotation 2020-04-19 015051.png (18.8 KiB) Viewed 1564 times
Brandon

Post Reply