Twitter Bootstrap, Checkboxes and Seaside

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



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Hey Joachim,
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Hey Joachim,

This is something we indeed changed in Seaside 3.2.0 [1]

It’s not released yet but it will do what you want.

cheers

Johan

[1] https://code.google.com/p/seaside/wiki/Seaside320Changelog

On 08 Mar 2015, at 19:57, Joachim Tuchel <[hidden email]> wrote:

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



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside