Mr


Author Message
Chris N

Posted: 6/25/2010
Quote message 

I'm having major problems with the width of text boxes in a module I'm developing. They are always set to width: 95% via a CSS rule (which I see using Firebug)...

element.style {
width:95%;
}

This overrides my attempt to make them narrow by putting a rule in module.css ...

.basket_textbox {
width:30px;
}

The generated markup is...

input id="dnn_ctr396_View_ctl00_gvBasket_ctl02_tbQuantity" class="basket_textbox" type="text" style="width: 95%;" maxlength="4" name="dnn$ctr396$View$ctl00$gvBasket$ctl02$tbQuantity"

There appears to be no CSS rule anywhere in the Artisteer-generated CSS files for this skin that sets textboxes to 95%, so now I'm wondering if the rule is generated on the fly in script.

I *do* notice a function in the Artisteer-generated script.js that appears to be a workaround for exactly the same problem in the Events module...

artLoadEvent.add(artFixEventsModule);

function artFixEventsModule() {

var evtModules = artGetElementsByClassName("DNN_EventsContent", document, "div");

for (var i = 0; i < evtModules.length; i++) {
var inputs = evtModules.getElementsByTagName("input");

for (var j = 0; j < inputs.length; j++) {
if (inputs[j].type == "text" && inputs[j].style.width == "95%")
inputs[j].style.width = "auto";
}
}

return true;
}

Googling element.style I read that this is typically set in a theme and trumps everything else. But I see no themes being used anywhere.

This *only* happens with the Article container. The width is as I set it when I use the Block container. But it's the Article container I want to use - the Block container doesn't render my module well at all!

Any help appreciated!
 
Fred

Posted: 6/26/2010
Quote message 

The element.style shown in Firebug is referring to the style set by the inline style attribute of the <input> tag. If you look at the related HTML in Firebug, you will see this.

Whatever generated the <input> tag (I don't think Artisteer) for you is what is setting the width to 95%. There is no way to override this using CSS. Inline styles take president over all other styling. The good news is that because the width is a percentage of the enclosing tag, you should be able to set the width of the enclosing tag to whatever you wish which should result in your being able to control the width of the text field. Hope this helps.

Regards,
Fred
 
Chris N

Posted: 6/29/2010
Quote message 

Thanks Fred. I'll play around with the enclosing container.
 
Chris

Posted: 11/17/2010
Quote message 

Actually: it looks like there's an issue in the generated skin Article.ascx.

The code is currently:
If Not (CType(ctl, TextBox).Width.IsEmpty) Then
CType(ctl, TextBox).Style("width") = "95%"
End If

To me this means: if you have set a width, then the skin adds 95% on; which is what I found.

So: the Not needs removing.

There's a separate question: should Width:95% be added to all textboxes which don't have a width?