Within a page I implemented a repeater, like this:
<asp:Repeater ID = "rptDetails" runat = "server" OnItemDataBound = "rptDetails_ItemDataBound" >
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="row" style="margin-top: 10px; margin-left: 5px;">
<div class="col-5"><strong>Name:</strong> <asp:Literal ID="litName" runat="server" /></div>
</div>
<div class="row">
<div class="col-1" style='margin-top: 10px; margin-left: 5px;'><strong>Address:</strong></div>
<div class="col-4" style='margin-top: 10px; margin-left: 5px;'><asp:Literal ID="litStreet" runat="server" /></div>
</div>
<hr />
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:Repeater>
The idea being the to avoid the usage of a table structure. But when I run the code I get a slightly different output:
Name: Some dude
Address:
Some street 902 ABC DEF
The data is shown, but instead of putting it in a somewhat tabular format, it gets printed on separate lines.
In other words I'm expecting the following output:
Name: Some dude
Address: Some street 902 ABC DEF
How do I fix this?
Related
I have a blog page where blogs are fetched from database to my webpage.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div class="blog_post">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="">
<img src='<%# Eval("photo")%>' alt="Couple blog image" width="205px" height="150px" />
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<p class="posting_date"><%# Eval("date","{0:MMMM dd,yyyy}")%></p>
<h3><a href='ReadBlog/<%# Eval("title").ToString()%>'><%# Eval("title")%></a></h3>
<%#Eval("title") %>
<p class="blog_text">
<%# Eval("sdesc")%>
<p class="blog_text">
<a class="btn btn-danger" style="color:wheat" href='read_blog.aspx?id=<%# Eval("title")%>'>Read Post</a>
</p>
</p>
</br></br>
<hr/>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
on my Read_blog.aspx.cs page I have used...
if (!IsPostBack)
{
string myquery = Page.RouteData.Values["id"].ToString();
cls.gridbind(GridView1, "select * from tbl_blog_master where title='" + Request.QueryString["id"].ToString() + "' order by date desc");
}
I want to get the url like this
localhost/readblog/my-first-blog
help me please i am new to asp.net and have to learn a lot...
This is my first time on stackoverflow so sorry for my english..
I am designing an ASP.NET page with using some data from SQL Server Database. I used <DataList> to call data and fill any place I want to in the page. My problem is, CSS seems not working for the element in <HeaderTemplate>. I searched some posts but I couldn't find an answer.
I tried to style <p> like you see in the code, and I tried to style the data I called with <span> too. Then I tried to use both of them at the same time as you see. None of them works.
Here is my code:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Last News</h2>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate><p style="text-align:center;"></HeaderTemplate>
<ItemTemplate><span style="text-align:center;"><%#Eval("news_header") %></span></ItemTemplate>
<FooterTemplate></p></FooterTemplate>
</asp:DataList>
<p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
UPDATE and SOLUTION:
When I looked at the codes in browser while localhos was working, I saw the problem was table that Datalist creates. So I framed that table with div just out of Datalistcode and write the CSS class to make it work with all screen sizes. Here is the codes:
Asp.Net Side:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Son Haberler</h2>
<div class="col-lg-12"><asp:DataList ID="DataList1" runat="server">
<HeaderStyle CssClass="deneme2"/>
<ItemTemplate>
<span><%#Eval("haber_baslik_tr") %></span>
</ItemTemplate>
</asp:DataList></div>
<br /><p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
CSS Side:
.col-lg-12 table{
width:100%;
}
.col-lg-12 table tbody tr td{
text-align:center;
}
Use DataList.HeaderStyle
<HeaderStyle CssClass="MyHeaderClass">
</HeaderStyle>
this is my asp codes in my page
<asp:GridView BorderStyle="None" BorderColor="White" BorderWidth="0px" CellPadding="0" AlternatingRowStyle-BackColor="" ID="grdProducts" Width="100%" runat="server" AutoGenerateColumns="False" ShowHeader="False" AllowPaging="True" DataSourceID="sqldsProducts">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<!--begin col-lg-6 col-md-6 -->
<li class="list_item col-lg-12 col-md-12 portfolio">
<div class="recent-item">
<figure class="portfolio_1">
<div class="bwWrapper touching medium">
<asp:Image ID="Image1" ImageUrl='<%# Eval("PImg") %>' runat="server" />
</i>
</div>
<figcaption class="item-description">
<h5 id="PTitle"><%# Eval("PTitle") %></h5>
<p id="PDesc"><%# Eval("PDesc") %></p>
<div class="go_link">
Read More
</div>
</figcaption>
</figure>
</div>
</li>
<!--end col-lg-6 col-md-6 -->
<div style="height:20px;"></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<pagerstyle cssclass="pagination" HorizontalAlign="Center" />
</asp:GridView>
for example i want to add some css attributes for this code
h5 id="PTitle"<%# Eval("PTitle") %>/h5 but i dont know how to find this id and add attributes
You can do this using jQuery. Make sure you have jQuery embedded in your page.
Then you can access PTitle element using jQuery selector and assign CSS to it as follows
$( document ).ready(function() {
$("#PTitle").css('background-color','#ff0000');
});
EDIT:
If you have ASPX page
<h5 id="PTitle" runat="server">Test</h5>
Then Code Behind:
PTitle.Style.Add("display", "none");
Depends on when you want to add the Styles. Here are few options.
If you want to add it in design time just add a style attribute as you would for other html elements.
<h5 id="PTitle" style="font-size:12px"><%# Eval("PTitle") %></h5>
If you want to do it from code behind (server side) you need to add the runat="server" attribute to the element first. In this case you won't add the style attribute in design time.
<h5 id="PTitle" runat="server"><%# Eval("PTitle") %></h5>
Then you can access this control in code behind using it's id as follows.
for (int i = 0; i < grdProducts.Rows.Count; i++)
{
HtmlGenericControl PTitle = (HtmlGenericControl)grdProducts.Rows[i].FindControl("PTitle");
if (PTitle != null)
{
PTitle.Style.Add("font-size", "12px");
}
}
Or, you could use the Attributes property as follows.
for (int i = 0; i < grdProducts.Rows.Count; i++)
{
HtmlGenericControl PTitle = (HtmlGenericControl)grdProducts.Rows[i].FindControl("PTitle");
if (PTitle != null)
{
PTitle.Attributes.Add("style", "font-size:12px");
}
}
If you need to do this in client side make use you JavaScript/ JQuery.
Okay here's all I needed to solve my problem:
LiteralControl litc=new LiteralControl();
litc.Text = "<style type='text/css'> #PTitle{text-align:right} #PDesc{text-align:right} </style>";
this.Page.Header.Controls.Add(litc);
I am trying to align my buttons in the center. And the text that is currently pulled right I want next to my buttons, and centered. Ive been trying placing rows in every possible combination and Ive tried centering stuff in all sort of ways but just cant get it right.
At the moment I'm forced to use a <br> to get all of it to stay on the same row. But there must be a way to fix this that I'm missing. If I try to remove pull-right it just changes row instead of placing itself next to the button.
Code:
<ItemTemplate>
<td>
<div class="list-group-item">
<%# Eval("URL") %>
<asp:LinkButton ID="UpVoteButton" runat="server" CssClass="btn btn-default btn-xs" style="margin-left:2%"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton>
<div class="pull-right">
<asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
<asp:Label ID="LabelScoreValue" runat="server" Text="234"></asp:Label>
</div>
<br />
<asp:LinkButton ID="DownVoteButton" runat="server" CssClass="btn btn-default btn-xs" style="margin-left:2%"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton>
</div>
</td>
</ItemTemplate>
Current look:
I have fixed your issue this way, try this one and see if it works.
<style>
a.lnk-content, .lbl-score {
display:block;
margin-left: 30px; /* adjust this based on your requirement*/
margin-top: 10px; /* adjust this based on your requirement*/
}
</style>
<td style="border: 1px solid black; height: 50px;">
<div class="row">
<div class="col-xs-7"> <!-- adjust the columns based on your needs -->
this is my link
</div>
<div class="col-xs-5"> <!-- adjust the columns based on your needs -->
<div class="pull-left">
<div><asp:LinkButton ID="UpVoteButton" runat="server" CssClass="btn btn-default btn-xs"><i class="fa fa-chevron-up" style="color:green"></i></asp:LinkButton></div>
<div><asp:LinkButton ID="DownVoteButton" runat="server" CssClass="btn btn-default btn-xs"><i class="fa fa-chevron-down" style="color:red"></i></asp:LinkButton></div>
</div>
<div class="lbl-score">
<asp:Label ID="LabelScore" runat="server" Text="Score: "></asp:Label>
<asp:Label ID="LabelScoreValue" runat="server" Text="234"></asp:Label>
</div>
</div>
</div>
</td>
and this is the result, you could adjust this in anyway you want easily now:
the buttons on the result below don't appear properly because I don't have the styles.
I hope it helps you.
I'm working on an aspnet application and twitter bootstrap.
I have a situation where i need to hide a span based on a variable witch I can do correctly. The problem is that the hidden span keeps the width and breaks the next div.
<div class="row-fluid">
<div class='<%= (showTitle ? "span4" : "hide") %>'>
<label>Title</label>
<ASP:DropDownList ID="DpdLstTitle" runat="server" CssClass="span12"></ASP:DropDownList>
</div>
<div class='<%= (showTitle ? "span8" : "span12") %>'>
<label>Name</label>
<ASP:TextBox ID="TboxName" runat="server" MaxLength="80" CssClass="span12" />
</div>
</div>
Any suggestions ?
You will have to add in some css as bootstrap has added a margin to the second row
Probably:
margin-left: 2.127659574468085%;
So you'll have to override it. Insert
margin-left: 0;
Example HTML:
<div class="row-fluid">
<div class='<%= (showTitle ? "span4" : "hide") %>'>
<label>Title</label>
<ASP:DropDownList ID="DpdLstTitle" runat="server" CssClass="span12"></ASP:DropDownList>
</div>
<div class='<%= (showTitle ? "span8" : "span12 hiddenColBefore") %>'>
<label>Name</label>
<ASP:TextBox ID="TboxName" runat="server" MaxLength="80" CssClass="span12" />
</div>
</div>
Example CSS:
.hiddenColBefore {
margin-left: 0 !important;
}