Showing Images in gridview as block items - asp.net

I want to show items in my gridview as a 5 across and a 5 down display - i already have the
query pulling only 25 records per a page but cant seem to make the gridview do what i want - any suggestions?
example------------------------------
record 1 : record 2 : record 3 : record 4 : record 5
record 6 : record 7 : record 8 : record 9 : record 10
etc ...........................................

My suggestion would be to switch to a ListView instead of a GridView. ListView is new in .Net 3.5, and has worked wonders for me for exactly the scenario you are talking about. Scott Guthrie has a good example of it on his blog.
Here's an example for a 3x4 grid of pictures from my personal website...
<ul id="thumbnails">
<asp:ListView runat="server" ID="PicturesListView" ItemPlaceholderID="PicturesListItemPlaceholder"
DataSourceID="PicturesDataSource">
<LayoutTemplate>
<li runat="server" id="PicturesListItemPlaceholder"></li>
</LayoutTemplate>
<ItemTemplate>
<li>
<a href='Photos/<%# Eval("WebImageId") %>.jpg' class="thickbox" rel="gallery-test"
title='<%# Eval("Caption") %>'>
<img src="Photos/<%# Eval("ThumbnailId") %>.jpg" alt='<%# Eval("Caption") %>' />
</a></li>
</ItemTemplate>
</asp:ListView>
</ul>
and my CSS to line things up is...
/* Picture Thumbnails */
#thumbnails ul
{
width: 800px;
list-style: none;
}
#thumbnails li
{
text-align: center;
display: inline;
width: 200px;
height: 130px;
float: left;
margin-bottom: 20px;
}

Related

Removing empty DDLs from Main Menu using Panels

I have a main menu in which each menu category drops down. It reads the drop down data from a database and there are times when a particular menu option will contain nothing when it is dropped down. I therefore wish to remove that menu option if the drop down list is empty. Here is my code..
<li><a style="color:#fff";">
<asp:DropDownList ID="ddl1" runat="server" style="font-weight: bold; color:#fff;background:#444444; border:0; text-indent: 5%; text-align-last:center; z-index:-1;" class="fixDDLCategorySize" Height="29px" AutoPostBack="True" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" >
</asp:DropDownList></a>
</li>
<li><a style="color:#fff";">
<asp:DropDownList ID="ddl2" runat="server" style="font-weight: bold; color:#fff;background:#444444; border:0; text-indent: 5%; text-align-last:center; z-index:-1;" class="fixDDLCategorySize" Height="29px" AutoPostBack="True" OnSelectedIndexChanged="ddl2_SelectedIndexChanged" >
</asp:DropDownList></a>
</li>
...ETC
In VB, when a menu option is empty I try ddl1.visible=false but it still leaves a block on the screen which the css is causing. I therefore tried this..
<asp:Panel ID="pnl1" runat="server" Visible="true">
<li><a style="color:#fff";">
<asp:DropDownList ID="ddl1" runat="server" style="font-weight: bold; color:#fff;background:#444444; border:0; text-indent: 5%; text-align-last:center; z-index:-1;" class="fixDDLCategorySize" Height="29px" AutoPostBack="True" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" >
</asp:DropDownList></a>
</li>
</asp:Panel>
and then used pnl1.visible=false to remove an empty menu category but all the other menu options then lose all their css.
Is there a way to do this?

Asp hyperlink alignment

I want the hyperlink centered in the cell of GridView, this is the code for the grid column:
<asp:TemplateField HeaderText="Ticket#" ItemStyle-HorizontalAlign="Center" SortExpression="ows_ID">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
</asp:TemplateField>
HorizontalAlign="Center" doesn't work, nor does ItemStyle-HorizontalAlign="Center". I have set style as described here and that doesn't work either. FYI, bootstrap is involved also. What am I missing? Some setting in the grid declaration? Please help.
In your CSS file, edit the style for td tag.
td
{
text-align: center;
}
GridView will be converted to table structure when rendered on webpage. So GridView takes styles of table
You can do it with css:
Here is a demo from this post: post
And you have to add a css class to the table cell and wrap your css into the class, otherwise it will align all td's that way!
td {
height: 100%;
}
a {
display: table;
position: relative;
height: 100%;
width: 100%;
background-color: yellow;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
background-color: red;
}
This can achieve by two methods
1- try to use
< center >
< ItemTemplate >
' Font-Underline="false" NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
< /center >
2- Or you simply goto view souce file of your webpage
try to find rendered html of hyperlink ....and then place your
< asp:Hyperlink >
inside a < span class="class1"> < /span >
< style > .class1 { text-align:center; }
< /style >
The only thing that worked was to place a div around the Hyperlink with alignment in the div.
<div style="text-align:center">
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</div>

