I've a list of checkboxes and a fieldtext:
default should show like:
[X] abc [ ] def [ ] ghi ...
[X] other
Other [fieldtext]
It should be turned into:
[X] abc [ ] def [ ] ghi ...
[X] other [fieldtext]
I do know that the checkbox and the textfield are redundant... but well that's what I've to obtain.
Generated HTML looks like: <div class="form-item"> <label>Label </label> <div class="form-checkboxes"> ...
<div class="form-item"> <label class="option"><input type="checkbox" ... class="form-checkbox" /> Altro</label> </div> </div> </div>
<div class="form-item"> <label for="blabla">Other: </label> <input type="text" maxlength="128" name="other" id="other" size="60" value="" class="form-text" /> </div>
Using css only I find pretty hard to make the textfield fall down and align with the last item on the checkbox list since it is outside of the div of the last item. (float: right/left don't do the job). It'd be nice to inject the textfield in the same div field of the last checkbox... but this require to write a not obvious hard to maintain theme_ function.
I bet other people faced the same problem so I think someone came up with an elegant solution.
Here's some things I might have tried, given access to the source. If not then you've got a tough job ahead of you.
* Wrap the whole thing in a fieldset, (you can always turn the borders off if you don't like them). This should give you more css control.
* Try Using #prefix and #suffix to wrap the whole mess in a div to give you more css control.
* Change the checkboxes into a checkbox variable with #tree=true, this makes the other box at the same level (Alternately you could aways tweek the code to add 'Other' to the options array.
* add the other box to the options array.
Sorry , I realize these aren't complete solutions, but I thought I'd share them anyway, in case you just needed some quick ideas.
Dave
-----Original Message----- From: support-bounces@drupal.org [mailto:support-bounces@drupal.org] On Behalf Of Ivan Sergio Borgonovo Sent: Monday, March 17, 2008 6:56 AM To: support@drupal.org Subject: [support] Non intrusive form layout change in 5.X
I've a list of checkboxes and a fieldtext:
default should show like:
[X] abc [ ] def [ ] ghi ...
[X] other
Other [fieldtext]
It should be turned into:
[X] abc [ ] def [ ] ghi ...
[X] other [fieldtext]
I do know that the checkbox and the textfield are redundant... but well that's what I've to obtain.
Generated HTML looks like: <div class="form-item"> <label>Label </label> <div class="form-checkboxes"> ...
<div class="form-item"> <label class="option"><input type="checkbox" ... class="form-checkbox" /> Altro</label> </div> </div> </div>
<div class="form-item"> <label for="blabla">Other: </label> <input type="text" maxlength="128" name="other" id="other" size="60" value="" class="form-text" /> </div>
Using css only I find pretty hard to make the textfield fall down and align with the last item on the checkbox list since it is outside of the div of the last item. (float: right/left don't do the job). It'd be nice to inject the textfield in the same div field of the last checkbox... but this require to write a not obvious hard to maintain theme_ function.
I bet other people faced the same problem so I think someone came up with an elegant solution.
On Mon, 17 Mar 2008 10:52:41 -0700 "Metzler, David" metzlerd@evergreen.edu wrote:
- Try Using #prefix and #suffix to wrap the whole mess in a div to
give you more css control.
I was not able (I'm not a css black belt) to obtain exactly what I was looking for but I got nearer... The textfield is aligned to the first element of the list of checkboxes.
I added an array level just to wrap the 2 elements with a div
$form['somegroup']['wrapper']=array( '#prefix'=>'<div class='other_container>', '#suffix'=>'</div><div class="clearer"></div>', ); $form['somegroup']['wrapper']['radiofield']=Array( '#prefix'=>'<div class="other_left">', '#suffix'=>'</div>', // ... ); $form['somegroup']['wrapper']['radiofield']=Array( '#prefix'=>'<div class="other_right">', '#suffix'=>'</div>', // ... ); //...
// already part of theme css: .clearer { clear: both; height: 1px; } .other_conainer { } .other_left { float: left; } .other_right { padding-top: 10px; }
I think I could put it at the bottom but it does look that there are higher chances it won't work on some browsers... Some css wizard may help.
- Change the checkboxes into a checkbox variable with #tree=true,
this makes the other box at the same level (Alternately you could aways tweek the code to add 'Other' to the options array.
It was an option... but that would put too much layout stuff in code and make the code longer.
- add the other box to the options array.
???
thanks
-
Ivan Sergio Borgonovo -
Metzler, David