[Seaside] Twitter Bootstrap, Checkboxes and Seaside

Joachim Tuchel jtuchel at objektfabrik.de
Mon Mar 9 14:40:34 UTC 2015


Johan,

Thx a lot. So in 3.2 there will be no additional class=type tags by default, right?
This means I can remove the ifTrue: from my personal fix completely. This makes a lot of sense.

Joachim



> Am 09.03.2015 um 12:46 schrieb Johan Brichau <johan at inceptive.be>:
> 
> 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 <jtuchel at objektfabrik.de> 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
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> 
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20150309/ddfaab23/attachment-0001.htm


More information about the seaside mailing list