понедельник, 22 сентября 2008 г.

Rico javascript framework background color bug

I found a bug (1.png) with a background color of the element (tested on FireFox 2 and IE 7).

My code:
HTML:

<div id="product_1" class="product">
    <div class="productText">Product 1</div>
</div>


JS:

Rico.Corner.round("product_1", {border: '#CCCCCC', color: "#FFFFFF"});


CSS:

.product {
background-color: white;
width: 100%;
vertical-align: center;
margin-bottom: 15px;
}

.productText {
background-color: white;
color: black;
display: block;
float: left;
font-weight: bold;
vertical-align: middle;
text-align: left;
}


My solution: Open ricoStyles.js, find function _renderBorder() and replace it with the following:


_renderBorder: function(el,color,bgColor) {
var borderValue = "1px solid " + this._borderColor(bgColor);
var borderL = "border-left: " + borderValue;
var borderR = "border-right: " + borderValue;
var backgroundColor = "background-color: " + (this._isTransparent() ? "transparent" : color);
var style = "style='height:100%;" + borderL + ";" + borderR + ";" + backgroundColor + "'";
el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>"
},


Then find the call of the _renderBorder() (line #354 for me):


if(this.options.border)
this._renderBorder(e,bgColor);


And replace with:


if(this.options.border)
this._renderBorder(e,color,bgColor);


File 2.png contains the result.



1.png




2.png

Комментариев нет: