Rich Text Editor appearance issue with Multi-Column Layout

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
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

Rich Text Editor appearance issue with Multi-Column Layout

Post by zibrahim » 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
Screen Shot 2021-02-08 at 2.37.27 PM.jpeg (55.42 KiB) Viewed 3533 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
Screen Shot 2021-02-08 at 2.59.17 PM.jpeg (61.79 KiB) Viewed 3533 times
Any help is appreciated. Thanks and stay safe.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

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

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

Post by jsetzer » 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
chrome_pURi2jNjcu.png (34.85 KiB) Viewed 3515 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
chrome_14KZ4RmJgY.png (30.5 KiB) Viewed 3515 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/
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
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

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

Post by zibrahim » 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. :D
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
Screen Shot 2021-02-09 at 11.00.58 AM.jpeg (122.99 KiB) Viewed 3503 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
Screen Shot 2021-02-09 at 11.01.33 AM.jpeg (126.14 KiB) Viewed 3503 times
Any idea why this behaviour is happening?
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

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

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

Post by jsetzer » 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
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
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

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

Post by zibrahim » 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.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

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

Post by onoehring » 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

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

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

Post by jsetzer » 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
chrome_UaGGgcVlpU.png (25.36 KiB) Viewed 3449 times

After

chrome_6DBtyPKbkg.png
chrome_6DBtyPKbkg.png (28.81 KiB) Viewed 3449 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.
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
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

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

Post by zibrahim » 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.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

hernan
Posts: 26
Joined: 2020-06-22 18:56

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

Post by hernan » 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.

Post Reply