Unwanted Resize

[Matthew]

I'm using the ItemTemplate. In the template I have one user control which consists of a button and another control. The button controls the visibility of the other control. Not every instance of this user control is the same size. When the controls are initially hidden, clicking the buttons will reveal their respective controls as desired. However, when any of the controls are not initially hidden, the list view sizes all it's items to the potentially largest control whether or not that control is hidden. Any ideas why this would be occuring and how I can work around it? Thanks.

[Tsvetina]

Hi Matthew,

This isn't the default RadListView behavior, it does not apply sizing of its own to the elements. So, the reason should be somewhere in the templates declaration and/or styling. To be able to help you, we would need your RadListView declaration and any styles applied, so we can replicate and inspect the problem.

Kind regards,
Tsvetina
the Telerik team

[Matthew]

Here's the declaration:

<asp:Panel runat="server" Width="100%" style="position: relative; top: -2px">
    <telerik:RadListView runat="server" DataSourceID="ldsTeams" Width="100%">
        <ItemTemplate>
            <asp:Panel runat="server" style="margin-top: 2px">
                <scinet:TeamScheduler runat="server" TeamID='<%# int.Parse(Eval("EmployeeTeamID").ToString()) %>' />
            </asp:Panel>
        </ItemTemplate>
    </telerik:RadListView>
</asp:Panel>

Here's the user control:

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Panel ID="pnl" runat="server" CssClass="customRSHeader">
            <button id="btn" type="button" runat="server" onserverclick="lb_Click">
                <asp:Label ID="lbl" runat="server" />
            </button>
        </asp:Panel>
        <telerik:RadScheduler ID="rsTeamToday" runat="server" AllowDelete="false" AllowEdit="false" AllowInsert="false"
                ShowFooter="false" ShowHeader="false" ShowResourceHeaders="false" SelectedView="TimelineView"
                OverflowBehavior="Expand" Visible="false" DataSourceID="ldsSchedules" DataKeyField="ScheduleID"
                DataStartField="ScheduleStartDate" DataEndField="ScheduleEndDate" DataSubjectField="EmployeeName"
                DataRecurrenceField="ScheduleRecurrenceRule" DataRecurrenceParentKeyField="ScheduleRecurrenceParentID"
                OnTimeSlotCreated="rsTeamToday_TimeSlotCreated" OnAppointmentDataBound="rsTeamToday_AppointmentDataBound"
                OnDataBound="rsTeamToday_DataBound" RowHeight="20px">
            <TimelineView GroupBy="Employee" GroupingDirection="Vertical" ReadOnly="true" ShowInsertArea="false"
                StartTime="08:00:00" SlotDuration="00:15:00" NumberOfSlots="36" TimeLabelSpan="4"
                ColumnHeaderDateFormat="h tt" EnableExactTimeRendering="true" />
            <ResourceTypes>
                <telerik:ResourceType KeyField="EmployeeID" Name="Employee" TextField="EmployeeID"
                    ForeignKeyField="ScheduleEmployeeID" DataSourceID="ldsEmployees" />
                <telerik:ResourceType KeyField="ScheduleActivityTypeID" Name="Activity" TextField="ScheduleActivityTypeName"
                    ForeignKeyField="ScheduleActivityTypeID" DataSourceID="ldsActivityTypes" />
            </ResourceTypes>
            <ResourceStyles>
                <telerik:ResourceStyleMapping Type="Activity" Text="Work" ApplyCssClass="WorkSchedule" />
                <telerik:ResourceStyleMapping Type="Activity" Text="Sick" ApplyCssClass="SickSchedule" />
                <telerik:ResourceStyleMapping Type="Activity" Text="Vacation" ApplyCssClass="VacationSchedule" />
                <telerik:ResourceStyleMapping Type="Activity" Text="Extended Leave of Absence" ApplyCssClass="OffSiteSchedule" />
            </ResourceStyles>
        </telerik:RadScheduler>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btn" />
    </Triggers>
</asp:UpdatePanel>

The associated data sources are indeed there and working. The user control is auto-wired.

Here's some of the code-behind for the user control in case this is to blame:

