This should be dead easy. How do you center a radiobuttonlist? It didn't used to be hard.
The below HTML does not work. What am I missing?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%">
<tr>
<td style="text-align: center">
<asp:RadioButtonList ID="radUserType" runat="server"
RepeatDirection="Horizontal">
</asp:RadioButtonList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
RepeatLayout="Flow"
Renders the RadioButtonList in a span rather than a table.
Try using td attributes :
<td align="center">
<asp:RadioButtonList ID="radUserType" runat="server"
RepeatDirection="Horizontal">
</asp:RadioButtonList>
</td>
Related
I'm using a repeater to present multiple items in a list.
I want to separate the items by a line using a <hr> tag. If I omit it, there's no line; however if I add it, it displays TWO line in the browser. Anyone have a suggestion for this?
Source code of the repeater:
<asp:Repeater ID="Lijst" runat="server" DataSourceID="SqlDataSource2"
OnItemDataBound="Lijst_ItemDataBound"
>
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<table style="width:100%">
<tr>
<td style="width:100%">
<asp:Label ID="Regel" runat="server"></asp:Label>
</td>
<td style="width:100%">
<asp:Label ID="Plancode" runat="server" font-size="20px" align=right></asp:Label>
</td>
</tr>
<hr />
</table>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
Rendering of one item:
<table style="width:100%">
<tr>
<td style="width:100%">
<span id="MainContent_Lijst_Regel_1"></span>
</td>
<td style="width:100%">
<span id="MainContent_Lijst_Plancode_1" align="right" style="font-size:20px;"></span>
</td>
</tr>
<hr />
</table>
Thanks in advance!
you can use a separator template and inside it insert
<asp:Repeater runat="server" ID="rp">
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>
I have a web page I'm trying to set up that will show some Ajax Tables nested inside a CollapsiblePanelExtender. The table is nesting correctly, but the styles are behaving strangely. I recently started using Chrome's Inspector tool, and I think it's pointing me in the right direction, but I'm having trouble understanding why what the Inspector is showing is different from what is in my .aspx file. I've tried this in Firefox as well, and the behavior is similar, so this doesn't seem to be a Chrome-only bug.
I set overflow:hidden; in the style for the Ajax Panel that the tables are directly nested in, but when shown in a browser, a horizontal scrollbar appears, and the Inspector shows that the style has changed to overflow-y:hidden;. What could cause my style to change between the design in my .aspx file and the way it appears in the browser?
It seems the Ajax Panel I specify in my .aspx file is converted into a <div> by the browser. I can accept that. The odd part is, it appears that an additional <div> appears in the Inspector that I don't specify anywhere in my .aspx file. Where could this additional <div> be coming from?
Minimal reproduction of my .aspx file:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site_old.Master" CodeBehind="TEST.aspx.vb" Inherits="MyProject.TEST" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.MyCollapsePanelHeader
{
height:20px;
font-weight: bold;
padding:5px;
cursor: pointer;
vertical-align:middle;
font-size:small;
overflow:hidden;
}
.MyCollapsePanel
{
width:100%;
height:100%;
border: 1px solid #BBBBBB;
border-top: none;
overflow:hidden;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table width="960px">
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelContent"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="true"
TextLabelID="lblHideShow"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="img"
ExpandedImage="images/minus.gif"
CollapsedImage="images/plus.gif"
SuppressPostBack="true" >
</asp:CollapsiblePanelExtender>
<asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
<table width="100%">
<tr>
<td>
<asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
TITLE
<asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td>
<asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
<table width="100%">
<tr>
<td height="100%" runat="server">
<asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Screenshot of Inspector Output:
I seem to have resolved this issue. I believe it was due to the fact that the CollapsiblePanelExtender and the Panel it was targeting were separated into different cells. After moving the target Panel up into the same cell as the CollapsiblePanelExtender, the scrollbars disappeared.
The <div> element is being duplicated and the overflow-y element is still present. I still don't understand why these appear the way they do. But it seems to be unrelated to why the scrollbar was showing. Since that was the issue I was originally trying to fix, I guess this counts as a solution.
Working .aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table width="960px">
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelContent"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="true"
TextLabelID="lblHideShow"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="img"
ExpandedImage="images/minus.gif"
CollapsedImage="images/plus.gif"
SuppressPostBack="true" >
</asp:CollapsiblePanelExtender>
<asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
<table width="100%">
<tr>
<td>
<asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
TITLE
<asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
<table width="100%">
<tr>
<td height="100%" runat="server">
<asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Im making a website in Visual Studios. Im trying to change the Background of my website. When i add the image in Visual Studios it changes but when i launch it to see it in a web browser the background image is gone.
'<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
h1{
text-align:center;
font-family:Andalus;
color:white;
}
body{
background-image: url('C:\Users\........\Desktop\wood.jpg');
text-align:center;
}
.auto-style2 {
width: 664px;
}
p{
font-family:Cambria;
color:white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1> Welcome</h1>
</div>
<table class="auto-style1">
<tr>
<td class="auto-style2"><p>Username</p></td>
<td class="auto-style2"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td class="auto-style2"> </td>
<td>
</td>
</tr>
<tr>
<td class="auto-style2">
<p>Password</p></td>
<td class="auto-style2">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td class="auto-style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style2">
</td>
<td class="auto-style2">
<asp:Button ID="Login" runat="server" OnClick="Login_Click" Text="Log in " />
</td>
<td class="auto-style2">
</td>
<td>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Log in as guest" />
</td>
</tr>
</table>
<asp:Label ID="Label1" runat="server"></asp:Label>
</form>
It sounds like you haven't set up a project folder if you're referring to an image on your desktop. You're also using absolute values in the code so depending on how you upload your site this may cause issues. I'm not familiar with how Visual Studio's uploads the content.
Create a new project folder and then a sub-folder called images or something, and refer to them by like this:
body{
background-image: url('/images/wood.jpg');
text-align:center;
}
Have a look here: http://www.w3schools.com/html/html_images.asp for some more tips.
If you still have issues, paste the code here by viewing the source from your browser rather than the program, might give some idea of where it's going wrong.
I have a HTML table that has 4 rows
the height of rows are 10% 35% 45% 10%
when I put content in row that have 45% of table height size if the amount of content height be large it decrease other rows height to show the content and all things go wrong what should I do?
Is it possible to increase only the height of that row?
Its not important if the page size increases.
<html>
<head runat="server">
<title> Kut Sharing</title>
</head>
<body >
<div>
<form id="form1" runat="server">
<table width="100%" style="height:100%" border="0">
<tr style="height:10%;background-image:url(Photos/header.png)"" >
<td>
<table width="100%" style=" height:100%" border="0">
<tr>
<td style="width:12%; background-image:url(Photos/header2.gif)"> </td>
<td>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder></td>
</tr>
</table>
</td>
</tr>
<tr style="height:35%; background-image:url(Photos/bluebox.png)"">
<td>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr style="height:45%;">
<td>
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
<br />
<br />
</td>
</tr>
<tr style="height:10%; background-image:url(Photos/footerBg.png)"">
<td> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
Don't use percentage for your heights in this case.
I have a simple page that pops up a telerik radwindow on button click.
But opens as collapsed in IE 9. Works fine with FF, Chrome, IE 8, IE Compatibility Mode.
Look at the below screenshots of how they open.
IE 9
Firefox
Heres the page code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="scriptManager" runat="server" />
<telerik:RadButton ID="btnOpen" runat="server" Text="Open" OnClick="btnOpen_Click" />
<br />
<telerik:RadWindow ID="TestDialog" runat="server" Title="Select Order Services"
VisibleStatusbar="false" AutoSize="true" AutoSizeBehaviors="Height" Width="400px"
Modal="true" VisibleOnPageLoad="false" Behaviors="Close, Move" EnableShadow="true">
<ContentTemplate>
<div style="overflow: hidden;">
<table cellspacing="0" border="0"
style="table-layout: auto; ">
<tbody>
<tr>
<th style="width: 100px;">Column 1</th>
<th style="width: 100px;">Column 2</th>
</tr>
<tr>
<td>
a
</td>
<td>
a
</td>
</tr>
<tr>
<td>
b
</td>
<td>
b
</td>
</tr>
<tr>
<td>
c
</td>
<td>
c
</td>
</tr>
</tbody>
</table>
</div>
</ContentTemplate>
</telerik:RadWindow>
</form>
</body>
</html>
Code behind:
protected void btnOpen_Click(object sender, EventArgs e)
{
TestDialog.VisibleOnPageLoad = true;
}
I want the overflow:hidden present in the style and still want the pop up opened fully in IE 9. How do I get it?
Found a way.
<ContentTemplate>
<div style="display: inline; overflow: hidden;">
...
This is a solution, but I dont really understand how this works! That was one lucky line of code I wrote!
If any one can explain me why it works, I will mark theirs as answer.