Is there any way to shrink an ascx to make it fit in a fixed div?

Question

I have an ascx control and I need to to fit into a div on my page. I do not want to scroll it. Can I reduce it's size to make it fit correctly? The labels seem to be ok, but some of the table cells and textboxes could be shrunk and I believe it would fit ok. I was thinking of doing a jQuery select on the textboxes in the ascx and reducing their widths. One concern tho is that these textboxes use the "cols" attribute for their lengths. Can I set that value to 75% of what it currently is or something? Can you grab certain columns of a table in jQuery and only operate on those cells? Some columns will need to retain their width while others can clearly be shrunk.

I don't want to modify the exisitng ascx as it used throughout the app and the stakeholders want to use the same control on this page.

Thanks for any advice. ~ck in San Diego

Answer 1

You can over ride the hard coded styles with css and the !important flag. I wouldn't use javascript for this as I think that is an over kill.

Answer 2

Why don't you set a fixed size to containing DIV and set it as scrollable. All using CSS. No need for ASCX changes or anything else...

Answer 3

I think you could simply use CSS for this. Give your <div> an id attribute like "myDiv" or whatever.

The you can use CSS to style the <div> and its child elements:

#myDiv {
  width: 500px;
  height: 500px;
}

/* textarea within #myDiv */
#myDiv textarea {
  width: 100px;
}

/* td within #myDiv */
#myDiv td {
  width: 50px;
}

I believe that the CSS width property value will take precedence over the textarea's cols attribute (it did in my browser - Firefox 3.0, but you'd want to test in other browsers). You should be able to do what you need to do with CSS without jQuery, but you can do the things you were looking to do with jQuery too.