UpdatePanel cannot set style - asp.net

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.

Related

Asp.net Textbox displayed side by side

Hello guys I just started designing form with asp.net tags and would like to achieve what's on the image exactly. Thanks guy
If i understand you right, this is the code you need:
<asp:TextBox runat="server"></asp:TextBox><asp:TextBox runat="server"></asp:TextBox>
and the result:
Add some styles to make it pretty.
Blockquote
Here is the code with labels (you can also use asp labels):
<div style="display: inline-grid">
<asp:TextBox runat="server"></asp:TextBox><label>textbox1</label>
</div>
<div style="display: inline-grid">
<asp:TextBox runat="server"></asp:TextBox><label>textbox2</label>
</div>
and the result:
You can also put the style in the css.

Watermark for an ASP.Net Panel

Does an asp.net panel can be inserted with a watermark? These panel is used for printing purposes. Another problem is that the background image in the panel is not printing, only the objects inside of it.
I think you should take a look at BackImageUrl property. And assign the path of the watermark image to it.
<asp:Panel BackImageUrl="yourimagefile.png" />
Also, the image should be given a proper opacity / alpha value so that it's transparent.
Here is one more example http://www.codeproject.com/KB/web-image/ASPImaging1.aspx from codeproject that you can do many thinks on the image, including adding watermark from image.
<asp:Panel ID="Panel1" runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl="~/yourimage.png" />
<div style="margin-top: -xxx"><--change the position <div> to overlaps with the image
....
your content here
....
</div>
</asp:Panel>

Any idea why my dojo TabContainer is so messed up?

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.

Hide the html contorl from the server side without using attributes runat="Server"

I am using HTML control,and want to visible false from the server side with out using attributes runat="Server"
tell me any solution
Runat="Server" has got nothing to do with visibility.
If you want to hide the control (so that its not visible to any visitors to your site) you would simply set its CSS to visibility:hidden; or display: none;. I think this is what you wanted to know.
Wrap your html controls in an asp:placeholder control, and set the visibility on the placeholder.
Example
<asp:placeholder id="plc" runat="server" visible="false">
<h1>Some Content</h1>
<img src="/images/someimage.gif" alt="" />
</asp:placeholder>

asp.net ajax collapsible panel in ie8 problem

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.

Resources