Intersoft Community - Width

WebMenuBar PlaceHolder Width in Chrome

hsevand@tepum.com.tr — Fri, 23 Oct 2015 13:51:10 GMT

Hi,

If you resize Chrome Window by decreasing the width enough, Chrome adds a style attribute width="0%" to td element of placeholder. As a result, after you increase the width of Chrome window, the other td elements of menubar expands and window buttons seem weird.

How can we fix this problem? I attached before and after images of menu bar.

After resizing html:

<table border="0" cellspacing="2" cellpadding="0" width="100%" height="100%" style="table-layout:fixed">	<tbody>
		<tr>
			<td class="dskTskBarButNrml" title="" style="width: 150px;">
				<div style="overflow:hidden; text-overflow: ellipsis; width:100%"><nobr> <img src="/Rhapsody.Web.UI.Presenter/ISRes.axd?D/is_window-16.gif" align="absmiddle"> Talep Yönetimi</nobr></div>
				<div id="divCloseTab" style="top: 3px; left: 259px; position: absolute; display: none;"><img style="text-align:right;vertical-align:top;width:13px;height:13px;cursor:pointer" title="Kapat" src="/Images/WebDesktop/CloseSmall.gif" onclick="closeWindowWithSaveControl2('Lst1400');"></div>
			</td>
			<td class="dskTskBarButNrml" title="" style="width: 150px;">
				<div style="overflow:hidden; text-overflow: ellipsis; width:100%"><nobr> <img src="/Rhapsody.Web.UI.Presenter/ISRes.axd?D/is_window-16.gif" align="absmiddle"> Varlık Yönetimi</nobr></div>
				<div id="divCloseTab" style="top: 3px; left: 1189px; position: absolute; display: none;"><img style="text-align:right;vertical-align:top;width:13px;height:13px;cursor:pointer" title="Kapat" src="/Images/WebDesktop/CloseSmall.gif" onclick="closeWindowWithSaveControl2('Lst508');"></div>
			</td>
			<td placeholder="true" width="100%" style="width: 0%;"> </td>
		</tr>
	</tbody>
</table>

How can I fix this problem?

custom css width not working under ie8

lybax — Fri, 03 Dec 2010 11:28:20 GMT

Hi there!

As IS WebCombo does not provide a CssClass in the main control, as overriding LayoutSettings styles (e.g. FrameStyle) using CssClass breaks the default design, we decided to set WebCombo.Width to 100% and define the actual (expected) width in a parent div element.

This solution (workaround) was rather satisfying on IE7 and FF (a bit less), but is not working anymore on IE8. Setting Width="100%" displays the WebCombo with a size of 150px. Without setting the Width, its size is 200px (hardcoded in inner controls!!!).

So my question is: What can I do?

Why is the WebCombo designed with hardcoded style (absolute, width, font-size)?
Why isn't there any way to properly override style using css class without breaking default style and without redefining all default style?
Some default css class are available (e.g. WC4-F-N), but not on all div: why?
Why is the WebCombo HTML structure (div elements) so weird and complicated?

I'm scratching my head for hours finding a "workable" bastard solution using "!important" css keyword everywere I can, in order to ignore IS hardcoded style (e.g. width:auto !important; height:inherit !important), but I'm stuck in this poor design... please help me!

</DIV></DIV>

</TR></TBODY></TABLE>

We are working on a project for more than a year using IS solution and we still hope there will be a clean solution for all our workaround we needed. And I'm not talking about WebGrids...

This becomes URGENT!

Thank you for your feedback and help.

Nico

WebCombo layout issue

lybax — Mon, 11 Jan 2010 09:16:31 GMT

2 questions (use attached txt file = aspx for demo):

1. As there is no CssClass property on WebCombos, I need to set the Width="100%" on WebCombos in order to be able to define the width in the stylesheet.

e.g. <

<div style="width:400px"><is:WebCombo ID="WebCombo2" runat="server" UseDefaultStyle="True" Width="100%" /></div> When I do so, the WebCombo's width shrinks on mouse over!!!

Do you have any other solution to avoid this using style?

2. I had the same kind of layout issue as http://www.intersoftpt.com/Community/WebCombo/Webcombo-inside-Webtab/

using a javascript collapsible panel (style.display = 'block' / 'none') containing WebCombos, resulting in unsuable WebCombos...

However, the "solution" provided looks more like a work-around than a real fix and this kind of issue is definitely a bug for me as I still need to use javascript DoResize method to fix it.

Do you have any other solution allowing me to use my collapsible panel without calling DoResize() on each WebCombo?

Thanks.

WebInput 3 Cannot Set Width Using CssClass Style

PRISMAY — Thu, 07 Jan 2010 10:40:07 GMT

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.