Millau upgrade 11.2.8 - rich text editor - margin off

edited February 17 in Problems
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?

Comments

  • edited September 2018
    I cannot seem to find a good workaround to reset the height. Can you please advise?
  • edited September 2018
    Hi any updates on this? Looking forward to fixing this soon or a recommended workaround without using JS?
  • Gregg BaxterGregg Baxter Member
    edited February 17
    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
  • edited February 17

    <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>

  • edited October 2018
    Can you change the custom object name to one of yours? Just make sure it has a rich text field.
  • Gregg BaxterGregg Baxter Member
    edited October 2018
    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.
  • Gregg BaxterGregg Baxter Member
    edited October 2018
    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!
  • edited October 2018
    Hi thanks for the reply. We are still on Classic. Is there a fix for non lightning customers?
  • Gregg BaxterGregg Baxter Member
    edited October 2018
    Hi Jili

    Would like to check if you are using the Lightning theme?
  • edited October 2018
    Just checked with theme="Lightning Design". It is still showing similar results.

    image


  • Gregg BaxterGregg Baxter Member
    edited October 2018
    Yes this is an issue when using the Lightning design theme outside of Lightning.  If you change to another it should be ok.
  • edited October 2018
    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:

    image

    our custom theme:
    image 
  • Gregg BaxterGregg Baxter Member
    edited October 2018
    Could it be that you cloned a Lightning theme?

  • edited October 2018
    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 October 2018
    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 October 2018
    Also tried to import from the actual static resource created in Salesforce directly.
  • edited October 2018
    Tried a brand new theme with Lighting design as base theme, clone our existing page and switch to the  new theme.

    image

  • Gregg BaxterGregg Baxter Member
    edited October 2018
    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.

  • edited October 2018
    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 errorimage

    Is there any details around the error in the notifications Skuid received? Thanks!!
  • Gregg BaxterGregg Baxter Member
    edited October 2018
    You should only use the Lightning theme if you intend including your page as a lightning component.

    Did this error occur with both themes?

  • edited October 2018
    Yes, both.
  • edited October 2018
    We will still wrap it in a VF for now.

    Non lightning theme will still work when we switch to Lightning experience, correct?
  • Gregg BaxterGregg Baxter Member
    edited October 2018
    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/
Sign In or Register to comment.