This code below is working fine, but the columns are so close together. Is there a way to set the width for each column? Also, is there a way to indent the whole "pnlChildView"?
Thanks,
<asp:DataList BackColor="#ffffff" id="DataList1" DataSourceID="dsCompanyList"
runat="server" Width="100%" DataKeyField="Company"
UseAccessibleHeader="true" CssClass="books"
HeaderStyle-CssClass="header" ItemStyle-CssClass="item"
AlternatingItemStyle-CssClass="alternating">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" Text="+"
CommandArgument='<%#Container.ItemIndex%>'
OnCommand="LinkButton1_Command"
Font-Underline="false">
</asp:LinkButton>
<%#Eval("Row")%>
<%#Eval("Company")%>
<asp:Panel ID="pnlChildView" runat="server" style="margin-right:50px;">
<asp:DataList ID="childList" runat="server" Width="100%">
<ItemTemplate>
<tr>
<td><%#Eval("FirstName")%></td>
<td><%#Eval("LastName")%></td>
</tr>
</ItemTemplate>
</asp:DataList>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
Try applying style to the TDs e.g. :
<td style="width: 200px;"><%#Eval("FirstName")%></td>
<td style="width: 300px;"><%#Eval("LastName")%></td>
Adjust it with padding and other properties as needed.
For your main panel instead of style="margin-right:50px; try style="padding-left:50px; to indent it.
You can generate space between your columns using the CellPadding attribute of the DataList, like this:
<asp:DataList CellPadding="10"
Note: The unit for cell padding is pixels.
Use either CSS margin or padding for you indentation, like this:
<asp:Panel ID="pnlChildView" runat="server" style="margin:50px;">
Note: margin by itself will apply the same margin value to all four sides of the box. Use margin-left, margin-top, margin-right or margin-bottom for individual sides of the box.
OR
<asp:Panel ID="pnlChildView" runat="server" style="padding:50px;">
Note: padding by itself will apply the same padding value to all four sides of the box. Use padding-left, padding-top, padding-right or padding-bottom for individual sides of the box.
Read What’s the Difference Between Margins and Padding? for more information.
Related
I have two adjacent columns that are running together with no space between them. One is a dollar amount and the other a text field containing a name.
The gridview is defined with CellPadding and CellSpacing so don't expect this.
The column widths are defined as 6% and 12% respectively. The total of the width definitions of the columns is 70%.
Any suggestions?
Running Together
Grid Definition
First, it would be easier for the GridView header to be posted as plain text instead of an image. If I wanted to test your GridView I would have to type the code instead of copy/paste.
But the issue is probably css, or the lack thereof. It seems that the value is aligned to the right, but the padding is not applied. Which can happen is a BootStrap is used.
So create your own style for the GridView
<asp:GridView ID="GridView1" runat="server" CssClass="MyGrid" AutoGenerateColumns="false" Width="100%">
<Columns>
<asp:TemplateField ItemStyle-CssClass="FloatRight">
<ItemTemplate>
<%# Eval("Amount") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<%# Eval("Description") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<style>
.MyGrid td {
padding: 3px;
}
.MyGrid .FloatRight {
float: right;
}
</style>
I have a vertical radiobuttonList sitting in a table.
How do I decrease the spacings between each of the listitems so that the total height of radiobuttonList is smaller?
I have tried using padding and margin but none seems to work.
Use CellPadding property of RadioButtonList, you can set 0 for minimum height
<asp:RadioButtonList ID="rdlst" runat="server" CellPadding="15" CellSpacing="0" ><asp:ListItem Value="1" Text="1"></asp:ListItem> <asp:ListItem Value="2" Text="2"></asp:ListItem></asp:RadioButtonList>
you can just add this inside the radiobuttonlist tag:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" Width="300px">
radiobuttonList in a table so try cellspacing="0" cellpadding="0" and padding:0; for td also
Provided this w3schools demo demonstrates accurate markup, it looks like they're built in a table. Try this:
.someClassName td {
padding: 0;
margin: 0;
}
Replacing .someClassName with the CssClass of the RadioButtonList or some other wrapper object.
I changed the radiobuttonlist to use RepeatLayout="Flow" instead of RepeatLayout="Table"
eg:
<asp:RadioButtonList ID="radOrderBy" runat="server" AutoPostBack="True" RepeatLayout="Flow" >
<asp:ListItem Value="NAME" Text="Name" Selected="True" />
<asp:ListItem Value="NUMBER" Text="Number" />
</asp:RadioButtonList>
I have a Gridview contain many TemplateField.
I want make every <td> in my html source equal the color saved in my database
I try code Located below but not working it's give me a <span> tag inside <td> with my color but But do not appear on the browser
<asp:TemplateField HeaderText="BackGround Color">
<ItemTemplate>
<asp:Label ID="lblBackColor" runat="server"
BackColor='<%# ConvertFromHexToColor( Eval("BackColor").ToString()) %>'>
</asp:Label>
<itemstyle width="20%" horizontalalign="Center" />
</ItemTemplate>
</asp:TemplateField>
C# code working
public Color ConvertFromHexToColor(string hex)
{
string colorcode = hex;
int argb = Int32.Parse(colorcode.Replace("#", ""), NumberStyles.HexNumber);
Color clr = Color.FromArgb(argb);
return clr;
}
And this is the source html and css code in my browser
<td>
<span id="BodyZone__ThemesGrid_lblForeColor_0" style="background-color: #FFFFFF;"></span>
<itemstyle width="20%" horizontalalign="Center">
</itemstyle>
</td>
CSS
table.activity_datatable td {
padding: 8px 15px;
color: #6c6c6c;
vertical-align: middle;
-webkit-transition: all 0.2s;
}
If you want to check with a boolean value if it is true then Green colour else Red colour will effect. Then displaying text with the respective colour according to the Eval function. Here GetStatus is a method you need to create it in code behind with its we are binding the text to UI, or else you can bind with Eval or Bind function as usual.
ForeColor='<%# (bool)Eval("UserType")==true?System.Drawing.Color.Green:System.Drawing.Color.Red %>'
Text='<%# GetStatus((bool)Eval("UserType")) %>'>
You need to place text inside of your Label (which renders to a span)
<asp:TemplateField HeaderText="BackGround Color">
<ItemTemplate>
<asp:Label ID="lblBackColor" runat="server" BackColor='<%# ConvertFromHexToColor( Eval("BackColor").ToString()) %>'>PUT_TEXT_HERE</asp:Label>
<itemstyle width="20%" horizontalalign="Center" />
</ItemTemplate>
</asp:TemplateField>
You may also prefer using a Panel (which renders to a div) rather than a Label. Don't forget to put stuff inside of the div or span.
ForeColor='<%# Convert.ToString(Eval("ESM")) == "Elective" ? System.Drawing.Color.Green:
Convert.ToString(Eval("ESM")) == "Emergency" ? System.Drawing.Color.Red: System.Drawing.Color.Purple%>'
Try this code..........
?
Need fixed Header Row from Vertical Scroll bar, because my GridView is very large.
Making 2 panels was my the best try (but also won't works) :
added :
<asp:Panel style="width:720px;" runat="server" ScrollBars="Horizontal">
<asp:GridView ID="GV3" runat="server" />
<br />
<asp:Label ID="justfortest" Text="11111" runat="server" />
<hr />
<asp:Panel style="max-height:400px;border-style: outset; border-width: 4px; "
ID=HGix runat="server" ScrollBars="Vertical">
<asp:GridView ID="GridView2" runat="server" CellPadding="4"
.........................
</asp:GridView>
</asp:Panel>
</asp:Panel>
why the horizontal line adds to second panel, it's ScrollBars="Vertical" but works as Both
Implementing a Fixed GridView Header in ASP.NET (Uses Panels)
Using jQuery
Stackoverflow
Freezing gridview header in a fixed width div
Table - fixed header, scrollable body, most robust/simple solution?
I have a Repeater control used to display uploaded images.
How can I show the images in the repeater horizontally? How can i give the caption to the bottom of picture in this?
assuming you have some code like this:
<asp:repeater ...>
</asp:repeater>
just inject "<itemtemplate>" with some html code with the look and feel you want to. nothing special about showing horizontal or vertical it just depends on what html tags you use inside item templates.
If you don't especially need a Repeater to do this, you can use a DataList instead and set the RepeatDirection="Horizontal"
how to display horizontal line after each row
<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" >
<ItemTemplate>
<asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'>
<img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" />
</asp:LinkButton>
<br />
<asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext">
</asp:Label>
</FooterTemplate>
</asp:DataList>
You can build your ItemTemplate like:
<ItemTemplate>
<div class="floating">
<img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' />
<span><%# /* Code to Eval your image caption from datasource */ %></span>
</div>
</ItemTemplate>
where the .floating class of the div is:
.floating { float:left; overflow:hidden; }
.floating img { display: block; }
I usually put a div for clear after a sequence of floating element, to reset the state of box model.
<div style="clear:both;"></div>
Depends on what you are using to display, i.e. if your pictures are in a div put float:left; on it, or use the DataList.
Like #numenor said in this other answer, it's just a matter of what html you use. Here, an example of how to acomplish what you need using html tables.
<table width="<%= this.TotalWidth %>">
<tr>
<asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound">
<ItemTemplate>
<td class="itemWidth">
Your item goes here and will be
displayed horizontally as a column.
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
Note that the width is handled with a server side property TotalWidth that calculates the total width needed based on, of course, the count of items repeater will display. Creating a CSS class to define the width of each item is also recomended to ensure proper layout.
protected string TotalWidth
{
get
{
//In this example this.Madibu.Materiales is the datasource for the Repeater,
//so this.Madibu.Materiales.Count is the column count for your table.
//75 must be equal to the width defined in CSS class 'itemWidth'
return (this.Madibu.Materiales.Count * 75).ToString() + "px";
}
}