[CLOSED] Styling Composite Control

[jthompson]

I am trying to style a control that is made up of several controls. The problem I'm having is some style is being added to the mix that I need to remove and change. In Firebug I have isolated the problem and can change it and the control looks as I want it to, but I am unable to find out where this style is being added in the server side code.

Here is what is being generated, I was wondering if based on the classes and characteristics of this markup you could tell me how to change this on the server side. I have tried overriding all the classes to change the height but it always comes back to "height: 98px"

Here is the line in question and below that is the full markup generated for the control:

The part I need to control/change is "height: 98px"

<div id="ext-gen276" class="x-fieldset-body x-fieldset-body-noheader ux-mselect" style="width: 278px; height: 98px;"></div>

Full markup:

<div id="x-form-el-ContentPH_mc" class="x-form-element multcont" style="padding-left:255px">
<div id="ext-comp-1003" class=" x-form-composite x-box-layout-ct x-form-field" style="background-image: none; font-family: Arial; font-size: 12px; width: 305px; height: 102px; background-color: rgb(222, 222, 222); padding: 0pt; border: 1px solid rgb(181, 184, 200);">
<div id="ext-gen274" class="x-box-inner" style="width: 305px; height: 102px;">
<fieldset id="ext-comp-1006" class="x-fieldset x-form-fieldset x-form-field x-box-item" style="width: 280px; margin: 0px; border: 0px none; padding: 0px; height: 100px; left: 0px; top: 0px;">
<div id="ext-gen275" class="x-fieldset-bwrap">
<div id="ext-gen276" class="x-fieldset-body x-fieldset-body-noheader ux-mselect" style="width: 278px; height: 98px;"></div>
<input id="ext-comp-1007_SN" class=" x-form-hidden x-form-field" type="hidden" name="ext-comp-1007_SN" autocomplete="off" size="20">
</div>
<input id="ext-gen280" type="hidden" name="mc_multiselect" value="">
<input id="ext-gen281" type="hidden" name="mc_multiselect_indexes" value="">
<input id="ext-gen282" type="hidden" name="mc_multiselect_text" value="">
</fieldset>
<span id="ContentPH_mc_label" class="x-label x-hide-display x-box-item">
<div id="ContentPH_mc_pnlButtons" class="x-panel x-box-item" style="width: 15px; left: 285px; top: 0px;">
</div>
</div>

I just can't tell where this inline style code is being generated from, so was hoping based on the controls being used you would know. Thanks for any info...

[Vladimir]

Hi,

I think that the height is added by javascript code
I cannot say anything concrete without test sample

[jthompson]

Here is what is generated and what created it from the server side. What I need to know is what in Ext.Net created the div with the id of "ext-gen274":

This is the main composite control

<div id="x-form-el-ContentPH_mc" class="x-form-element multcont" style="padding-left:255px">

This is the composite control

<div id="ext-comp-1003" class="x-form-composite x-box-layout-ct x-box-inner-readonly" style="background-image: none; background-color: transparent; border: 0pt none; width: 305px; height: 102px; padding: 0pt;">

This is I don't know what generates it and I want to be able to change the class and height, etc, based on certain situations

<div id="ext-gen274" class="x-box-inner" style="width: 305px; height: 100px;">

This is the multiselect

<fieldset id="ext-comp-1006" class="x-fieldset x-form-fieldset x-form-field x-box-item x-box-inner-readonly" style="width: 280px; margin: 0px; border: 0px none; padding: 0px; height: 100px; left: 0px; top: 0px;">

Panel to contain buttons

<div id="ContentPH_mc_pnlButtons" class="x-panel x-box-item x-hide-display x-box-inner-readonly" style="width: 15px; left: 285px; top: 0px;">
</div>

[Daniil]

Hi,

We don't understand what you are trying to achieve. Please provide an ,aspx page which demonstrates the problem.