[SalesForce] How to add css to override existing styling in lightning component

I am using an existing lightning component that displays some checkboxes. I am wondering if there is a way to reduce the size of the checkboxes.

<design:component >

   <design:attribute name="childCheckbox1_label" label="Label Checkbox 1 "/>
   <design:attribute name="childCheckbox1_storage" label="Checkbox 1 Output 
   Value"/>
   <design:attribute name="childCheckbox1_defaultValue" label="Checkbox 1 
   Default Value"/>

  <design:attribute name="childCheckbox2_label" label="Label Checkbox 2 "/>
  <design:attribute name="childCheckbox2_storage" label="Checkbox 2 Output 
  Value "/>
  <design:attribute name="childCheckbox2_defaultValue" label="Checkbox 2 
  Default Value"/>


</design:component>

I checked the code using inspect element. Found out this piece of code.

slds-form-element_stacked:not([class*="slds-size"]), .slds-form_stacked
.slds-form-element:not([class*="slds-size"]), .slds-form_horizontal .slds-
form-element_stacked:not([class*="slds-size"])

{ width: 100%;
flex-basis: 100%; }

The width above is set to 100%. I need to change the width somehow in the above code. I tried to add the following in style class but it does not work.

.THIS.slds-form-element_stacked .slds-form_stacked .slds-form_horizontal { width: 3%; flex-basis: 100%; }

Best Answer

Create a .css file associated to the Aura Component (Ctrl+Shift+4 STYLE option in the Developer Console when you opened a Lightning Aura Component) and then adjust the CSS as you please.

Refer here (in the Aura CSS Becomes Standard CSS section) to an example of how the CSS looks in an Aura component.

Sample taken from that link:

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}
.THIS .lower-third > p {
    padding: 0;
    margin: 0;
}
.THIS .truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Related Solutions

[SalesForce] How to make slds page input box half the width

Size it with a div wrapping the element for size instead of a size on the element.

Not sure if it is the best or most standard way but it has worked for me

<apex:page id="mytestPage">

    <apex:slds/>

    <div class="slds-scoped">
        <div class="slds-form--compound">
            <fieldset class="slds-form--compound">

                <div class="slds-form-element__group">

                    <div class="slds-form-element__row">

                        <div class="slds-form-element slds-size--1-of-2">
                            <label class="slds-form-element__label"
                                   for="a_1">Field 1</label>
                            <div class="slds-form-element__control">
                                <input id="a_1" class="slds-input" type="text"/>
                            </div>
                        </div>

                        <div class="slds-form-element slds-size--1-of-2">
                            <label class="slds-form-element__label"
                                   for="a_2">Field 2</label>
                            <div class="slds-form-element__control">
                                <input id="a_2" class="slds-input" type="text"/>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">

                        <!--Wrap in a sizing div-->
                        <div class="slds-size--1-of-2">
                            <div class="slds-form-element">
                                <label class="slds-form-element__label"
                                       for="b_1">Field 3</label>
                                <div class="slds-form-element__control">
                                    <input id="b_1" class="slds-input" type="text"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <div class="slds-form-element slds-size--1-of-2">
                            <label class="slds-form-element__label"
                                   for="c_1">Field 4</label>
                            <div class="slds-form-element__control">
                                <input id="c_1" class="slds-input" type="text"/>
                            </div>
                        </div>
                    </div>
                </div>

            </fieldset>
        </div>

    </div>

</apex:page>

[SalesForce] How to find class in Lightning component

Check out the below link in LDS website. it has the information

https://www.lightningdesignsystem.com/components/form-element/

bout Form Element

Error states alert the user when content in the form is invalid. The .slds-has-error class is placed on the <div class="slds-form-element">. Place the error message for the user in a <span> with the .slds-form-element__help class.

The native form elements, <input>, <textarea>, <select>, <input type='checkbox'>, and <input type='radio'>, receive validation styling for disabled, checked, and checked disabled, if applicable.

The read-only state is for form elements that can’t be modified. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.

Because the read-only field state has no <input>, don’t use a <label> to provide better accessibility for screen readers and keyboard navigators. Instead, use a <span> with the .slds-form-element__label class. Instead of an <input>, use the .slds-form-element__static class inside the .slds-form-element__control wrapper.

Best Answer

Related Solutions

[SalesForce] How to make slds page input box half the width

[SalesForce] How to find class in Lightning component

Related Topic