How to align vertically an unknown sized image in a div

I have a menu made of an <ul>. Every <li> has inside an <a>, and every <a> has an image and a label.
the image changes on hover (javascript) into a bigger image, so the size of the images is of no help. I would like to align the image vertically on the middle of the menu item. here you have the code:
<script type="text/javascript">
<!--
function changeImage(element, toReplace, withReplace) {
var str = document.getElementById(element).src;
document.getElementById(element).src = str.replace(toReplace, withReplace)
}
// -->
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="UserControls_Menu" %>
<ul id="navmenu">
<li><a id="default" runat="server" href="~/Default.aspx" onmouseover="changeImage('sideBar_Menu1_Image7', 'Calendar24x24.png', 'Calendar32x32.png');"
onmouseout="changeImage('sideBar_Menu1_Image7', 'Calendar32x32.png', 'Calendar24x24.png');">
<div class="divImage">
<asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Calendar24x24.png" />
</div>
<div class="divLabel">
<asp:Label ID="Label6" runat="server" Text="CALENDAR" meta:resourcekey="Label6Resource1"></asp:Label>
</div>
</a></li>
.divImage
{
width: 29px;
height: 29px;
float: left;
text-align: center;
vertical-align: middle;
}
.divLabel
{
float: left;
padding-top: 3px;
}
no matter what I do, align-vertically doesn't work...the only way I made things work was with tables, but then the click only works on the image, it doesn't on the lable too...I tried without divs too, can't find a way
edit 3
http://jsfiddle.net/HerrSerker/td4jy/2/
edit 2
another proposal is
don't put them inside as <img /> element but as background-image with background-position: 10px 50% or something
edit 1
http://jsfiddle.net/HerrSerker/sftGT/1
orig
Don't use float: left floats are not vertically alignable. use display:inline-block instead together with line-height values.

How to center one div in form

I work on C# Asp.net
Main div
---- table
want to show this div on middle of the form.i want to build a login form.my table contain
User name:**(it's a lable,on browser it's broken like user
name : show why?)**
password:
<div id="main">
<table width="600px" border="1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" CssClass="cssLabel" Text="User Name :"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server" CssClass="cssLabel" Text="Password :"></asp:Label>
</td>
</tr>
</table>
</div>
want to show div on middle of the form? and why my lable text are going to broken how to solve it?
if u gone to google.com than you see text box take position on middle of the frame.i want this .i want my controls also take position on the middle of the frame.How to do that?
You can use this to show idiv n the middle of the form:-
<div style="margin-left:auto;margin-right:auto;">Put the controls here </div>
You've edited your question now so this doesn't give you the exact code you need, but would help you work it out / others who view your question with a similar problem. So here goes... you need
something like this:
<style type="text/css">
.wrp { width: 100%; text-align: center; }
.frm { text-align: left; width: 500px; margin: auto; border: 1px solid black; }
.fldLbl { white-space: nowrap; }
</style>
<div class="wrp">
<div class="frm">
<span class="fldLbl">User name:</span>
</div>
</div>
try this option, that is style the div with style="width:100%;text-align:center"

How to align text within a FooterTemplate cell in a GridView

How to align text within a FooterTemplate cell in a GridView
I tried the following but the text is still centered (there is a parent center tag):
<FooterTemplate>
<span style="size:100%; padding:0; text-align: right">Total: </span>
</FooterTemplate>
In the parent column of the template try setting FooterStyle-HorizontalAlign="Right"
Maybe
<FooterTemplate>
<div style="text-align: right;">
<span>Total: </span>
</div>
</FooterTemplate>
works as you want.
Use display:block which replaces size:100% (which doesn't exist, AFAIK)
<FooterTemplate>
<span style="display:block; padding:0; text-align: right">Total: </span>
</FooterTemplate>
The Grid-view would in the end be rendered as a table itself hence, using basic CSS selectors, we can solve the problem, I used the following to fix the same problem that I was facing, hope it helps anyone else looking for this thread
tr:last-of-type td {
align-content: center;
vertical-align: middle;
text-align: center;
}
Hope that helped.

Resources