I am working asp.net 3.5. My page is displaying properly in IE but not in mozilla. See The image. Can anyone help how to solve this issue. I am hiding or showing Reject/ Reschedule : option on click event.
<tr>
<td align="right" style="padding-top: 4px" id="trRejResch" runat="server">
Reject/ Reschedule :
</td>
<td align="left" style="height: 25px;" id="trRejResch1" runat="server">
<telerik:RadComboBox OnClientKeyPressing="onKeyPressing" ID="txtRejResch" MarkFirstMatch="true"
runat="server" Width="157px" Height="60px" CollapseDelay="0" CollapseAnimation-Duration="0"
DataSourceID="sqlDSRejResch" DropDownWidth="154px" AllowCustomText="true" DataTextField="nTypeDesc">
</telerik:RadComboBox>
<asp:SqlDataSource ID="sqlDSRejResch" runat="server" ConnectionString="<%$ ConnectionStrings:SqlConnectionString %>"
SelectCommand="select nTypeDesc from NoteType where nType in (2,3)" />
</td>
</tr>
Grab firebug for Firefox and use it's layout tab to determine whats going on.
The div you are defining to hold the reject/schedule drop down just isn't large enough and it's overflowing and spilling down.
Also, make sure you are using the HTML 4.01 Strict doctype if you can. This will help make sure that the different browsers display the same thing.
Related
I have used a Label in a repeater control, which shows a tool tip. However, it is too small and is difficult to read. So I would like to change the format (apply css) to that tool tip.
Any ideas?
<td align="left" style="width: 145px">
<asp:Label ID="lblItem" Text='<%# Eval("Add1").ToString().Substring(0, Math.Min(Eval("Add1").ToString().Length, 20))+"..." %>'
ToolTip='<%# Eval("Add1")%>' runat="server" />
</td>
Use jQuery to show tool-tip, its best solution for this, see following link which can be help full to you.
Animated Tooltip Javascript this will be very useful, and surely its working because I had already used them.
I try to set two control in a td.
1. use a panel. as follow.
<td style="display: inline;">
<asp:Panel ID="pContainer" runat="server" Wrap="false">
<telerik:RadTextBox ID="rtxtBookingID" runat="server"></telerik:RadTextBox>
<asp:RequiredFieldValidator ID="rfvBookingID"
runat="server" ControlToValidate="rtxtBookingID" ErrorMessage="|Booking ID"
Display="Dynamic"></asp:RequiredFieldValidator>
<telerik:RadButton ID="rbtnOpen" runat="server" Text="Browse" OnClientClicked="openViewWindow()"/>
</asp:Panel>
</td>
how to solve the problem.
if I use two td to place the two control . but the first control in the td will gernerate a div. so the two control distance is far?
As long as it works and you get ok behaviour you are fine and for layout issues you should use css. The way you place the controls on the page also depends on overall page design and structure, keep in mind that usage of tables to control layout is not promoted anymore and you should use divs and css whenever possible... again depending on whole page design of course.
I was wondering why the following code:
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None
AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
produces the combobox with label "Days" to the right off of it in IE9 and FireFox but when I run it using Chrome the "Days" label appears below the combo box?
How do I make it to be drawn to the right off the combo box like the rest of the browsers?
First up the Combo Box is not part of the "Standard" asp.net controls. I'm assuming you are using the asp.net AJAX Toolkit for this. As the Combo box is a compound control it does not render "Clean HTML" eg:
<select id="DropDown1"></select> Days
Instead it renders:
<div id="DropDown1" style="display:inline-block;">
<table id="DropDown1_Table"
class="ajax__combobox_inputcontainer"
cellspacing="0"
cellpadding="0"
border="0"
style="display:inline-block;border-width:0px;border-style:None;border-collapse:collapse;position:relative;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer">
<input name="DropDown1$TextBox"
type="text"
id="DropDown1_TextBox"
autocomplete="off"
style="width:30px;" />
</td>
<td class="ajax__combobox_buttoncontainer">
<button id="DropDown1_Button"
type="button"
style="visibility:hidden;"></button>
</td>
</tr>
</table>
<input type="hidden"
name="DropDown1$HiddenField"
id="DropDown1_HiddenField"
value="-1" />
</div> Days
Which for me in chrome 14 displays with the Days in the same line as the drop down.
The thing to note is the div wrapping up the combo box control. Either the version on chrome you are using is ignoring the display:inline-block; style or you have some CSS somewhere that is somehow overriding this.
Maybe look at using the standard controls and use jQuery and page methods to roll your own combo box, or better still look at FlexBox.
Which version of chrome on which OS is causing the issue?
If you don't need AJAX functionality just use the standard ASP:Dropdown control.
UPDATE:
Using Microsoft's Combo Box Sample page reproduces your issue in Chrome. Looking at the rendered code it is different in IE and Chrome. This leads me to believe I have a different version of the tool kit to yourself and Microsoft (probably older!)
IE uses display:inline-block while chrome renders display:inline which would be causing the display anomaly.
To work around the issue with the version of the toolkit you are using, I would try the following:
<div style="display:inline-block">
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox>
</div>
<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
I guess no one gets the "correct answer" check for this one.
Here's how I was able to "patch it" -- again, good ol' table came to rescue...
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign="bottom" width="1%"><asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True"></asp:ComboBox></td>
<td valign="bottom" width="99%"> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal></td>
</tr>
</table>
On the side note, I don't know guys how you can use that ASP.NET & VS2010. Both are such a headache and I'm so glad that my short stint with it is over!!!
"why do I need to wrap attributes into quotes"
Yes, you do need to pick up a good book on HTML / CSS and study it.
I have the following problem with Opera.
The following asp.net code
<asp:Image runat="server" ID="imgExpand"/>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
ImageControlID="imgExpand"
ExpandedImage="<%$ Image:collapse.png %>"
CollapsedImage="<%$ Image:expand.png %>"
/>
generates the following in FF3, IE6, IE7, IE8:
<img style="border-width: 0px;" src="/style/img/collapse.png" id="ctl00_ContentPlaceHolder1_imgExpand" title="Ausblenden..."/>
however the following in Opera 10:
<img id="ctl00_ContentPlaceHolder1_ucProductList_rptProducts_ctl02_imgExpand" class="expand-img" src="" style="border-width:0px;"/>
As you can see the src="" is empty and thus no image is beeing displayed.
Do you know any solution to this problem?
Thanks alot
Sounds pretty weird. I haven't heard of that particular error, but you could probably work around it the same way you can avoid all the problems associated with ASP.NET's idiotic, broken browser-sniffing: turn it off.
Discovered the same problem. But noticed that official example is working under Opera. After some playing found a reason:
It's necessary to specify image for control (ImageUrl="~/Img/icon-plus.gif")
<asp:ImageButton ID="ib" runat="server" ImageUrl="~/Img/icon-plus.gif" ImageAlign="AbsMiddle" />
And after that put the ID of it into control (ImageControlID="ib"):
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pD" ExpandControlID="pH" CollapseControlID="pH"
Collapsed="True" TextLabelID="lCategoryName" ImageControlID="ib" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
SuppressPostBack="true" ExpandedImage="~/Img/icon-minus.gif" CollapsedImage="~/Img/icon-plus.gif" />
Anyone try this simple bit of code in an ie8 browswer and try refreshing the page,
in ie8 you will get an error around getelementbyid on refresh.
When i run it it complains of not being able to find control with id of 'ctl00_main_dd'
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"
ImageControlID="Image2" CollapsedImage="~/App_Themes/IMStandard/icons/uparrow.png"
ExpandedImage="~/App_Themes/IMStandard/icons/downarrow.png"
CollapseControlID="dd" ExpandControlID="dd"
TargetControlID="pnlQuickKeywordSearch"
SuppressPostBack="true">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID="dd" runat="server">
<h3 class="loginHeader">
<asp:Image ID="Image2" runat="server" />
Quick Keyword search <asp:Image ID="HelpIconImage" runat="server"
Width="16px" Height="16px" ImageUrl="~/App_Themes/IMStandard/icons/help.png" /></h3>
</asp:Panel>
<asp:Panel ID="pnlQuickKeywordSearch" Style="float: left; border: double 3px #C9DF86;"
runat="server" >
<div style="clear: both; padding: 5px;">
</div></asp:Panel>
Anybody know why this is happening? is it a bug in ie8 or am i missing something?
By the way, i am using masterpages, but i dont think that has anything to do with it.
Thanks
This example works for me in my IE8 running on Windows 7.
The id 'ctl00_main_dd' is typically the generated clientside ID (VS2010 will enable us to specify client side ID's.)
Can you use a div instead of the asp:panel for your expand/collapse control ?
<div ID="dd">
<h3 class="loginHeader">
<asp:Image ID="Image2" runat="server" />
Quick Keyword search <asp:Image ID="HelpIconImage" runat="server"
Width="16px" Height="16px" ImageUrl="~/App_Themes/IMStandard/icons/help.png" /></h3>
</div>
The collapsible panel extender should then be able to find the static 'dd' client ID.
Added 02.06:
No good guesses to why it happens in IE8 only
I would check =>
1) Correct doctype in masterpage
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
2) Tick the compatibility view button in IE8 if present
3) Ensure all VS, Framework and Toolkit are latest versions (SP1)
We just had a weird scenario where there was a tag inside the collapsed panel with style="float:right;", and removing div tag fixed the issue. Hopefully that helps someone else.