+ Start a Discussion
Courtney Church-Fasula 8Courtney Church-Fasula 8 

VF page column inputs not spanning entire width of column when width of input fields is set to 100%

Here's my code.
<apex:page showHeader="false" standardStylesheets="true" deferLastCommandUntilReady="true" docType="html-5.0">
    
    <head>
    <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
         <link rel="shortcut icon" href=" " type="image/x-icon" />

        <apex:stylesheet value="{!$Resource.screen}"/>
        <apex:stylesheet value="{!$Resource.tipsy}"/>
 

    <form action=" " method="POST">
    <div id="masthead">
            <div class="wrapper">
                <h1 class="logo"> </h1>
                <p class="phone">Need Help? Call us! <span> </span></p>
            </div>
        </div>
        
        <style>
        #col1,#col2{width:49%;display:inline-block;}
        </style>
        
    <apex:form >
       <apex:pageBlock > 
            This is where you can submit Project Requests to IT
        </apex:pageBlock>    
            
    <input type="hidden" name="orgid" value=""/>
    <input type="hidden" name="retURL" value=""/>
    <input type="hidden" name="recordType" value="012e000000017x1"/>
    <input type="hidden" name="status" value="Open"/>   
    <input type="hidden" name="origin" value="Web - IT Project Request"/>
    <input type="hidden" name="debugEmail" value=" "/>
    
<div id="col1">
        <apex:pageblock title="">
            <apex:pageBlockSection title="Project Info">
                <apex:pageBlockSectionItem labelStyle="100%" dataStyle="100%">
                    <label for="name">Your Name <b><font size="3" color ="FF0000">*</font> </b> </label><br/>
                    <input  id="name" maxlength="80" name="name" style="width:100%;height:25px;" wrap="soft" required="true" type="text" value="{!$User.FirstName} {!$User.LastName}"/><br/><br/>
                    <label for="email">Email <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <input  id="email" maxlength="80" name="email" style="width:100%;height:25px;" wrap="soft" required="true" type="email" value="{!$User.Email}"/><br/><br/>
                    <label for="subject">Project Name <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <input id="subject" maxlength="255" name="subject" style="width:100%;height:25px;" wrap="soft" required="true" type="text" placeholder="Project Name"/><br/><br/>
                    <label for="description">Description <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <textarea id="description" maxlength="32000" name="description" style="width:100%;height:70px;" wrap="soft" required="true" placeholder="Details of Project Request"/><br/><br/>
                    <font size="2.25"> For attachments please upload to <a href="https://drive.google.com" target="_blank">Google Drive</a> and place the Shared Link into the Description.</font><br/><br/>
                    <label for="Priority">Priority <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <select id="priority" name="priority" style="width:100%;height:25px;" wrap="soft" required="true" >
                        <option></option>
                        <option value="Low">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="High">High</option>
                        <option value="Critical">Critical</option>
                        </select><br/><br/>
                    
                    <b><font size="3" color="2478F0">*Low* </font></b>- Minor condition or documentation error that has no significant effect on the customer's operations. Additional requests for new feature suggestions that are defined as a new functionality in the existing licensed software.
                    <br/><br/>
                    <b><font size="3" color="1DE605">*Medium* </font></b>- Does not have a major effect on the customer's business operations. Major problem for which an acceptable workaround exists.
                    <br/><br/>
                    <b><font size="3" color="E68705">*High* </font></b>- Severely affects or restricts major functionality. Time-sensitive nature and important to long-term productivity but is not causing an immediate halt to work. Workaround is available and operation can continue in a restricted manner.
                    <br/><br/>
                    <b><font size="3" color="E62D05">*Critical* </font></b>- Continued use of one or more functions impossible (or severely restricted) on a critical part of the system. Prevents the customer from continued production or severely risks critical business operations. May cause loss of data and/or restrict data availability and/or cause significant financial impact to the customer. No reasonable workaround.
                    <br/>    
                    
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            </apex:pageblock>       
</div>      

<div id="col2">
        <apex:pageblock title="">      
            <apex:pageBlockSection title="Details">
                <apex:pageBlockSectionItem labelStyle="100%" dataStyle="100%">
                    <label for="reason for request">Reason for Request <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <textarea id="00Ne0000001xy1IEAQ" maxlength="255" name="00Ne0000001xy1IEAQ" style="width:100%px;height:70px;" wrap="soft" required="true" placeholder="Describe the Reason for the Request"/><br/><br/>
                    <label for="risk identification / impact analysis">Risk Identification / Impact Analysis <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <textarea id="00Ne0000001xy1SEAQ" maxlength="255" name="00Ne0000001xy1SEAQ" style="width:100%;height:70px;" wrap="soft" required="true" placeholder="Describe the Risks and Impact of the suggested change to work that is already complete."/><br/><br/>
                    <label for="implementation steps">Implementation Steps <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <textarea id="00Ne0000001xy1cEAA" maxlength="32000" name="00Ne0000001xy1cEAA" style="width:100%;height:70px;" wrap="soft" required="true" placeholder="Based on the impact, state the estimated date for implementing the requested change. State the new estimated project completion date."/><br/><br/>
                    <label for="test plan">Test Plan <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <textarea id="00Ne0000001xy1hEAA" maxlength="255" name="00Ne0000001xy1hEAA" style="width:100%;height:70px;" wrap="soft" required="true" placeholder="Describe the Test Plan."/><br/><br/>
                    <label for="rollback plan">Rollback Plan <b><font size="3" color ="FF0000">*</font></b> </label><br/>
                    <textarea id="00Ne0000001xy1m" maxlength="255" name="00Ne0000001xy1m" style="width:100%;height:70px;" wrap="soft" required="true" placeholder="Describe the Rollback Plan."/><br/><br/>
                    <br/><br/>
                    <input type="submit" name="submit"/><br/><br/>
                                        
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
       </apex:pageBlock>
       </div>

</apex:form>

</form>
    <div id="footer">
        <p class="copyright">Copyright 2018</p>
    </div>

</meta>
</head> 
</apex:page>

This is how it rendures when viewing the VF page Site.
User-added image
sindhura (Heptarc)sindhura (Heptarc)

Hello Courtney Church-Fasula 8,
<style>
text area { width:100%; }
</style>

And one more thing in the text area of "Describe the Reason for the Request" width you are giving the % and px also check that also.

Use this piece of code 
Hope this will help you.
Thank You.
Courtney Church-Fasula 8Courtney Church-Fasula 8
I actually had to add this ".bPageBlock .detailList .dataCol {width: 100%;} " to this part of the code
<style>
#col1,#col2{width:49%;display:inline-block;}
.bPageBlock .detailList .dataCol {width: 100%;}
</style>

then it all worked perfectly!!! Thanks for the help.