No replies
deanhiller
deanhiller's picture
Offline
newbie
US
Last seen: 10 years 19 weeks ago
US
Timezone: GMT-6
Joined: 2010-07-14
Posts: 3
Points: 5

I am using the following html which is a template to every label/field/errormessage throughout my application...

    <div class="entry">
    	<div style="spacer"></div>
    	<span class="label #{invalid?'errors':''}">
    		LABEL
    		<s:span rendered="#{not required}">(Optional)</s:span>
    	</span>
    	<span class="input #{invalid?'errors':''}">
    	    <s:validateAll>
                INPUTTEXTBOX
            </s:validateAll>
            <span class="error">ERRORMSG</span
        </span>
    </div>

We would like the css to be such that LABEL and INPUTTEXTBOX are on the same line and then ERRORMSG is on the next line BUT it is aligned with INPUTEXTBOX(ie. it starts right under the INPUTTEXTBOX and not the label.

I got to the point so far with the following css

.entry .spacer {
	height:15px;
	clear:both;
}
 
.entry .label {
	width: 200px;
	float: left;
}
 
.entry .input {
	position: relative;
}
 
.entry .error {
	position:absolute;
	left: 5px;
	top: 20px;
	display: block;
}

BUT the only problem is the elements below ERRORMSG don't move down when the ERRORMSG pops on the screen like I would like them too. It is like I took the ERRORMSG out of the flow so how do I get ERRORMSG back in the flow so it pushes anything below it down further? Right now, I just have to make the spacer big enough.

thanks,
Dean