How to make a datalist to appear at desired location on the screen

Question

0.00/5 (No votes)

See more:

I want to display the datalist at 'top:200px' and 'left:300px;' in the following code. I could not find 'style' for datalist. How to make the datalist to appear at desired location.

<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" >

Thanks

Posted 11-Nov-13 22:18pm

S.Rajendran from Coimbatore

Updated 11-Nov-13 22:20pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vishal Pand3y · Accepted Answer · 2013-11-11T22:22:00

Solution 1

use css

CSS

margin-top:200px;

and

CSS

margin-left:300px;

or but that DataList into a div

Posted 11-Nov-13 22:22pm

Vishal Pand3y

Comments

S.Rajendran from Coimbatore 12-Nov-13 4:35am

I tried like this.Not working.
<style type="text/css">
.myclass
{
margin-top:200px;
margin-right:300px;
}

</style>

<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" ItemStyle-CssClass= "myclass">

Vishal Pand3y 12-Nov-13 4:41am

put that DataList into a div and apply a class in div

Vishal Pand3y 12-Nov-13 4:45am

if you are still facing Problem post your complete code of aspx page

S.Rajendran from Coimbatore 12-Nov-13 4:57am

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.myclass
{
margin-top:200px;
margin-right:300px;
}

</style>
</head>
<body>

<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" ItemStyle-CssClass= "myclass">

<itemtemplate>
<table id="Table1" cellpadding="1" cellspacing="1" visible ="true">
<tr>
<td width="140px">
<p align="left">
Product ID:
<asp:Label ID="lblEmpCode" runat ="server" CssClass="LabelStyle"
Text= '<%#DataBinder.Eval(Container.DataItem, "product_id")%>'>

</p>
</td>
</tr>
</table>
<table id="Table2" style=" margin-top:-23px" cellpadding="1" cellspacing="1" visible ="true">
<tr>
<td>
<td style="left:0px"width="200px">
<p align="left">
Product Name:
<asp:Label ID="lblEmpName" runat = "server" CssClass="LabelStyle"
Text=' <%# DataBinder.Eval(Container.DataItem, "product_name")%>'>

</p>
</td>
</tr>
</table>
<table id="Table3" cellpadding="1" cellspacing="1" visible ="true">
<tr>
<td width="100px">
<p align="left">
<img src= '<%#DataBinder.Eval(Container.DataItem,"picture_path") %>'
style="height:100px;width:100px;border:1px solid gray;"/>
</td>
</p>
</td>

</tr>

</table>

</div>
</form>
</body>
</html>

Vishal Pand3y 12-Nov-13 5:04am

@rajendra when i am copying your code in on my system there are too many errors so firstly i have to solve those problem or You solve these and then post the code

S.Rajendran from Coimbatore 12-Nov-13 5:08am

On page load, I bind the table 'product' with this datalist. It is running fine for me.
Only thing I dont know how to place the datalist at desired location.

Vishal Pand3y 12-Nov-13 5:09am

in div just above the datalist put class='SetMargin'
and in SetMargin write margin-top:200px; and margin-left:300px;

S.Rajendran from Coimbatore 12-Nov-13 5:27am

I tried using CSSClass in Datalist and named it as 'SetMargin' and at style class I use .setmargin and inside it i put 'margin-right=300px' and 'margin-top=200px'. Margin-top works but margin-right is not responding!

Vishal Pand3y 12-Nov-13 5:32am

In the div just above DataList put a class and in this class set margin..

Vishal Pand3y 12-Nov-13 5:36am

if this is not working set it in body

S.Rajendran from Coimbatore 12-Nov-13 5:46am

How to put a class above datalist to set the margins?

Vishal Pand3y 12-Nov-13 5:50am

dear S.Rajendra can u see the div just above the DataList Change it to
<div class='SetMargin'>
in css Write Something Like
.SetMargin
{
margin-top:200px;
margin-right:300px;
}

S.Rajendran from Coimbatore 12-Nov-13 5:57am

I tried like:
<div class='setmargin'> and separately <body class='setmargin'>
In both, only margin-top=200px works. margin-right=300px is not working.

Vishal Pand3y 12-Nov-13 6:01am

then try setting margin-left there must be something wrong in your approach.....

S.Rajendran from Coimbatore 16-Nov-13 1:09am

basically i made a mistake of putting as 'margin-right' instead of 'margin-left'. Now it works. Thanks.