WebInput 3 Cannot Set Width Using CssClass Style

7 replies. Last post: January 18, 2011 9:16 PM by Glenn Layaar
Tags :
A YousifMember

Seems that I can't set the width unless I use the WebInput Width property.  I've tried everything I can think of via CssClass and the width will not use my class setting.

The styles used on the test page:

<style type="text/css">
.Ctl_Calendar
{
	background-color: #ffffff;
	border: solid 0px #DDCCCC;
	font-family: Calibri;
	font-size: 10pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	width: 100%;
	height: 22px;
}

.Ctl_Calendar_Frame
{
	border: solid 1px #DDCCCC;
	width: 100%;
	height: 22px;
}

.Ctl_Calendar_DropDown
{
	font-family: Webdings;
	border: none;
	background-color: white;
	color: #DDCCCC;
	cursor: pointer;
}

.Ctl_Calendar_TextBox
{
	background-color: White;
	border-style: none;
	font-family: Calibri;
	font-size: 9pt;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	border-collapse: collapse;
	width: 100%;
	height: 22px;
}
</style>

Seems that I can't set the width unless I use the WebInput Width property.  I've tried everything I can think of via CssClass and the width will not use my class setting.

<ISWebInput:WebInput ID="dt1" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" 
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="true">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

<br />

<ISWebInput:WebInput ID="dt2" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" 
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="false">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

<br />

<ISWebInput:WebInput ID="WebInput1" runat="server" IsDesignInitialize="False"
    CssClass="Ctl_Calendar" CausesValidation="False" Width="100%"
    MaxDate="12/31/9998 23:59:59" MinDate="1753-01-01" UseDefaultStyle="true">

<CultureInfo CultureName="en-US"></CultureInfo>

<DisplayFormat IsEnabled="true" IsValidateOnChange="true" Type="DateTime"
    Format="dd-MMM-yy">
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</DisplayFormat>
<DateTimeEditor IsEnabled="true"></DateTimeEditor>
<EditFormat IsEnabled="true" IsValidateOnChange="true" IsValueSpinnable="true"
    ErrorText="Invalid date selected" Type="DateTime" Format="MM/dd/yyyy">
    <MaskInfo EmptyAsNull="true" MaskExpression="00/00/0000"></MaskInfo>
    <ErrorWindowInfo IsEnabled="true">
    </ErrorWindowInfo>
</EditFormat>
<DropDownStyle>
    <Active CssClass="Ctl_Calendar_DropDown"></Active>
    <Normal CssClass="Ctl_Calendar_DropDown"></Normal>
    <Over CssClass="Ctl_Calendar_DropDown"></Over>
</DropDownStyle>
<FrameStyle>
    <Active CssClass="Ctl_Calendar_Frame"></Active>
    <Normal CssClass="Ctl_Calendar_Frame"></Normal>
    <Over CssClass="Ctl_Calendar_Frame"></Over>
</FrameStyle>
<TextBoxStyle>
    <Active CssClass="Ctl_Calendar_TextBox"></Active>
    <Normal CssClass="Ctl_Calendar_TextBox"></Normal>
    <Over CssClass="Ctl_Calendar_TextBox"></Over>
</TextBoxStyle>
    <HighLight IsEnabled="True" />
</ISWebInput:WebInput>

The first calendar uses the default style, the second does not and the third uses the Width property.  Note that only the third one works because it explicitly uses the Width property.  The first and second do not adhere to the CssClass which has the width set to 100%.

You can put the code above in a table and set the cell width to, say, 400px and you'll see that only the third object sizes to fit the cell, the other two do not.

Also, the calendar that does not use the default style, i.e., UseDefaultStyle="false" crashes when I try to pull it down with the error "Microsoft Javascript runtime error: 'd' is null or not an object."  The javascript code snippet it breaks at is the dotfuscated v4e272.d.innertHTML=vde196; where v4e272 is valid but d is indeed null.

Answers

In some cases, the property of the component will be written as an element style, such as width in WebInput. In those cases, you will need to use the width property of the component to modify the width. The cssClass property will be overridden by the element style.

A bug report has been submitted for the calendar with UseDefaultStyle="false". We will inform you if there is any update or progress regarding this issue.

All Replies

In some cases, the property of the component will be written as an element style, such as width in WebInput. In those cases, you will need to use the width property of the component to modify the width. The cssClass property will be overridden by the element style.

A bug report has been submitted for the calendar with UseDefaultStyle="false". We will inform you if there is any update or progress regarding this issue.

A YousifMember

Thanks for the info.  I think if the Width property is not assigned then it should not override the class by setting the width element.  By doing so, you can't really customize this without exposing a Width property on a control derived from WebInput, i.e., cannot completely drive it with a style sheet.  Thanks.

Thanks for the info. I think if the Width property is not assignedthen it should not override the class by setting the width element. By doing so, you can't really customize this without exposing a Width property on a control derived from WebInput, i.e., cannot completely drive it with a style sheet. Thanks.

Thank you for the suggestion, I will discuss you concern with the develo[er for implementation in the future release of WebInput.

Hi Glenn,

 

I would like to change the color of individual tabs when they are hovered over and then another when clicked on (made 'active'). I tried using style-active-backcolor but it didn't work, nor did any of the others.

 

I may be doing this incorrecdtly but I suspect it is the same bug discussed above, i.e. the element style (TabItemStyle - I assume) is overriding my changes.

The issue is caused by a bug in the WebTab not by the element style overriding the css class value. A bug report has been submitted to our developer.

In your next post, please create a new thread of your issue if the issue occurs in a different control, you could refer this thread by linking it in your new thread if you suspect that the issue is similar.

Tot'cha. Thanks, Glenn. I thought these two were part of the same package but I hadn't thought to just refer to this thread in my own post. I'll do it that way in the furture.

-Penn

Hi Glenn,

 

I would like to change the color of individual tabs when they are hovered over and then another when clicked on (made 'active'). I tried using style-active-backcolor but it didn't work, nor did any of the others.

 

I may be doing this incorrecdtly but I suspect it is the same bug discussed above, i.e. the element style (TabItemStyle - I assume) is overriding my changes.


Based on further analysis by the developer, individual WebTab item style has not been supported. A feature request must be made in order for WebTab to support this feature in future release.

All times are GMT -5. The time now is 5:50 PM.
Previous Next