Millau upgrade 11.2.8 - rich text editor - margin off

  • 1
  • Problem
  • Updated 11 months ago
  • Solved
When I place the cursor side in the textbox for editing, the typed text appears at the bottom and outside of the box.



The height property is causing this issue. Once removed, cursor positions correctly.

/* Fix border, weight, and height of form inputs */
.nx-field .flex-text-wrap pre,
.nx-field .nx-richtext-input,
.nx-field input,
.nx-field textarea {
    border: 1px solid #dddbda;
    height: calc(1.875rem + (1px * 2));
    font-weight: 400;
}

Is this a known issue?

Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb

Posted 1 year ago

  • 1
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
I cannot seem to find a good workaround to reset the height. Can you please advise?
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Hi any updates on this? Looking forward to fixing this soon or a recommended workaround without using JS?
Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
Hi Jili

I cannot see that this is related to any bug?  Do you have any other CSS in your page?

If possible can you provide a sample XML of the page based on a common object i.e. Contacts/Accounts etc. and I will have a look?

Chat soon
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="Activity" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Contact_Result__c">
            <fields>
                <field id="Progress_Notes_RichText__c"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Activity" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-3k9k-316">
            <fields>
                <field id="Progress_Notes_RichText__c" hideable="true" uniqueid="fi-3k9n-335"/>
            </fields>
            <rowactions>
                <action type="edit"/>
                <action type="delete"/>
                <action type="drawer" label="Run multiple actions" icon="sk-icon-magic">
                    <drawer title="Drawer Area" width="90%" closehandle="true">
                        <components>
                            <basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="Activity" uniqueid="sk-3kA3-381" mode="edit" layout="above">
                                <columns>
                                    <column width="50%" uniqueid="sk-3kA3-377">
                                        <sections>
                                            <section title="Section A" uniqueid="sk-3kA3-378" collapsible="no">
                                                <fields>
                                                    <field uniqueid="sk-3kA6-399" id="Progress_Notes_RichText__c" showhelp="true"/>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                    <column width="50%" uniqueid="sk-3kA3-379">
                                        <sections>
                                            <section title="Section B" uniqueid="sk-3kA3-380" collapsible="no">
                                                <fields/>
                                            </section>
                                        </sections>
                                    </column>
                                </columns>
                                <renderconditions logictype="and"/>
                                <conditions>
                                    <condition type="contextrow" field="Id" mergefield="Id"/>
                                </conditions>
                            </basicfieldeditor>
                        </components>
                    </drawer>
                </action>
            </rowactions>
            <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
            </massactions>
            <views>
                <view type="standard"/>
            </views>
        </skootable>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-3k9i-314"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Can you change the custom object name to one of yours? Just make sure it has a rich text field.
Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
Hi Jili

I have tested this on 2.8 and 2.9 and I am getting similar results.

I am investigating it further and should have a result today and will post the answer here.

Chat soon.
Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
Hi Jili

If you include a Skuid page as a lightning component and not a VF page this will not happen.

Here is a reference in our documentation on how that is achieved.

What you need to do is drag the Skuid lightning component into your lightning page and type the exact name of you Skuid Page and Save and you will be good to go.

Happy Skuiding!
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Hi thanks for the reply. We are still on Classic. Is there a fix for non lightning customers?
Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
Hi Jili

Would like to check if you are using the Lightning theme?
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Just checked with theme="Lightning Design". It is still showing similar results.

Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
Yes this is an issue when using the Lightning design theme outside of Lightning.  If you change to another it should be ok.
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Why is our custom theme triggering 

.nx-field .flex-text-wrap pre,
.nx-field .nx-richtext-input,
.nx-field input,
.nx-field textarea {
    border: 1px solid #dddbda;
    height: calc(1.875rem + (1px * 2));
    font-weight: 400;
}


When theme  = "classic", only this came up:

.nx-field .nx-richtext-input {
-webkit-user-select: text;
user-select: text
word-wrap: break-word;


classic:



our custom theme:
Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
Could it be that you cloned a Lightning theme?
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
It could be. The theme was created >3 years ago by Rob at Skuid. The rich text is the only control having issue with the new css from Milau. Do you have a fix if it was cloned from a lighting theme? The new css is part of the native CSS in Millau. It is broken with our custom theme. The other text boxes are ok.

I fixed it by overriding the height: unset for the rich text. It would be nice to know the reason for it. If this is a bug in Skuid around rich text area. I cannot keep overriding these things. Thanks!
(Edited)
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Hi Greg, I tried these steps:
1. export existing custom theme
2. create new - import theme with downloaded from 1



Do you know why?
(Edited)
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Also tried to import from the actual static resource created in Salesforce directly.
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Tried a brand new theme with Lighting design as base theme, clone our existing page and switch to the  new theme.

Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
Hi Jili

I would rather create a new theme from a similar colour base as you have and then see what the differences are after applying it to the pages.  Then go into the new theme and see what is available that you can change to come as close as possible to the highly customised theme that you have from Rockaway.
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Ok. The issue is that the page is issuing the error above in the screenshot.

I did create 2 new themes One is with base theme = Lighting design and the other with base theme = Modern. When I used them on one of our existing contact page, I got this error

Is there any details around the error in the notifications Skuid received? Thanks!!
Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
You should only use the Lightning theme if you intend including your page as a lightning component.

Did this error occur with both themes?
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
Yes, both.
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,042 Points 2k badge 2x thumb
We will still wrap it in a VF for now.

Non lightning theme will still work when we switch to Lightning experience, correct?
Photo of Gregg Baxter

Gregg Baxter

  • 3,182 Points 3k badge 2x thumb
In principle yes but you need to be aware of some of them such as - "The Silk icon set is only available when using the Skuid Classic theme, or when using themes that are based on the Classic theme. Silk icons are not available in the Skuid Lightning Design theme."  Have a look at this document here: https://docs.skuid.com/latest/en/skuid/themes/