AppGini Community Forums

Posted: **2021-02-08 07:04**

Hi there,
I am having a problem with Multi-Column Layout appearance for Rich Text Editor fields after upgrading to 5.94.
The field set to Rich (HTML) area is "notes".
Below is the js codes in my hooks file

Code: Select all

var row_1 = new AppGiniLayout([6, 6])
    .add(1, ["id", "sort_field", "group", "state", "active"])
    .add(2, ["date1", "date2", "name", "value1", "value2", "value3"])
	.sizeLabels(3);

var row_2 = new AppGiniLayout([12])
    .add(1, ["notes"])
	.sizeLabels(3);

This is what I see

: Screen Shot 2021-02-08 at 2.37.27 PM.jpeg (55.42 KiB) Viewed 6362 times

If I remove the ".sizeLabels(3);" code, the text editor will appear, but not in the nice column spacing.
Like this

: Screen Shot 2021-02-08 at 2.59.17 PM.jpeg (61.79 KiB) Viewed 6362 times

Any help is appreciated. Thanks and stay safe.

Posted: **2021-02-08 19:55**

Sorry, I cannot reproduce this. I have downloaded latest Northwind demo and custmized Employees DV in hooks/employees-dv.js

There are four layouts (rows in red with dashed border)

: chrome_pURi2jNjcu.png (34.85 KiB) Viewed 6344 times

As in your sample code, first row is [6,6] and second row is [12]. Second row contains a nicEdit field "Notes".

Without .sizeLabels(3) it aligns the Notes field as shown in the screenshot above.

This is fine. Label is 3/12 of 12 and control is 9/12 of 12.

Code: Select all

var dv = AppGiniHelper.dv;
dv.getField("EmployeeID").hide();
var row_1 = new AppGiniLayout([6, 6])
    .add(1, ["#Employee", "TitleOfCourtesy", "LastName", "FirstName", "Title", "BirthDate", "Age"])
    .add(2, ["Photo"])
    .sizeLabels(3);

var row_2 = new AppGiniLayout([12])
    .add(1, ["Notes"]);

var row_3 = new AppGiniLayout([6, 6])
    .add(1, ["#Contact", "HomePhone", "Extension"])
    .add(2, ["#Address", "Address", "City", "Region", "PostalCode", "Country"]);

var row_4 = new AppGiniLayout([6, 6])
    .add(1, ["#Contract", "HireDate", "ReportTo"]);

With .sizeLabels(3) it aligns exactly the same.

If you want the control to be left aligned under State, you should consider having [6,6] on the second row:

Code: Select all

var row_2 = new AppGiniLayout([6,6]).add(1, ["Notes"]);

: chrome_14KZ4RmJgY.png (30.5 KiB) Viewed 6344 times

Do you always clear browser cache after changing JS or CSS?

An article about Bootstrap 12-column grid-system and alignment of controls using Multi-Column Layout of AGH JS Library:
See chapter "Alignment of labels and controls" here:
https://appgini.bizzworxx.de/products/j ... mn-layout/
There is a second page here:
https://appgini.bizzworxx.de/products/j ... -layout/2/

Posted: **2021-02-09 03:16**

Hi Jan
Thanks for the detail explanation. I fully understood them especially about the alignment. However, the editor disappearance is still a mystery.

I started creating a simple app from scratch and tested it again and whenever I add .sizeLabels(3) in the hooks/table1-dv.js file, the nicedit editor do not appear correctly. Just a single thick vertical line lke below

: Screen Shot 2021-02-09 at 11.00.58 AM.jpeg (122.99 KiB) Viewed 6332 times

When I inspect the element, i notice that the "has-nicedit" has been stripped from the <div class="col-lg-9"> element.
Then, if I add it manually in the inspector, the editor appear as expected as follow.

: Screen Shot 2021-02-09 at 11.01.33 AM.jpeg (126.14 KiB) Viewed 6332 times

Any idea why this behaviour is happening?

Posted: **2021-02-09 07:05**

Please send the following to me by email:

