Skip to main content
Kinetic Community

The One Column Layout - or how float:left fixes almost everything

As an Administrator of Kinetic Request or Kinetic Survey, You will create the look and feel that everyone will use when filling out questions.  You might be replacing an existing application or form, or you might be coming up with something brand new that has high expections.  If your requirements are:

   1. Intuitive and easy to use with no training
   2. Looks clean and professional with minimal scrolling
   3. Provides help text where questions might arise
   4. Can provide a standard for future needs

The one-column layout might be for you!  Here's an example of what we have in mind:

request.JPG

You may have seen this look from other applications.  It looks simple enough but there are a few gotchas to watch out for.  Let's create one from scratch starting with the out of the box look of a Kinetic Request:

Bridgekeeper-1.jpg

Well that looks pretty raw so let's see if we can get things in order.  We are going to put the question labels to the left of the questions by adding float:left to the css of the .questionLabel class.  You can do so in the Style tab of the Service Catalog Console (for Kinetic Request) or the Kinetic Survey Author Console.

.questionLabel{
    font-weight:bold;
    float:left;
}

The result:

Bridgekeeper-2.jpg

Now we have the question labels on the left but as you can see, we have a couple more concerns.  The answer areas don't line up, and we need a place for our help text to the right.  To line up the answer areas, we set a width for the question label.

.questionLabel {

font-weight:bold;
float:left;
width:40%;

}

This percentage we are using is within the question layer.  Right now our questions are as wide as the page (default) which leaves no room for our help text.  Let's do a 60/40 layout so the questions are 60% of the width of the page.  To do this, we set the style of the question layer.
  (Knock off a point for padding)

.questionLayer {

padding:2px;
width:59%;
float:left;

}

We are also floating the question layer because we want the help text next to its question.

Help Text

The help text will also need some styling to keep it on the same level as its question.  Let's set the width to our 60/40 layout, again knocking off a point for padding.  By the way, we don't want to impose this style on ALL text elements so we are going to use a css class that we define in the Custom Header Content.  This is a temporary solution for mock-up so use a style sheet if your solution becomes permanent.  Assign the helpText class to each dynamic text element that you will use as help text.

.helpText {
  width:39%;
}Bridgekeeper-3.jpg

That's starting to look better, but why isn't our help text to the question(s)?  You might think that the help text elements are still too wide, but you can make them as skinny as you want and they will still insist on aligning to the left of the page.  Since we've floated the question layer, the help text is our first non-floated element.  This means that because all of the Kinetc Request (and Survey) elements are block-level, the question is floating on top of its help text.

The solution is, you guessed it - float:left!  If we float the help text it will be forced to follow the other floated elements:

Bridgekeeper-4.jpg

As you can see, I couldn't resist introducing another gotcha.  I've changed the last question to be a vertical radio button instead of a list box.  However, the radio buttons aren't lining up like they should.  We are going to use float:left to fix it (of course), this time on the questionAnswer layer.

.questionAnswer{
  float:left;
}

This works for the same reason that we were able to fix the help text.  The answer element floats next to the label element which prevents it from wrapping its content.

Bridgekeeper-5.jpg

This should give you a good start on creating a simple layout for most end users.