Page 1 of 1
Visually grouping controls
Posted: Tue May 15, 2018 5:12 pm
by 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
Re: Visually grouping controls
Posted: Wed May 16, 2018 2:56 am
by admin
marc,
There is no nuBuilder Forte Object that does what you are asking.
Steven
Re: Visually grouping controls
Posted: Wed May 16, 2018 6:44 am
by 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>
Re: Visually grouping controls
Posted: Wed May 16, 2018 9:44 am
by 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>
Re: Visually grouping controls
Posted: Wed May 16, 2018 11:45 am
by marc
Wonderful, thank you so much toms!
Re: Visually grouping controls
Posted: Wed May 16, 2018 8:31 pm
by admin
.