-your order number
-The test axp file
-header-extras.php
-table1-dv.js
And if there have been any changes:
-footer-extras.php and
-table1.php

Posted: **2021-02-09 08:58**

Hi Jan,
Thanks again for the fantastic support!
I have emailed the files requested to your [email protected] address.
Thanks again and stay safe.

Posted: **2021-02-09 09:09**

Hi,

the height of the rich text editor is broken since 5.93 as I reported a bug ( viewtopic.php?f=11&t=4137 ) . Maybe someone want's to push it?

Olaf

Posted: **2021-02-09 16:20**

Hi,

thanks, @zala, for sending me the files. I was able to reproduce the behaviour you have described.

I don't know the reason why min-height and width of nicEdit-related controls has changed recently, but I have found a workaround which I'd like to share with you gals and guys out there:

Code: Select all

dv.ready(function () {
    $j(".nicEdit-main").css("min-height", "200px").parent().css("width", "unset").prev("[unselectable='on']").css("width", "unset");
});

Before

: chrome_UaGGgcVlpU.png (25.36 KiB) Viewed 6278 times

After

: chrome_6DBtyPKbkg.png (28.81 KiB) Viewed 6278 times

Full code

Code: Select all

// file: hooks/table1-dv.js
var dv = AppGiniHelper.dv;

// dv.getField("id").hide();

var row_1 = new AppGiniLayout([6, 6])
    .add(1, ["#Employee", "name"])
    .add(2, ["#Employee", "id"])
    .sizeLabels(4);

var row_2 = new AppGiniLayout([12]).add(1, ["notes"])
    .sizeLabels(2);

dv.ready(function () {
    $j(".nicEdit-main").css("min-height", "200px").parent().css("width", "unset").prev("[unselectable='on']").css("width", "unset");
});

Tip

When using .sizeLabels(4) on the [6, 6] row and .sizeLabels(2) on the [12] row, those labels get aligned very nicely.

Posted: **2021-02-10 02:23**

Hi Jan,
Thanks for the investigation and workaround.
I have applied it but it still didn't work as expected.
However, after putting your workaround code in a js setTimeout function, it produced the expected result.
Just sharing with you the code

Code: Select all

// file: hooks/TABLENAME-dv.js
function formatnicedit(){
    $j(".nicEdit-main").css("min-height", "200px").parent().css("width", "unset").prev("[unselectable='on']").css("width", "unset");
}
setTimeout(formatnicedit, 1000);

Since I wanted it to be reflected through the whole site, I have decided to put the code in the footer-extras.php as follow.

Code: Select all

// file: hooks/footer-extras.php
<script>
function formatnicedit(){
    $j(".nicEdit-main").css("min-height", "200px").parent().css("width", "unset").prev("[unselectable='on']").css("width", "unset");
}
setTimeout(formatnicedit, 1000);
</script>

Thanks again and hope that we can find a permanent solution for this issue in the future.
Stay safe everyone.

Posted: **2021-04-26 11:10**

Hi, I'm facing the same problem.
My NicEdits are shown only with a vertical line.

Since my Editor is related to the "Description" field in my table I added the following code to add the "has-nicedit" class to the Col-lg-9 created.

Code: Select all

dv.ready(function () {
	$j("label[for='description']").next().addClass("has-nicedit");
});

Adding the "has-nic-edit" fix the issue.

AppGini Community Forums

Rich Text Editor appearance issue with Multi-Column Layout

Rich Text Editor appearance issue with Multi-Column Layout

Re: Rich Text Editor appearance issue with Multi-Column Layout

Re: Rich Text Editor appearance issue with Multi-Column Layout

Re: Rich Text Editor appearance issue with Multi-Column Layout

Re: Rich Text Editor appearance issue with Multi-Column Layout

Re: Rich Text Editor appearance issue with Multi-Column Layout

Re: Rich Text Editor appearance issue with Multi-Column Layout

Re: Rich Text Editor appearance issue with Multi-Column Layout

Re: Rich Text Editor appearance issue with Multi-Column Layout