I have a website that has a dojo TabContainer. I've been trying to upgrade the dojo library from 1.2 to the later versions.
At 1.5 I've run into a problem.
This is what the TabContainer looks like in FF at 1.5, and what it looked like in the previous versions in all browsers. (IE, Chrome, Safari)
At 1.5, this is what it looks like in IE9
I can't figure out where these arrow buttons are coming from. The styling and markup hasn't changed, I've just swapped out the dojo libraries.
Here is the code:
<asp:Repeater ID="TabRepeater" runat="Server">
<HeaderTemplate>
<div dojoType="dijit.layout.BorderContainer" gutters="false" style="width:600px">
<div dojoType="dijit.layout.TabContainer" style="width:600px; height:350px">
</HeaderTemplate>
<ItemTemplate>
<div dojoType="dijit.layout.ContentPane" style="display:none; height:300px" title="<%#Eval("Name")%>">
<!-- Content -->
</div>
</ItemTemplate>
<FooterTemplate>
</div> <!-- End Tab Container -->
</div> <!-- End Border Container -->
</FooterTemplate>
</asp:Repeater>
It's pretty basic, I've defined the sizes for the containers. I'm not sure why these scroll buttons won't go away. I'm not sure if this is a problem with my code or with the TabContainer since their documentation site doesn't even work in IE9
FF:
IE9:
Any idea what's wrong?
Dojo 1.5 is not officially compatible with IE9. Compatibility has been officially partially supported since dojo 1.6.x and is supposed to be fully compatible with dojo 1.7.x
Also, I do not know much about asp, but this does not look like a good practice
<HeaderTemplate>
<div dojoType="dijit.layout.BorderContainer" gutters="false" style="width:600px">
<div dojoType="dijit.layout.TabContainer" style="width:600px; height:350px">
</HeaderTemplate>
to have a "tag" (except if this tag disappear and is not replaced by any html) enclosing unclosed divs...
I had the same issue using dojo 1.10.4. I was not using asp.net.
I solved this by setting the properties useMenu and useSlider of the TabContainer class:
var container = new TabContainer(
{
style: 'height: 100%; width: 100%;',
useMenu: false,
useSlider: false
}, domConstruct.create('div'))
Thanks to David Walsh.
Related
I am writing code in ASP.NET.
I have a button that is clickable on IE but not on FF nor Google Chrome.
I've discovered that the reason lays on the fact that its position: absoulute OR position:fixed
Here's the code:
<div style="padding-top:50px";>
<div id="divInfoBox" runat="server" style="padding-top:5px; height:250px;">
<div style="position:fixed; padding-left:-5px; ">
<asp:ImageButton CssClass="attachmentImageButton" ID="btnAttachment" runat="server" Visible="false"
ImageUrl="~/Style/images/attachment.png" onclick="btnAttachment_Click" />
</div>
</div>
</div>
How to make it be clickable on all browsers?
My guess is that the first two div elements are on top of the ImageButton and therefore it is not clickable.
I have no clue why is that (be glad to find out the exact reason). All I know is that the solution is adding the following:
z-index:5
And that should do the trick.
Good luck
p.s.: if 5 isn't enough, try adding higher value.
I have a div inside a repeater (ItemTemplate) with the following markup
<div class="bottle listing">
Now for some reason this is being rendered as
<divclass="bottle listing">
Which breaks the page. This is only occurring infrequently and I haven't been able to nail down if it is only occurring in some browsers. Check out this site please:
http://www.myerwine.com.au/whites/chardonnay/4/16.aspx?page=2
I am viewing it in IE8, but I have been told this page is sometimes broken in Firefox and Chrome. When viewing the source in IE see line 415 "divclass="bottle listing"
Here is a portion of my repeater:
<asp:Repeater ID="repResults" runat="server" OnItemDataBound="repResults_DataBound">
<ItemTemplate>
<div class="row listing">
<div class="bottle listing">
............
</div>
</div>
</ItemTemplate>
</asp:Repeater>
Any ideas??
Actually the real answer was because I was using a White space filter and that in turn was removing spaces in the wrong places.
I added a second space
<div class="bottle listing">
And it fixed the problem, if anyone can explain why this solved the problem I would love to hear it.
I have an update panel on my aspx page which does not have a style property or attribute which you can use to override the style. I know this is how it is designed so that is not the issue. From looking online most resources have said that simply putting a div around the update panel and setting the style at that level will take care of the issue. However a central div is created by Visual Studio which is stopping me from seeing my content.
ASPX Code
<div style="height:100%;width:100%;overflow:auto;padding-right:16px;" runat="server">
<asp:UpdatePanel runat="server" id="pdfPanel" UpdateMode="Conditional" EnableViewState="true">
<ContentTemplate>
<div id="pdfFrame" runat="server" style="height:100%;width:100%;overflow:auto;padding-right:16px;">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
How HTML is rendered
<div style="height:100%;width:100%;overflow:auto;padding-right:16px;">
<div id="ctl00_body_pdfPanel">
<div id="ctl00_body_pdfFrame" style="height:100%;width:100%;overflow:auto;padding-right:16px;">
<!-- Actual content here -->
</div>
</div>
</div>
The problem is the pdfPanel which is being created has no style and is causing my inner div not to be displayed. When I copy the style using Firebug from either of the other two controls then it becomes visible.
If you are using .NET 4.0 you can set ClientIDMode="Static" and it will give you the ID you set on the updatepanel itself.
i got stuck in an issue i.e. i wrote following css for showing page breaks in my html but i am facing the problem that it works fine in the Internet explorer but not working in firefox and chrome below is the inline css i applied
<br style="page-break-after: always;">
below is my HTML code
<asp:Panel ID="pnlHide" runat="server" Visible="false">
<br style="page-break-after: always;">
</asp:Panel>
nb:above line is in asp:panel control of asp.net which renders as DIV in html
any suggestions to change the css are welcome. I will wonder if anybody could plz help me.
If you have any floats, remove them from the css while printing, floats may be the issue and page-break may not be the issue at all.
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.