Large Checkboxes with Classic Theme

  • 2
  • Problem
  • Updated 3 months ago
  • Solved
We are on Brooklyn Update 1, Iteration 1.

Classic (out of the box) theme.  Themes are Updated (no button to update appears.)

We are seeing checkboxes rendering very large in IE (11) and Chrome (56.0.2924.87).  Normal appearance in Firefox (enterprise edition 31.3.0).  This is making labels and boxes not line up for us anymore.

IE/Chrome (big checkboxes):


Firefox (looks normal)
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb

Posted 2 years ago

  • 2
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Do you have any custom components that have custom css on this page?
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
No, no custom components or any css on that page.  I was able to create an easy repro.

Firefox (looks good)


Chrome (looks bad)


XML
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Account">    <models>
        <model id="Account" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="IsPartner"/>
            </fields>
            <conditions>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Account" uniqueid="sk-2lJub3-100">
            <maintitle>
                <template>{{Name}}</template>
            </maintitle>
            <subtitle>
                <template>{{Model.label}}</template>
            </subtitle>
            <actions>
                <action type="delete"/>
                <action type="clone"/>
                <action type="share"/>
                <action type="savecancel" window="self"/>
            </actions>
        </pagetitle>
        <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="edit" uniqueid="sk-2lJub3-101" buttonposition="">
            <columns>
                <column width="50%">
                    <sections>
                        <section title="Basics">
                            <fields>
                                <field id="Name"/>
                                <field id="IsPartner"/>
                            </fields>
                        </section>
                    </sections>
                </column>
                <column width="50%">
                    <sections>
                        <section title="System Info">
                            <fields>
                                <field id="CreatedDate"/>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Unfortunately, I have not been able to reproduce your problem on a mac.
Chrome: Version 54.0.2840.71 
Firefox: 52.0
And on PC, I cannot reproduce on
Chrome: Version 56.0.2924.87
Edge: 38.14393.0.0
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Well, I'm not sure what else to do.  Just to re-cap, the page is set to Theme = Default.  Our default is out of the box Classic.  I changed the theme to Classic, and the problem was still there.

I do have these errors in the console, have no idea if they are related.



We have all users reporting this issue, on the affected browsers.  Because we have this page with multiple check boxes all aligned, the big boxes make the text no longer sit next to its box.
(Edited)
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Those are common bugs and shouldn't change anything.

Moving this into email.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
In case anyone else stumbles upon this and has the same issue:

.nx-field input,.nx-field textarea,.nx-field .flex-text-wrap pre,.nx-field .nx-richtext-input {    min-height:1em;   }

This CSS fix was found to help with this issue. For an unknown reason, the min-height was being set to 2.031em.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
In case anyone else stumbles upon this later and has the issue update #2:

This problem was solved by upgrading to 9.5.2 
Photo of Michael Pierce

Michael Pierce

  • 544 Points 500 badge 2x thumb
FYI: just experienced this with 9.5.6 (updated today) in Chrome, Modern theme.  Wasn't experiencing this in an earlier Brooklyn version. Is it possible I need to update Out of Date Themes?

The CSS fix solved it for me.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Michael, do you see this button? If so, give it a press. Buttons love to be pressed.

Photo of Michael Pierce

Michael Pierce

  • 544 Points 500 badge 2x thumb
Stephen,

I actually asked about this in my Post. But I'm hesitant or cautious to "update" anything. Should I have complete confidence?
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
I'm not sure what you mean by complete confidence. If the CSS fix solved it for you, and everything is working, why risk it?

I cannot deal in absolutes, I am jedi, not sith. Only Sith deal in absolutes.

However, I can tell you this: That "Update out of Date Themes" button hasn't caused problems before. It's not the same as upgrading your org. It's very 'low key' in comparison. I can't promise you that you won't have problems, but I can say I would be surprised if you did.
Photo of Michael Pierce

Michael Pierce

  • 544 Points 500 badge 2x thumb
Fair enough, Jedi Master.
Consider me chastised.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
May the force be with you
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
This problem returned for us also in 9.5.6, Chrome and IE.  FireFox is fine.  Yes, I have clicked "Update Outdated Themes" and the issue did not resolve.  As reported in this problem originally, we use a custom theme that was based off Classic.

