0

I am working on a vf page with a random number of fields. The problem I'm facing is related to the sizing of the fields. As shown in the screenshot, the contact number field is one long field instead of being of the same size as all the other fields. How do I fix this?

enter image description here

VF-Page code:

 <div class="RightPadding slds-col slds-size--1-of-1 slds-medium-size--4-of-12">
        <div class="slds-form-element slds-p-around--small">
            <div class="slds-form-element__control slds-p-around--none">
                <label class="slds-form-element__label" for="{!field.fieldPath}">{!field.label}
                    <abbr style="color:red;" class="{!if(field.dbrequired == true,'slds-required','slds-hidden')}">*</abbr>
                </label>
                <span class="{!if(field.type == 'boolean', '', 'slds-hidden')}">
                    <label class="slds-checkbox">
                        <apex:inputField styleclass="slds-size--12-of-12 slds-input webformField" rendered="{!if(field.type == 'boolean', 'true', 'false')}" html-data-id="{!field.fieldPath}" value="{!webformObject[field.fieldPath]}" required="{!OR(field.required, field.dbrequired)}"></apex:inputField>
                        <apex:actionSupport event="onchange" action="{!sameAsBillTo}" rerender="frmCandEdit" status="frmCandEditStatus"/>                                                    <span class="slds-checkbox--faux"></span>
                    </label>
                </span>
                <apex:inputField styleClass="webformField slds-size--12-of-12" rendered="{!if(field.type != 'boolean' && field.type != 'picklist', 'true', 'false')}" html-data-id="{!field.fieldPath}" value="{!webformObject[field.fieldPath]}" required="{!OR(field.required, field.dbrequired)}"></apex:inputField>
                <div class="{!if(field.type == 'picklist', 'slds-select_container slds-p-around--none', 'slds-hidden')}">
                    <apex:inputField styleClass="slds-select webformField slds-size--12-of-12" rendered="{!if(field.type == 'picklist', 'true', 'false')}" html-data-id="{!field.fieldPath}" value="{!webformObject[field.fieldPath]}" required="{!OR(field.required, field.dbrequired)}"></apex:inputField>
                </div>
            </div>
        </div>
    </div>
0

I think you can change the input field size using the slds style class(change size--12-of-12 to size--4-of-12):

instead styleClass="slds-select webformField slds-size--12-of-12" you can try like this styleClass="slds-select webformField slds-size--4-of-12"

Hope this will work...

  • 1
    Hi, and welcome to SFSE! Not a bad first answer. I'd like to take a moment to refer you to How to Answer for writing good answers. Also, I'd specifically suggest that you mention that -- styles are deprecated, and they should be using _ instead (e.g. slds-size_1-of-3). – sfdcfox Aug 29 '19 at 8:20
  • changing it to 'slds-size--4-of-12' reduces the size of all the other fields even more. It does make that one field the right size but then all the other fields become smaller. – vedant gupta Aug 29 '19 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.