Scroll bar for Gridview - asp.net

How to achieve scroll bar for gridview control in asp.net only for rows but not for header too.
Thanks in advance.

Just change this code as your own. You will get scroll when grid view size exit the div size.
<body>
<form id="form1" runat="server">
<div style="height:200px; width:300px; overflow:auto;">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
</form>
</body>

put the rows in div and add
"style=overflow:auto" in the div style
Above code will add scroll bars in the grid

Related

How to add two gridviews in single update panel in web form

I have used update panel while designing web form.How to add two gridviews side by side in single update panel.I am trying to add it but it adds another one underneath the original one.
You can divide them in two divs.
Set the "display" to "inline-block" and adjust the width to your needing (maybe 50% each)
<YOUR PARENT/UPDATE PANEL/ETC>
<div>
<div style="width: 50%; display: inline-block;">
<asp:GridView runat="server" id="grv1" AutoGenerateColumns="true">
</asp:GridView>
</div>
<div style="width: 50%; display: inline-block;">
<asp:GridView runat="server" id="grv2" AutoGenerateColumns="true">
</asp:GridView>
</div>
</div>
</YOUR PARENT/UPDATE PANEL/ETC>

Master Page Contents aren't Same in All pages

I use Master Page in my Project.But Master Page contents are not same in all pages.In Home.aspx page it's margin is 0px and in other page isn't. Texts are Bold and Big Size in one page and Small in another Page. Why this occur?
My Master.master page Code :
<body style="margin:0px; text-align: left;">
<form id="form1" runat="server">
<div>
<div class="auto-style1" style="background-color: #3399FF; height: 42px;">
<h2>
<asp:Label ID="homeLabel" runat="server" Text="Home"></asp:Label>
</asp:Label>
<asp:Label ID="file_sharedLabel" runat="server" Text="Files Shared"></asp:Label>
<asp:Label ID="blogLabel" runat="server" Text="Blogs"></asp:Label>
</h2>
</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
And Two picture of Home.aspx and Members.aspx are
What happens I don't Catch .
Again, it is hard to tell what is going on without the actual HTML from your child pages. However, judging from the picture, you are probably looking for a margin value on a an element between your <asp:ContentPlaceHolder> tags.
It looks like your second page is using a <table> of some sort.
Make sure your table has:
style="margin-top: 0px;"
Or
<table class="noTopMargin"> ...
<style>
.noTopMargin { margin-top: 0px; }
</style>
As for the font-size and font-weight being messed up, it is possible that your second page has a <style> declaration somewhere which is screwing it all up. Also make sure that your browser zoom is the same between both pages.

How do I CSS layer on top of ASP.NET Image?

At the top of my screen, I have an ASP.NET Hyperlink with an image representing the company and the application. I want to use CSS layers to place text or some control displaying text on top of the hyperlink/image at bottom right hand corner representing the productEdition.
I can't post the ASP.NET Hyperlink markup because it causes error but it has an ImageUrl. Oh, it's in a panel. See below:
<asp:panel ID="toppanel" CssClass='wrapper' runat="server">
<!--Top Menu-->
<asp:panel id="menupanel" runat="server" CssClass="menusubwrapper">
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" NavigateURl="~/Default.aspx" ToolTip="Home Page">
</asp:HyperLink>
</asp:panel>
Using the techniques in some of the answers, I have this working - the text is on top of the picture but it's all the way to the left. I need it to be all the way to the right.
<asp:panel ID="toppanel" CssClass='wrapper' runat="server">
<!--Top Menu-->
<asp:panel id="menupanel" runat="server" CssClass="menusubwrapper">
<div id="Header" style="position: relative; z-index: 1">
<%--div style="position:absolute;z-index:1">--%>
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif"
NavigateURl="~/Default.aspx" ToolTip="Home Page">
</asp:HyperLink>
<div style="position:absolute;top:60px; right:400px; width:600px; height:100px; z-index:2;font-size:200%">
<b>Testing...</b>
</div>
<%--</div>--%>
</div>`
You could create a div to overlap the image with the Edition in it. You can read about overlapping elements here: http://www.w3schools.com/css/css_positioning.asp
Hope this helps and Good Luck!
You could have a DIV wrapping around the linked image as well as around the text (also within a DIV). Give the wrapping DIV a style "position:relative" and give the text DIV absolute positioning. Or, instead of using absolute positioning, you could float it right or left, center it, using margins, etc.
Here are a few tutorials for you:
http://www.html.net/tutorials/css/lesson15.php
OR
http://www.xul.fr/en/css/text-over-image.php
Here's the solution:
<div id="Header" style="position: relative; z-index: 1">
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif"
NavigateURl="~/Default.aspx" ToolTip="Home Page"/>
<div style="position:absolute;top:60px; left:800px; width:600px; height:100px; z-index:2;font-size:200%">
<%--<b>Testing...</b>--%>
<asp:Label runat="server" ></asp:Label>
</div>
</div>

How do I display ASP.NET ImageButton on a ASP.Image Control

I am using ASP.NET 2.0.
I have Image and ImageButton Side by Side by like this.
<div style="width:80px">
<asp:Image ID="innerImgDesk1" runat="server" ImageUrl="~/images/advlefttop.png" Width ="60px"/>
<asp:ImageButton ID="ImgDeskIndicator1" runat="server" Width="20px" ImageUrl="~/images/Indicators/blue.png"/>
</div>
I want the ASP.NET Imagebutton on top of Image. I should see image button kind of indicator, where Imagebutton color will be changing. But Image color remains same.
Currently using the above code, it displays like below.
I want it to be displayed like below,
Could anyone tell me What I should do to display ImageButton on Image.
Thank you
Try setting the image as background image of the div tag like the following code:
<div style="width:80px; background: url(images/advlefttop.png)">
<asp:ImageButton ID="ImgDeskIndicator1" runat="server" Width="20px" ImageUrl="~/images/Indicators/blue.png"/>
</div>
Hope this helps!
Corix
if you are just worried about displaying button over image-button than you can do this by using div absolute position like
<div style="position:relative">
<div style="position:absolute">image button</div>
<div style="position:absolute> button</div>
</div>

Why isn't this div floating properly?

I have two listboxes and two buttons. Each listbox is in its own div and the two buttons are in their own div. One listbox should be on the left and the two buttons should be to the right of that with the other listbox to the right of the buttons. This is the markup I am using, but it is putting the 2nd listbox below the Remove button.
<p>Available Colors</p>
<div style="float:left; margin:5px;">
<asp:ListBox ID="lstAvailableColors" runat="server"></asp:ListBox>
</div>
<div>
<asp:Button ID="btnAdd" runat="server" Text="Add" /><br />
<asp:Button ID="btnRemove" runat="server" Text="Remove" />
</div>
<div style="margin:5px;">
<asp:ListBox ID="lstSelectedColors" runat="server"></asp:ListBox>
</div>
You should probably float them all left to get the layout you described. divs are by default rendered with block-display, which will put a linebreak between #2 and #3, if you don't float them.
Float all three divs to the left.
Also, you must set an explicit width for floated elements.
The fisrt div with a listbox will float to the left and the other divs will take up the remaining space on the page which will be to the right of the div that is floated left.
Is it a 3 column layout you need?
If so you need something like this
<div style="float:left; width:66%">
<div style="float:left; width:50%"></div>
<div style="float:right; width:50%"></div>
</div>
<div style="float:right; width:33%"></div>

Resources