When you create a checkbox, the CSS style parms do not work all that well and you get a ghastly thing like this:
Fig1 No styling other that saying there are 3 columns.
What i want is a 5px gap between the box and the label and the label to be a set length.
I have fiddled and footered about with the object trying things like
"[p class='cb1']Customer[p]|Customer" for the available text values in the CB list.
But no matter what I select the list always comes out all higgleded piggly.
Eventually I gave in trying to be smart and I fudged it by doing this
1. Stash the list of available options in an NSF wide Profile Doc Field called SysConfig
2. Place a CB field on the form but Hide it From the Web
3. Place an empty [div] with an id = 'ooi' on the form where I want the Check boxes to appear
3. I ensure the form has "create HTML for all fields"
4. I stick this code on the page up near the top
[script language='javascript']var OOI = '[Computed Text]';[/scrip]
where Computed text =@getprofilefield("SysConfig";"OrgOfIdea");
5. I create a function createOOI() in the JS Header and then call it on the onLoad event of the page
6. The createOOI function looks like this
function createOOI()
{
var OOIa = OOI.split(";");
target = document.getElementById("ooi");
tHTML = "[table]";
ct=1;
for(t=0;t LT OOIa.length;t++)
{
if(ct==4)
{
tHTML=tHTML+"[/tr]"
ct=1;
}
if(ct==1)
{
tHTML=tHTML+"[tr]"
}
tHTML = tHTML+"[td class='cb3'][input style='margin-right:5px;' type='checkbox' name='ooicb' value='"+OOIa[t]+"']"+OOIa[t]+"[/td]"
ct=ct+1
}
tHTML = tHTML+"[/table]";
target.innerHTML = tHTML;
}
07. Place a pseudo class of .cb3 into the CSS file for this form with the width, font, spacing etc set
This results in a nicely formatted table of Checkboxes like this.
Doing it this way means that you have a field with a name OOICB which does not actually appear on the form so you have to do two extra things in the JS.
01. Move the selected boxes from the OOICB field to your hidden parent CB field as a ";" delimited list
02. Test your hidden Parent CB field on page load event after the OOICB has been added to the dom to check those fields that have been selected already.
This is a PAIN and there has to be an easier way but i am buggered if I can see what it is.
Fig1 No styling other that saying there are 3 columns.What i want is a 5px gap between the box and the label and the label to be a set length.
I have fiddled and footered about with the object trying things like
"[p class='cb1']Customer[p]|Customer" for the available text values in the CB list.
But no matter what I select the list always comes out all higgleded piggly.
Eventually I gave in trying to be smart and I fudged it by doing this
1. Stash the list of available options in an NSF wide Profile Doc Field called SysConfig
2. Place a CB field on the form but Hide it From the Web
3. Place an empty [div] with an id = 'ooi' on the form where I want the Check boxes to appear
3. I ensure the form has "create HTML for all fields"
4. I stick this code on the page up near the top
[script language='javascript']var OOI = '
where Computed text =@getprofilefield("SysConfig";"OrgOfIdea");
5. I create a function createOOI() in the JS Header and then call it on the onLoad event of the page
6. The createOOI function looks like this
function createOOI()
{
var OOIa = OOI.split(";");
target = document.getElementById("ooi");
tHTML = "[table]";
ct=1;
for(t=0;t LT OOIa.length;t++)
{
if(ct==4)
{
tHTML=tHTML+"[/tr]"
ct=1;
}
if(ct==1)
{
tHTML=tHTML+"[tr]"
}
tHTML = tHTML+"[td class='cb3'][input style='margin-right:5px;' type='checkbox' name='ooicb' value='"+OOIa[t]+"']"+OOIa[t]+"[/td]"
ct=ct+1
}
tHTML = tHTML+"[/table]";
target.innerHTML = tHTML;
}
07. Place a pseudo class of .cb3 into the CSS file for this form with the width, font, spacing etc set
This results in a nicely formatted table of Checkboxes like this.
Doing it this way means that you have a field with a name OOICB which does not actually appear on the form so you have to do two extra things in the JS.01. Move the selected boxes from the OOICB field to your hidden parent CB field as a ";" delimited list
02. Test your hidden Parent CB field on page load event after the OOICB has been added to the dom to check those fields that have been selected already.
This is a PAIN and there has to be an easier way but i am buggered if I can see what it is.
4 comments:
well you dont need to create a table around it, on www.notestips.com there used to be an article on this just using span tags and some CSS. I do not know if that website is still around...
@Quintessens
Thanks :-)
Tried that but I need the width to be set and to do this with a span you need to change the default display type from INLINE to BLOCK. In effect making the [span] a [div] and positioning by CSS can be more of a pain that programmatically creating a table to put the check-boxes in.
Steve
Did you consider manually creating the HTML CB field and putting it into some div's with float:left style?
Try this:
[div style="float: left; width: auto;"]Some text here...[br]More text here...[br]This is a whole lot of text to make this line longer!!![/div]
[div style="float: left; width: auto;"]Some text here...[br]More text here...[br]This is a whole lot of text to make this line longer!!![/div]
[div style="float: left; width: auto;"]Some text here...[br]More text here...[br]This is a whole lot of text to make this line longer!!![/div]
/Peter
@Peter - I tried that and it was not totally satisfactory, most browsers were ok, IE6 was IE7 wasn't and dropped the 3 column down a line unless the div was around 5px shorter than the containing div's width. Which made it look rather odd in the other browsers
There was little difference between the complexity of the code between the table and the div solution. The main issue I had was that it was not a fixed length CB list. It can be added to and taken away from .. on a day by day basis so the code that produced them had to be flexible enough to produce different lists on different days.
Steve
Post a Comment