protected void Page_PreRender(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        lbl.Text = TeamID == 0 ? "Full-Timers" : (from team in dbContext.EmployeeTeams
                                                  where team.EmployeeTeamID == TeamID
                                                  select team).Single().EmployeeTeamName;

        string pref = PreferenceUtility.GetPreferenceValue("TeamTodaySchedulersExpanded", dbContext, Profile);
        if (!String.IsNullOrEmpty(pref) && pref.Split(',').Contains(TeamID.ToString())) lb_Click(sender, e);
    }
}

protected void lb_Click(object sender, EventArgs e)
{
    if (rsTeamToday.Visible = !rsTeamToday.Visible) rsTeamToday.Rebind();
    if (pnl.CssClass == "customRSHeader") pnl.CssClass = "customRSHeaderPressed";
    else pnl.CssClass = "customRSHeader";
    if (IsPostBack) savePreference();
}

Here's my CSS:

.customRSHeader button
{
    border: 1px solid #C3D6E5;
    background: white;

    color: #336699;
    display: block;
    font-size: 15px;
    font-weight: normal;
    height: 25px;
    overflow: hidden;
    text-align: left;
    text-indent: 5px;
    width: 100%;
}

.customRSHeaderPressed button
{
    border: 1px solid #A9CCE8;
    background: #A9CCE8;

    color: white;
    display: block;
    font-size: 15px;
    font-weight: 500;
    height: 25px;
    overflow: hidden;
    text-align: left;
    text-indent: 5px;
    width: 100%;
}

.customRSHeader button:hover
{
    background: #A9CCE8;
    border: 1px solid #A9CCE8;
    color: white;
    font-weight: 500;
}

/* TeamToday Schedulers CSS */
.RadScheduler .rsTopWrap .rsContent
{
    border: 1px solid #A9CCE8;
}

.rsInnerFix .rsHorizontalHeaderTable th
{
    border: 1px solid #A9CCE8;
    border-right-style: none;
}

.rsHorizontalHeaderWrapper div
{
    width: auto;
}

.rsHorizontalHeaderTable
{
    border: 1px solid #A9CCE8;
    border-top-style: none;
    height: 21px;
}

.rsHorizontalHeaderTable tr:first-child th
{
    padding: 0px;
    border: 1px solid #A9CCE8;
    border-right-style: none;
    border-top-style: none;
}

.rsHorizontalHeaderTable tr th:first-child
{
    border-left-style: none;
}

.rsHorizontalHeaderTable tr th:last-child
{
    border-right-style: none;
}

th
{
    border: 1px solid #A9CCE8;
}

.rsInnerFix tr th div
{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);

    font: 12px/20px Corbel,Verdana,Tahoma,Helvetica,Geneva,Arial,sans-serif;

    position: static;
    text-align: center;
    padding-top: 0px;
    height: 20px;
}

.rsHidden { display: none; }

.rsContentWrapper .rsContentScrollArea .rsAllDayTable .rsAllDayRow
{
    height: 20px;
}

.rsContentScrollArea .rsAllDayTable .rsAllDayRow td
{
    border: 1px solid #A9CCE8;
    border-top-style: none;
    border-right-style: none;
}

.rsContentScrollArea .rsAllDayTable .rsAllDayRow .rsLastCell
{
    border-right: 1px solid #A9CCE8;
}

.rsAptIn .rsAptContent .rsAptRecurrence
{
    display: none;
}

Which should be overriding most if not all of this higher level stuff:

.rsHorizontalHeaderTable tr th
{
    background: #e0edf9 !important;
    position: relative;
    overflow: visible;
}

.rsHorizontalHeaderTable tr th div
{
    writing-mode: tb-rl;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    font-weight: normal;
    width: 38px;
    text-transform: uppercase;
    font: 11px/47px Corbel,Verdana,Tahoma,Helvetica,Geneva,Arial,sans-serif;
    position: relative;
    top: 15px;
    left: -19px;
    letter-spacing: 0.5px;
    text-align: left;
    padding-top: 36px;
    display: inline-block;
    white-space: nowrap;
}

.rsHorizontalHeaderTable tr:first-child th
{
    padding: 5px 0;
}

.rsVerticalHeaderWrapper
{
    position: absolute;
}

Thank you for looking into it. Let me know if there's anything else I can do.

[Matthew]

I still don't know why it's doing it, but I've countered it with this work around:

.rsContentWrapper .rsContentScrollArea .rsAllDayTable .rsAllDayRow
{
    height: 20px !important;
}