Question

I am having a really annoying problem in css. I am trying to align all the text for the input fields in a form (code shown below). For some reason the text that is two words long is kicking on to a second line(for example "First Name" below). Can anyone help me to get it to appear on one line because I've tried changing a lot of things and its just not working for me. Here is the code for the form (in JSF) and also I have attached the relevent CSS code. Thanks

## JSF ##
    <div class="register"><h:form id="registerForm">
    <div class="white"><h2>Add Business Account</h2></div>
    <h:messages errorClass="errorMessage" infoClass="infoMessage"
        warnClass="warnMessage"></h:messages>
    <table>
        <tr>
            <td><h:outputLabel for="firstName">
                    <h:outputText class="generaltext" id="firstNameLabel" value="First Name" />
                </h:outputLabel></td>
            <td><div class="inputboxpadding"><h:inputText class="inputboxes" id="firstName"
                    value="#{registerBean.businessAccount.firstName}" size="20" required="true" 
                    requiredMessage="Required field" validatorMessage="First name must contain between 3 and 15 characters">
                    <f:validateLength minimum="3" maximum="15"/>
                    <f:ajax event="blur" render="fnamemessage" /></h:inputText>
                    </div></td>
                    <td> <div class="validationbox"><h:message id="fnamemessage" for="firstName" class="validation"/></div></td>
        </tr>
        <tr>
            </h:commandButton></div></td>
        </tr>
    </table>
    <h:link value="Back to login" outcome="login" />
</h:form></div>


## CSS ##
.register {
font-family: Arial, Helvetica, sans-serif;
background-color: #6495ED;
width: 500px;
height:auto;
min-height:700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: auto;
border-style: solid;
border-width: 1px;
border-radius: 20px;
padding: 100;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}

.generaltext{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:bold;
color: white;
padding-left:20px;
padding-right:20px; 
}
Was it helpful?

Solution

Try specifying width for the div of the inputbox

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top