function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sharp BESharp BE 

Change width of apex:inputfield in Visualforce page for Lightning

Hi all,

Currently I'm trying to migrate our Classic Visualforce page into Lightning but i'm having some troibles with the CSS styling we had included on our apex:inputfield(s). 

With adding the lightningStylesheets="true" in the apex:page the width of the apex:inputfields are ignored. What is a possible workaround here?
Is the browser default values overwriting my custom CSS styling? This is holding us back from fully migrating into Lightning. 

Thanks for the help!
  
<apex:page standardController="Quotation__c" extensions="RPIRequestExtension" sidebar="false" showHeader="false" showChat="false" lightningStylesheets="true">
    <apex:form >
    <apex:pageBlock >
        <apex:pageBlockButtons >
            <apex:commandButton action="{!save}" value="Save" onclick="tempDisableBeforeUnload = true;"/>
        </apex:pageBlockButtons>

<script>function setFocusOnLoad() {}</script>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;border-top-width:1px;border-bottom-width:1px;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;border-top-width:1px;border-bottom-width:1px;}
.tg .tg-baqh{text-align:center;vertical-align:top;width:100px}
.tg .tg-b63h{text-align:center;background-color:#ecf4ff;vertical-align:top;width:100px}
.tg .tg-c57o{background-color:#ecf4ff;vertical-align:top}
.tg .tg-calz{font-weight:bold;background-color:#ecf4ff;text-align:center;vertical-align:top;width:100px}
.tg .tg-n1j6{background-color:#ecf4ff;text-align:right;vertical-align:center;font-size:12px}
</style>
<center><table class="tg" style="undefined;table-layout: fixed">
<colgroup>
<col style="width: 211px"></col>
<col style="width: 111px"></col>
<col style="width: 111px"></col>
<col style="width: 111px"></col>
<col style="width: 111px"></col>
<col style="width: 111px"></col>
<col style="width: 111px"></col>
</colgroup>
  <tr>
    <th class="tg-c57o"></th>
    <th class="tg-calz">Scope</th>
    <th class="tg-calz">Concept</th>
    <th class="tg-calz">Build</th>
    <th class="tg-calz">Prep-to-start</th>
    <th class="tg-calz">Start-up</th>
    <th class="tg-calz">Aftercare</th>
  </tr>
  <tr>
    <td class="tg-n1j6">Phase Time (In weeks)   </td>
    <td class="tg-b63h"><apex:inputField value="{!Quotation__c.Length_of_scope_phase__c}" style="width:75px;text-align:center" /></td>
    <td class="tg-b63h"><apex:inputField value="{!Quotation__c.Length_of_concept_phase__c}" style="width:75px;text-align:center" /></td>
    <td class="tg-b63h"><apex:inputField value="{!Quotation__c.Length_of_build_phase__c}" style="width:75px;text-align:center" /></td>
    <td class="tg-b63h"><apex:inputField value="{!Quotation__c.Length_of_prep_to_start_phase__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-b63h"><apex:inputField value="{!Quotation__c.Length_of_startup_phase__c}"  style="width:75px;text-align:center"/></td>
    <td class="tg-b63h"><apex:inputField value="{!Quotation__c.Length_of_aftercare_phase__c}"  style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Project Management   </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PM_EST_SCOPE__c}" style="width:75px;text-align:center" /></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PM_EST_CONC__c}" style="width:75px;text-align:center" /></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PM_EST_BUILD__c}" style="width:75px;text-align:center" /></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PM_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PM_EST_START__c}"  style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PM_EST_AFTER__c}"  style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Serialization Coordinator </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SECO_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SECO_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SECO_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SECO_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SECO_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SECO_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Serialization Engineer </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SE_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SE_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SE_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SE_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SE_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.SE_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">HSE </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.HSE_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.HSE_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.HSE_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.HSE_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.HSE_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.HSE_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Validation </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.VAL_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.VAL_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.VAL_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.VAL_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.VAL_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.VAL_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Incoming Inspection </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.INC_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.INC_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.INC_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.INC_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.INC_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.INC_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr> 
    <tr>
    <td class="tg-n1j6">Quality </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.QA_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.QA_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.QA_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.QA_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.QA_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.QA_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Project Engineering </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ENG_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ENG_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ENG_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ENG_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ENG_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ENG_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Technicians </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.TEC_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.TEC_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.TEC_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.TEC_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.TEC_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.TEC_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Customer Care </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.CC_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.CC_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.CC_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.CC_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.CC_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.CC_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Artwork </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ART_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ART_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ART_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ART_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ART_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.ART_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Business Support </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.BSO_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.BSO_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.BSO_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.BSO_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.BSO_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.BSO_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Warehouse </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.WAR_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.WAR_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.WAR_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.WAR_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.WAR_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.WAR_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
<tr>
    <td class="tg-n1j6">Operators </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.OP_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.OP_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.OP_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.OP_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.OP_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.OP_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">Production Supervising </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PS_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PS_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PS_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PS_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PS_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.PS_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
  <tr>
    <td class="tg-n1j6">IT </td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.IT_EST_SCOPE__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.IT_EST_CONC__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.IT_EST_BUILD__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.IT_EST_PREP__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.IT_EST_START__c}" style="width:75px;text-align:center"/></td>
    <td class="tg-baqh"><apex:inputField value="{!Quotation__c.IT_EST_AFTER__c}" style="width:75px;text-align:center"/></td>
  </tr>
</table></center>
</apex:pageblock>
</apex:form>
</apex:page>