You need to sign in to do that
Don't have an account?
Courtney 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.
<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.
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.
<style>
#col1,#col2{width:49%;display:inline-block;}
.bPageBlock .detailList .dataCol {width: 100%;}
</style>
then it all worked perfectly!!! Thanks for the help.