[Seaside] Twitter Bootstrap, Checkboxes and Seaside

[Joachim Tuchel]

We've recently used Bootstrap a lot to improve the look and feel and - 
even more important - cross-browser experience of some of our 
applications. So far, this has been a great experience, we achieve a lot 
in little time...

There is, however, a strange effect when it comes to Radio Buttons and 
Checkboxes. In Bootstrap on Seaside, these are misplaced by a few pixels 
(not in the middle of a line, but a few pixels further down). This only 
happens in Seaside, normal html pages do not show this effect (and I 
would have been very surprised if this were the case).

So we tried to find out what is different in Seaside that in the 
Bootstrap samples on getbootstrap.com.

And in fact, there is a difference: Seaside renders a checkbox like this:

<div class="checkbox ">
     <label>
         <input id="196064" class="checkbox" type="checkbox" name="24" checked="checked"></input>
         <input class="hidden" type="hidden" name="25"></input>
         Check this if you agree
     </label>
</div>

It turns out that if you remove class="checkbox" from the input tag, 
Bootstrap renders the checkboxes beautifully and aligned perfectly.

So it was time to dig into the way Seaside renders a checkbox, and here 
is what I found:

WAFormInputTag>>#with: aBlock
     self type isNil ifFalse: [
         self attributes at: 'type' ifAbsentPut: [ self type ].
         self class: self type ].  "This line causes the problem"
     super with: aBlock

This is not easy to fix by subclassing or anything, We even tried 
overriding the method, but Monticello turned Checkboxes into a mess 
after the overridden version of with: was loaded. We ended up fixing a 
private copy of Seaside (which, imo, is the worst possible solution):

WAFormInputTag>>#with: aBlock
     self type isNil ifFalse: [
         self attributes at: 'type' ifAbsentPut: [ self type ].
         self type = 'checkbox' ifFalse: [self class: self type] ].
     super with: aBlock


So here are a few questions that I'd like to ask and discuss with more 
experienced Seasiders:

* can anybody confirm the effect (Checkbox not vertical-aligned 
correctly as long as the class="checkbox") is present? And can you also 
confirm that removing the class fixes the issue in our browsers (I tried 
IE11, FF34 and 36, Opera and Safari 7.x)?

* Of course I could try to change Boostrap CSS files to not do whatever 
it does to .checkbox elements (I guess they wanted to allow for div, 
span etc, but never thought anybody would add a class "checkbox" to a 
checkbox input tag...). But it would feel strange to me, because it is 
not Bootstrap that is broken (well, you could argue about this, but, you 
know, I need to make an argument)

* Why is this extra class attribute being set for form inputs anyways? 
Is it really needed for anything (other than css referencing that could 
possibly better use [type="checkbox"]. Wouldn't it be best to remove the 
setting of the class in WAFormInputTag, or would this break things?

* Do others see a more elegant way to override the above-mentioned 
method for checkboxes? I can only think of extracting the erronous line 
to a method that could be overridden in WACheckboxTag to not set the 
class. But this would also mean I have to change Seaside code and/or ask 
the Seaside maintainers to accept this change. (Which, in the end, I do 
anyways ;-)


I look forward to your comments and suggestions and - hopefully - some 
support on my idea of completely removing that

self class: self type

thingie. I think it is just unnecessary.


Joachim