ASP.net ajax 2.0
I've got a modalpopup extender that looks like this:
alt text http://img441.imageshack.us/img441/6342/localmodal.jpg
The actual modal popup is wrapped around a rounded corner extender to give it the nice curved look. Here is a simple snippet of code:
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel" OkControlID="btnOk" TargetControlID="ibStartNow" PopupControlID="Panel2" PopupDragHandleControlID="PopupHeader" BackgroundCssClass="ModalPopupBG">
<asp:Panel ID="Panel2" style="display: none" runat="server">
<asp:Panel ID="Panel3" runat="server">
<div class="ConfirmationPopup" style="text-align:center; margin-right:auto;margin-left:auto;">
<div class="PopupHeader" id="PopupHeader">
Confirm Start Now<br />
</div>
<div class="PopupBody">
<br />
This will save the expense report header and allow
<br />
you to enter items into your expense report, are you sure?
<br />
<br />
</div>
<div class="Controls">
<asp:ImageButton ID="btnOk" runat="server" imageurl="~/images/ok.gif" CausesValidation="False" />
<asp:ImageButton ID="btnCancel" runat="server" imageurl="~/images/cancel.gif" />
</div>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel3" Radius="6" Corners="All" BorderColor="#9BD1FA" Color="#377CB1">
</ajaxToolkit:RoundedCornersExtender>
The strange thing is on my local machine running IE8 it looks great, even on the server using firefox / chrome it looks great. But once it is on the server and I use IE8 it is no longer rounded it is basically a square.
It just doesn't make sense why locally using IE8 it works, but on the actual web server using IE8 it is no longer rounded, it looks like this:
alt text http://img441.imageshack.us/img441/2977/servermodal.jpg
My guess is you have probably moved on with this issue since this was so long ago but I stumbled across this http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php which seems to work for me. It looks like the trick is, in addition to using two panels, set the back color of the container panel to Transparent
Related
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 to create a web form in ASP.NET.
this is my HTML:
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="label" AssociatedControlID="DropDownList1"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</div>
<div>
<asp:Label ID="Label2" runat="server" Text="label" AssociatedControlID="TextBox1"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="Label3" runat="server" Text="" AssociatedControlID="Button1"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
Is this the most customizable HTML code by CSS?
Do you usually write a different markup?
Your HTML looks fine to me. I wouldn't personally use all those divs but I also don't know your exact requirements.
Some people consider a a form to be a list and will code it as:
<ul>
<li>
<label ... />
<input ... />
</li>
</ul>
I don't do it this way and it depends on how you wish to describe your data.
Untimately your main consideration is how you want to describe the data you're marking up. What is the most semantic way and how does that fit in with how you want to style the data. Usually there's a middle ground if you've considered both things well.
I would also consider grouping your form fields logically using a <fieldset>. This will give you something extea to hook into with your CSS also.
We created wrapper controls that do pretty much what you described. Each of our server controls emits a div with a specified class, a label (if label text is set) and the control itself.
We've found this to be the absolute cleanest way to get the markup we want when it goes to the client; and it results in non-table forms.
We also have several classes defined such as "row", "shortRow", etc. that set the appropriate width of the outer div and others which control the label and control width.
I'm using a lot of LinkButtons in my web application with text and images inside them.
All LinkButtons are set with a ToolTip and all images inside the LinkButtons are set with an alternate text.
<asp:LinkButton CssClass="button button-input" ID="btnSearch" runat="server" CausesValidation="False" ToolTip="Search">
<img id="imgSearch" runat="server" src="../../../images/icons/magnifier-left.png" alt="search-something" width="12" height="12" />
</asp:LinkButton>
The problem is that in Internet Explorer the alternate text of the image is shown instead of the ToolTip of the LinkButton. In Firefox this problem doesn't exists, it always show the ToolTip of the LinkButton.
This is the produced XHTML:
<img width="12" height="12" alt="search-something" id="..." src="../../images/icons/magnifier-left.png">
Is it possible to overcome this issue?
Removing all alternate texts will resolve the issue but a better (more standard) way is always welcome!
Try to set a empty title attribute on your image.
Or use <asp:ImageButton /> instead of the <asp:LinkButton />
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.