CSS size styling

I put this form together using CSS Form Builder and the form works great but even though I have used the Sharp template to style it and it is a single column of stacked fields there are still elements of the form that extend to the right far enough to trigger a horizontal scrollbar at the bottom of the container.

contactUs.php

Can you tell me where I need to go in the CSS for this form to pull these in so I can get rid of that scrollbar?

you only want to remove the bottom scrollbar?

if so, add overflow: hidden; to the .formBox style in the formStyles.css file:



.formBox {
background-color: #dcdcdc;
height: auto;
width: 600px;
margin-left: 25px;
position: relative;
bottom: 95px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 8px;
overflow: hidden;
}

I don't think this will work because the page design requires overflow:auto for the vertical scrollbar to be present with content the extends below the page bottom. I'm looking for a way to pull the size of the form down so it doesn't extend past the actual visably displayed size of the form on the page.

have you actually tried it?


it will leave the vertical scroll bar but remove the horizontal one if you try it out.

Hi Jason,

Yeah I tried that but the vertical scrollbar disappears too when I set it to hidden.

It looks like the validation elements in the form extend the size of the form to almost twice the visable parts that are displayed. So, I'm trying to find a way to pull those in so it doesn't trigger that horizontal scrollbar.

then try adding the overflow: hidden to the form.Sharp_Default element in the fd_sharp_default.css file.


you already have overflow:auto applied to the parent element, which will trigger the vertical scroll bars, adding overflow: hidden to a child element will hide the horizontal scroll bar.