Visualforce & Lightning: CSS width attribute is completely broken when inside a 2-column pageBlockSection

Question

I have some existing Visualforce pages that I'm trying to primp and adjust to look good in lightning after adding lightningStylesheets="true" in the page tag. For the most part this is pretty straightforward work. However, I've run into a real doozy: the CSS width attribute doesn't work at all when used inside a 2-column page block section (regardless of component type).

I've discovered this to be the culprit by changing to a 1-column section and voila! Width attribute works like normal. Assuming that something in lightning's stylesheets is overriding this property, I've attempted to overcome this by using !important in the CSS, but still nothing. This needs to be a 2-column section, and I am, by all means, wanting to avoid the work of re-creating these pages using another feature such as LWC - this project is meant to be cosmetic-only and to take as little time as possible.

Here is a sample of the issue. I've removed other items from this section in this code sample for the sake of brevity / conciseness. Any help would be greatly appreciated!

<apex:pageBlockSection id="params" title="Parameters" columns="2">
    <apex:pageBlockSectionItem>
        <apex:outputLabel value="Limit"/>
        <apex:outputPanel >
            <apex:inputField value="{!q.Revenue__c}" style="width:50px !important; text-align:center"/>&nbsp;
            <apex:inputField value="{!q.Period__c}" style="height:{!IF(!onLightning,'20.5px','31px')}; width:{!IF(onLightning,'50px','')}; position:relative; top:0.5px"/>
        </apex:outputPanel>
    </apex:pageBlockSectionItem>
</apex:pageBlockSectionItem>

Don't know about you ... but that don't look like 50px to me :)

Thanks for the help!

Answer 1

If you inspect the page you will find while using 2-column section The "min-width" property is set with "min-width: 20rem;" which is not allowing you to change it width to anything less than 20rem you just have to overwrite that property with whatever you want in your case

<apex:inputField value="{!q.Revenue__c}" style="min-width: 50px;width:50px !important; text-align:center"/>&nbsp;
<apex:inputField value="{!q.Period__c}" style="min-width: 50px;height:{!IF(!onLightning,'20.5px','31px')}; width:{!IF(onLightning,'50px','')}; position:relative; top:0.5px"/>