Millau upgrade 11.2.8 - rich text editor - margin off

  • 1
  • Problem
  • Updated 1 month 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,032 Points 2k badge 2x thumb

Posted 2 months ago

  • 1
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,032 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,032 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, Official Rep

  • 3,080 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,032 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,032 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, Official Rep

  • 3,080 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,032 Points 2k badge 2x thumb
Yes, both.
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,032 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, Official Rep

  • 3,080 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/