Visually grouping controls

[marc]

Hi,

I'm looking for a way to group related fields to make my forms more understandable for all users, as related controls are easier to identify and more intuitive to the user. Someting like a group box would come in handy. (A group box is a labeled rectangular frame that surrounds a set of related controls.). Any ideas how to do that?

Something like this:

form_two_groupboxes2.gif

form_two_groupboxes3.gif

[admin]

marc,

There is no nuBuilder Forte Object that does what you are asking.

Steven

[toms]

Hi,

The good thing about nuBuilder is that you can customize it. Here's an example how I create a visual grouping with HTML 5 canvas.

canvas.png

Default look would look like this:

default.png

All you need to do is add an Object (Type HTML) to your form with this HTML code:

Code: Select all

<style>
   canvas{position:absolute;left:0;top:0; z-index:-1; }
</style>

<canvas id="mycanvas" width="900" height="600"></canvas>

<script type="text/javascript">

   function roundedRect(id, x,y,width,height,radius, borderColor, fillStype){
       var canvas = document.getElementById(id);
       var ctx= canvas.getContext("2d");
        ctx.translate(0.60, 0.60);
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.lineWidth = 1;
        ctx.strokeStyle =  borderColor;
        ctx.stroke();
        ctx.fillStyle= fillStype; 
        ctx.fill();
        ctx.closePath();
      }
   
     var fillStyle= "rgba(237, 234, 234, 0.2)";
     var borderColor = "teal";

     roundedRect("mycanvas", 10, 10, 300, 110, 12, borderColor ,fillStyle);
     roundedRect("mycanvas", 10, 165, 300, 140, 12, borderColor ,fillStyle);
   
</script>

[toms]

Here is how to do it with pure CSS:

css.png

Code: Select all

<style>
#box{
    border:1px solid teal;
    position: absolute;
    border-radius: 7px;
    width: 200px;
    height: 100px;
    background-color:rgba(237, 234, 234, 0.3);
    z-index:-1; 
}
h1 {
    font-size: 12px;
    font-family: Tahoma,Geneva,Arial,sans-serif;
    background-color: #f5f9fa;
    position: relative;
    top: -16px;
    right: -10px;
    display: inline-block;
}
</style>

<div style=" top: 10px; height: 130px; width: 300px;" id="box">
    <h1 style="right: -10px;">ID Badge</h1>
</div>

<div style=" top: 160px; height: 150px; width: 300px;" id="box">
    <h1 style="right: -10px;">Access Card</h1>
</div>

[marc]

Wonderful, thank you so much toms!

[admin]

.