Calendar Control Behaving Badly

Question

I have a problem with a user control containing a calendar control. It looks OK in the design view in Visual Studio 2015:

However, in the browser, any browser, it looks like this:

I have tried to set the width to 330px wherever I can think of, but it always seems to get the width 1084 somehow!?

Where is the problem?

Here is the code for the user control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TimeKalender.ascx.cs" Inherits="Blodbanken.TimeKalender" %>

<link rel="Stylesheet" type="text/css" href="StyleSheet1.css" id="style" runat="server" visible="false" />

<div class="kalender" style="width:330px;">
    <asp:Calendar ID="Calendar1"  runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth" Width="100%">
        <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
        <DayStyle BackColor="#CCCCCC" />
        <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
        <OtherMonthDayStyle ForeColor="#999999" />
        <SelectedDayStyle BackColor="#E60000" ForeColor="White" />
        <TitleStyle BackColor="Red" BorderStyle="None" Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" />
        <TodayDayStyle BackColor="#999999" ForeColor="White" />
    </asp:Calendar>
</div>

<asp:Label ID="lblLedigeTimer" runat="server" Text="Available appointments:" Font-Bold="True"></asp:Label>
<br />

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem>08:00 </asp:ListItem>
    <asp:ListItem>09:00 </asp:ListItem>
    <asp:ListItem>10:00 </asp:ListItem>
    <asp:ListItem>11:00 </asp:ListItem>
    <asp:ListItem>12:00 </asp:ListItem>
    <asp:ListItem>13:00 </asp:ListItem>
    <asp:ListItem>14:00 </asp:ListItem>
    <asp:ListItem>15:00 </asp:ListItem>
</asp:CheckBoxList>

<asp:Button ID="Button1" runat="server" Text="Book it!" Width="119px" />

Have you tried using your browser's developer tools (F12) to see what CSS in your page is effecting it? — freefaller, Oct 29 '15 at 18:43
I have tried, but I cant figure it out. It seems the asp:calendar-tag turns into av variety of table-tags in html and thats where it all gets scrambled — Schpenn, Oct 29 '15 at 18:53
I do not have any css specifically applied to tables. At least not intentionally. I only have some applied to lists, which are for a nav-menu I use. — Schpenn, Oct 29 '15 at 19:07
I am using the asp calendar control, dragged and dropped from the tools pane. — Schpenn, Oct 29 '15 at 19:27
@Schpenn Which is why you should do as freefaller suggested and use your browser's tools to see what CSS is applying to your HTML elements. — mason, Oct 29 '15 at 21:29

score 0 · Answer 1 · answered Oct 29 '15 at 19:18

0

I'm not sure if this is it since you stated that you set the width to 330px but in the sample HTML you set the width to 100%

<asp:Calendar ... NextPrevFormat="ShortMonth" Width="100%">

Take that out the width definition and let the size be defined by the parent div

answered Oct 29 '15 at 19:18

Derek Van Cuyk

953
7
23

Well, youre right. This is an attempt at puting the whole thing inside a div thats 330px and setting the calendar at 100% within that. Same result :-( – Schpenn Oct 29 '15 at 19:20
Does it not fill the entire div if you leave that out? – Derek Van Cuyk Oct 29 '15 at 19:21
Sadly no. It doesnt seem to matter what I set as the calendar width or even if I remove the whole value. – Schpenn Oct 29 '15 at 19:26

score 0 · Accepted Answer · answered Oct 30 '15 at 06:26

0

Mystery solved!

It turned out that the asp:calendar-tag translates into a bunch og table-tags. And deeply nested in there are some a-tags that were affected by the css intended for the nav-menu.

Thanks for your input!

answered Oct 30 '15 at 06:26

Schpenn

108
1
11

1

The F12 comment was upvoted 6 times at time of this comment. Seriously learn to use it! you can troubleshoot all your weird CSS inheritance issues – Nick.Mc Oct 30 '15 at 06:30

Calendar Control Behaving Badly

2 Answers2