Skip to main content

This CSS doesn’t work any longer in Brooklyn.


#sk-1lhXgJ-92 td:nth-child(3) #sk-1if7S8-779 th:nth-child(3){    

  display: none

  

}

Where #sk-1lhXgJ-92 is the tableId and the children are the elements I want to hide.

Here’s a sample XML page.


<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">    <models>

        <model id="NewModel" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Opportunity">

            <fields>

                <field id="AccountId"/>

                <field id="Account.Name"/>

                <field id="Account_Phone__c"/>

                <field id="Address__c"/>

                <field id="Alternate_Email__c"/>

            </fields>

            <conditions/>

            <actions/>

        </model>

    </models>

    <components>

        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" buttonposition="" mode="read" allowcolumnreordering="true" uniqueid="sk-1lhXgJ-92" model="NewModel">

            <fields>

                <field id="AccountId" hideable="true" uniqueid="fi-1lhcrF-135"/>

                <field id="Account_Phone__c" hideable="true" uniqueid="fi-1lhcrG-136"/>

                <field id="Address__c" hideable="true" uniqueid="fi-1lhcrG-137"/>

                <field id="Alternate_Email__c" hideable="true" uniqueid="fi-1lhcrG-138"/>

            </fields>

            <rowactions>

                <action type="edit"/>

                <action type="delete"/>

            </rowactions>

            <massactions usefirstitemasdefault="true">

                <action type="massupdate"/>

                <action type="massdelete"/>

            </massactions>

            <views>

                <view type="standard"/>

            </views>

        </skootable>

    </components>

    <resources>

        <labels/>

        <javascript/>

        <css>

            <cssitem location="inline" name="newcss" cachelocation="false">#sk-1lhXgJ-92 td:nth-child(3) #sk-1if7S8-779 th:nth-child(3){

    

  display: none

  

}</cssitem>

        </css>

    </resources>

    <styles>

        <styleitem type="background" bgtype="none"/>

    </styles>

</skuidpage>

Workaround is sad


$ = skuid.$;<br>$("#sk-1if7S8-779 td:nth-child(3)").css('display','none');<br>$("#sk-1if7S8-779 th:nth-child(3)").css('display','none');

Hello Shmuel - It appears that as of Brooklyn, Skuid is emitting an in-line style to th & td elements of “style=“display: table-cell;” This is rather unfortunate since, as you encountered, in-line styles always take precedence over style sheet rules so modifying behavior is difficult (this is why it’s typically not a good idea to ever use in-line styles). FWIW, I would recommend that you work with Skuid to avoid the in-line style and instead decorate a class with display:table-cell”. As for your specific issue, there are solutions: 1) You CSS rule is missing a comma in-between the selectors. This is causing part of the issue (at least in some browsers like Chrome it will). 2) Your CSS rule is using two different elements (#sk-1lhXgJ-92 & #sk-1if7S8-779) but your table is sk-1lhXgJ-92. Updating the selectors in your rule to match the table will also be needed. 3) While far from ideal and not a best practice, the only stylesheet solution you would have is to add !important to your rule. Aside from the JS solution you mentioned, this will be the only way to override the in-line style that Skuid is emitting. All 3 of the above would look like this: #sk-1lhXgJ-92 td:nth-child(3), #sk-1lhXgJ-92 th:nth-child(3) { display: none !important; } Of course, with Brooklyn, we now have conditional rendering so if you just want to hide a column, I’d suggest using the new feature and eliminate the CSS completely. Hope this helps!

Thanks Barry! You’re the man!

  1. I did try it with a comma between selectors, to no avail 😦

  2. I was mixing two Id’s in there because I was in two different environments

  3. Number 3 did the trick “!important” worked!

The new render column options feature is extremely useful! I completely forgot about it! Unfortunately it breaks a hacky feature of mine since I need access to the data in the column on an html level.

Glad the !important worked. You definately want a comma in-between since it’s to different selectors that you are applying the same rule to.

Skuid Team - Is there a reason why display:table-cell was added in Brooklyn as an inline style rather than just applying a class that has that rule?

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings