Pingle wrote:
OK, I thought it might have been an issue with my skin, so I changed to Dark Knight skin and the Aside_Title container.
No change when the container was located in the CenterPane. However, moving the container to the full width ContentPane did relocate the Categories label back in front of the dropdown box but the box itself didn't expand.
Same thing happened on my usual skin.
Ideas?
On the Hastings site it doesn't look like the change has been made to the Theme file, or at least it isn't there when I download MyTheme.css.
I am trying to work out a solution that will give you the flexibility you need, but also work for others as is. So please bear with me. Unfortunately the RadCombBox which we use for multi-select does not support auto width currently, so I think you will need to hard code the width you need in your Theme file. I'm also looking at the related changes needed to enable you to control the max width of the list as well.
To explain, previously the header was spliut up into thirds using tables, it has now been moved to table less design in line with current html standards. Divs (as far as I can find out) don't allow the same flexibility as tables in that whilst I may set the width of a table cell to 33% it may still grow outside that, whilst I don't believe divs will. This may of course be due to mky knowledge of css/html. So previously if the category list grew to bigger than 33% then it would still nicely centre on the overall table. Now it won't, it constrains at 33% and the 'Categories' title wraps to the row above. Not pretty.
So I'm proposing to make the column widths configureable via css, and the overall category list width configureable via css. When RadComboBox supports auto width, then some of this may not be needed anymore.
As a starter I propose that EventsList.ascx be changed (as will the other views be changed when released) from:-
<div style="min-width:33%;float:left;min-height:1px;"></div>
<div style="min-width:34%;float:left;min-height:1px;text-align:center;">
<evt:Category ID="SelectCategory" runat="server"></evt:Category>
</div>
<div class="TopIconBar" style="float:left;">
<evt:Icons ID="EventIcons" runat="server"></evt:Icons>
</div>
to:-
<div class="EvtHdrLftCol"></div>
<div class="EvtHdrMdlCol">
<evt:Category ID="SelectCategory" runat="server"></evt:Category>
</div>
<div class="TopIconBar EvtHdrRgtCol">
<evt:Icons ID="EventIcons" runat="server"></evt:Icons>
</div>
SelectCategory.ascx be changed from:-
<dnn:DnnComboBox ID="ddlCategories" runat="server" width="150px" CheckBoxes="True" EnableCheckAllItemsCheckBox="true"
AllowCustomText="False" DataValueField="Category" DataTextField="CategoryName" InputCssClass="CategoryFormat" DropDownCssClass="CategoryFormat">
To:
<dnn:DnnComboBox ID="ddlCategories" runat="server" CheckBoxes="True" EnableCheckAllItemsCheckBox="true"
AllowCustomText="False" DataValueField="Category" DataTextField="CategoryName" InputCssClass="CategoryFormat" DropDownCssClass="CategoryFormat">
And the following is added to the Theme files:-
.ThemeEvents .RadComboBox_Default {
width: 150px !important;
}
.ThemeEvents .EvtHdrLftCol {
width:33%;
float:left;
min-height:1px;
}
.ThemeEvents .EvtHdrMdlCol {
width:34%;
float:left;
min-height:1px;
text-align:center;
}
.ThemeEvents .EvtHdrRgtCol {
width:33%;
float:left;
}
You may then control the width of each element by adjustting the width appropriately.
Could someone try this and see if it is an appropriate solution?
Cheers
Roger