Verical space between fields on a form

CalD

Hi Everyone,

I'm sure there is a way to do this with CSS or something but I can't work it out, on a form can I reduce the amount of vertical space that aware naturally puts between field rows? I have a form with too many fields on it and want to get some space back, there is a fair amount of wasted space there...

Cheers

rbross

CSS is a the only way I know you can do it.
I am trying to find a good CSS example for doing this.
I have a form as well with 3 columns and i need to decrease the space between each field to make to a shorter form.
If you find a good example post it on the forum.

pureist

Have you read the following Topic in full?
V7 - form design - merge rows>

RentProperty

We simply have an Override in our own CSS file that does this. Looks like this:

.aw-form .form-inline .form-group, .form-inline .k-grid {
margin-bottom: .2em !important;
}

Obviously you can change the .2em to any value you like. We spent quite some time to build a CSS file that overrides a ton of things like that. Extra lines, Extra margins etc. You need to really decide what you want the Final result to look like by playing in the inspector and then making those global Kendo/Aware Overrides in your own CSS file. Worth it though.

Jaymer

RentProperty wrote
...

H & W... thanks for contributing that code.

rbross

RentProperty wrote
We simply have an Override in our own CSS file that does this. Looks like this:

.aw-form .form-inline .form-group, .form-inline .k-grid {
margin-bottom: .2em !important;
}

What does .em stand for? I have seen .px and .cm but not .em

RentProperty

That is a measuring unit that is Relative to the font-size of the element

Example: 2em means 2 times the size of the current font

RLJB

Any chance of a screen shot RentProperty?

rbross

I added this css to my css file and restarted AwareIM and cleared the cache in the browser.
It works great. Just copy and paste it and you should be good to go!

/* Vertical Spacing for a grid/
.thinrows .k-grid-content > table > tbody > tr > td > .k-button
{
padding-top:0px;
padding-bottom:0px;
line-height:30px;
}
/ Vertical Fields Spacing on Forms/
.aw-form .form-inline .form-group, .form-inline .k-grid {
margin-bottom: .5em !important;
}
/ Note field Spacing on Forms*/
.aw-column-multi textarea {
position: absolute;
}

RentProperty

Apologies for the delayed response. Was busy crunching for a new release this past weekend. 🙂

Do you mean screenshot of what my forms look like? Sure... Here's an example (Obviously, the Space was not the only thing we tweaked. As I mentioned we have a massive CSS file with tons of overrides. But the sceenshot should give a you an idea of the spacing)

Kindest Regards

Hein

CalD

That looks nice and tidy Hein, think I need to get some css skills again :-/