EDIT to add: seeing it in Production on 9.5.6 and in our sandbox on 9.5.7.
(Edited)
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Is the work around code still working? (Seen earlier on this thread)
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
We did not implement the work-around.  We have almost 300 Skuid pages in production, so it's tough to implement page level workarounds.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Unfortunately, I'm unable to replicate the issue in 9.5.7 or 10.0.0 :(
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
I have Millau (11.0) installed in the Sandbox and I am seeing the large checkboxes in Classic. 
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Same here.  I am seeing this in my developer org--before and after updating my themes.  This is true for all themes including Classic.
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Can yall post some XML of a broken page here for me? I haven't seen any large checkboxes yet in Millau.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Stephen,

Here is what I am seeing in my developer org when viewed through Chrome.



Here is the page xml:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Contact">
    <models>
        <model id="Contact" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Contact" type="">
            <fields>
                <field id="FirstName"/>
                <field id="LastName"/>
                <field id="IsEmailBounced"/>
            </fields>
            <conditions>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Contact" uniqueid="sk-2TMVdh-203">
            <maintitle>
                <template>{{FirstName}} {{LastName}}</template>
            </maintitle>
            <subtitle>
                <template>{{Model.label}}</template>
            </subtitle>
            <actions>
                <action type="delete" uniqueid="sk-2TMVdX-192"/>
                <action type="clone" uniqueid="sk-2TMVda-195"/>
                <action type="share" uniqueid="sk-2TMVdc-198"/>
                <action type="savecancel" window="self" uniqueid="sk-2TMVdf-201"/>
            </actions>
        </pagetitle>
        <basicfieldeditor showsavecancel="false" showheader="true" model="Contact" mode="read" uniqueid="sk-2TMVe6-222">
            <columns>
                <column width="50%">
                    <sections>
                        <section title="Basics" collapsible="no">
                            <fields>
                                <field id="FirstName" uniqueid="sk-2TMVds-211"/>
                                <field id="LastName" uniqueid="sk-2TMVdt-214"/>
                            </fields>
                        </section>
                    </sections>
                </column>
                <column width="50%">
                    <sections>
                        <section title="Checkbox" collapsible="no">
                            <fields>
                                <field uniqueid="sk-2TMnAY-324" id="IsEmailBounced"/>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
        <actionsequences uniqueid="sk-2TMcTN-256"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Thanks!

Bill
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
Have you been able to replicate the big size?
(Edited)
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
We are still seeing it.  Here it is in Chrome on the Skuid "Theme" tab (version 10.0.9.)  To solve this across my org, I put some inline css on my custom theme so we didn't have to worry about the large checkboxes coming back.

/* fixes checkbox sizing - avoids the oversized checkbox in some browsers*/
.nx-field input, .nx-field textarea, .nx-field .flex-text-wrap pre, .nx-field .nx-richtext-input {
    min-height:1em; 
}


Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
That did the trick.  Thank you, Chandra! You are a great resource. I appreciate you!
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Large checkboxes are back, I'm seeing it in Chrome and Firefox.  On Skuid 11.2.6.  Unfortunately my css workaround above is no longer working.

Can we get a new workaround while waiting on a fix?

EDIT to add: I'm now using  Lightning based theme.


(Edited)
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi Chandra,

Similar to the existing workaround you mentioned earlier in this conversation, here's a CSS rule you can try:

.nx-field input, .nx-field textarea, .nx-field .flex-text-wrap pre, .nx-field .nx-richtext-input {
    min-height: 1em !important;
    max-height: 1.2em !important;
}

It looks like this issue is slightly different underneath the hood, since before, a max-height wasn't necessary. I will surface this with our product team for further investigation. 
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Tried to use this, but the max-height made all our text input fields get super small, and our users could not see the text they were typing in to the field.
Photo of Daniel Camp

Daniel Camp

  • 372 Points 250 badge 2x thumb
Mark - any thing else here we can try. The above workaround caused the other issues described. So we are left with still having large check boxes.