When I open my aspx page I have 3 images horizontally side by side on desktop. But I want to open my page in mobile with these images aligned in center vertically. The content on the page should remain same except the images.
Aspx page
<div class="row enrollmentStep">
<div class="col-xs-12 step-container">
<!-- Top Container -->
<div class="row inner-step-container">
<div class="col-xs-12 top-spacing">
<div align="center" class="row">
<div id="pageDescription" class="col-xs-12" runat="server"></div>
</div>
<table align="center" border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<div align="center">
<asp:Image ID="qrCodeImage" runat="server" Height="200px" Width="200px" Visible="true" />
</div>
<div align="center">
<a id="secret" runat="server" class="txtLabel" visible="true" target="_blank"></a>
<td>
<div align="center">
<label id="siLabel" runat="server" for="siBox" class="txtLabel"></label>
</div>
</td>
</div>
</tr>
</table>
<div class="imgrow" align="center" visible="true">
<div class="top-spacing bottom-spacing" style="float: left; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="iTunesLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="itunes" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
<div class="top-spacing bottom-spacing" style="float: left; align:center; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="play_storeLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="play_store" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
<div class="top-spacing bottom-spacing" style="float: left; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
<a id="windows_storeLink" runat="server" class="txtLabel" visible="true" target="_blank">
<asp:Image ID="windows_store" Height="64px" Width="128px" runat="server" Visible="true" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have a repeater which has two columns one column contains label and another has textbox.
on enter data in the text box it should show as label and another textbox in the same row should appear.i am getting a text box but not able to do as said above.Please help me.
<asp:Repeater ID="RepDetails" runat="server" OnItemDataBound="RepDetails_ItemDataBound" >
<HeaderTemplate>
<table style="border: 0px solid #df5015; width: 100%">
<tr style="background-color: White; color: White">
<td colspan="2">
<b>Atrributes</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color: #EBEFF0; height: 50px;" >
<td >
<table style="background-color: #EBEFF0; border: 0px dotted #df5015; width: 100%; margin-bottom: 30px;">
<tr style="height: 20px;">
<td style="width: 30%">
<asp:Label ID="lblAttributeName" runat="server" Text='<%#Eval("AttirbuteName") %>' Font-Bold="true" /></td>
<td id="textboxId" style="width: 70%">
<asp:TextBox ID="txtAttributeNameDef" runat="server" ToolTip='<%#Eval("AttirbuteDefination") %>' Width="100%"></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
You can do using repeater like this way DEMO
<div class="detailBox">
<div class="titleBox">
<label>Comment Box</label>
<button type="button" class="close" aria-hidden="true">×</button>
</div>
<div class="commentBox">
<p class="taskDescription">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="actionBox">
<asp:Repeater ID="RepDetails" runat="server" >
<ItemTemplate>
<ul class="commentList" id="listchat">
<li>
<div class="commenterImage">
<img src="http://lorempixel.com/50/50/people/6" />
</div>
<div class="commentText">
<p class="">Hello this is a test comment.</p> <span class="date sub-text">on March 5th, 2014</span>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
<div class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" id="txtcomment" placeholder="Your comments" />
</div>
<div class="form-group">
<button class="btn btn-default" id="postcomment">Add</button>
</div>
</div>
</div>
</div>
I am using a Telerik RadListView (the elements are the same in a standard ASP.NET ListView) to show some data from a database. I want to show them in a tiled layout, but it loads the items from left to right.
For example - if I have 4 items in a row, the 5th item is shown on the left side. I tried to add dir="rtl" to all divs but that doesn't work.
How can I make this load items from right to left?
Here is my code:
<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" AllowCustomSorting="True" AllowMultiFieldSorting="True" AllowNaturalSort="True" DataKeyNames="product_key" DataSourceID="DS_pure_product" PageSize="12">
<LayoutTemplate>
<div class="RadListView RadListViewFloated RadListView_Default" dir="rtl">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<telerik:RadDataPager ID="RadDataPager1" runat="server" SEOPagingQueryPageKey="CurrentPageKey" PageSize="12">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="Numeric" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="NextLast" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<%--<telerik:RadDataPagerGoToPageField />
<telerik:RadDataPagerNumericPageSizeField />--%>
</Fields>
</telerik:RadDataPager>
</div>
<div class="col-md-3">
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div class="rlvFloated">
<div class="container-fluid" dir="rtl" style="text-align:right;">
<div class="row">
<div id="itemPlaceholder" runat="server">
</div>
</div>
</div>
</div>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="rlvI col-md-3 lv_items">
<asp:Button ID="SelectButton" runat="server" CausesValidation="False" CommandName="Select" CssClass="rlvBSel" Text=" " ToolTip="Select" />
<table class="tbl_product">
<tr>
<td>
<asp:Image ID="Image2" CssClass="img-responsive img_product" runat="server" ImageUrl='<%# Eval("product_img") %>' />
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image1" runat="server" CssClass="img_product_logo" ImageUrl='<%# Eval("product_brand") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("product_name") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("product_price") %>' />
</td>
</tr>
</table>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<div class="RadListView RadListView_Default">
<div class="rlvEmpty">
There are no items to be displayed.</div>
</div>
</EmptyDataTemplate>
</telerik:RadListView>
After some conversation in the comments, it sounds like what you want is to right-align your content. In that case, float: right is what you're looking for.
The key is to have an overall container that will hold all of your data. Then, have another container for each row. This inner container is what you will float to the right. By not giving the inner container a width, it will grow to be as big as its children. If the inner container's width is less than that of its parent, it will show as aligning to the right side.
Below is an example of that.
.body {
height: 100px;
width: 500px;
background-color: red;
}
.child-container {
height: 100%;
float: right;
}
.child-1 {
height: 50%;
width: 100px;
float: left;
background-color: green;
}
.child-2 {
height: 50%;
width: 100px;
float: left;
background-color: orange;
}
.child-3 {
height: 50%;
width: 100px;
float: left;
background-color: blue;
}
<div class="body">
<div class="child-container">
<div class="child-1">
</div>
<div class="child-2">
</div>
<div class="child-3">
</div>
</div>
</div>
I've read that the ListView itself can't take CSS to adjust its width, but that you do it in the ItemTemplate, but I just can't get it. I'm trying to put three ListView controls side by side. Each control has an image and text to the right. Think Windows Explore file list, but only a single column with a name.
The text in each ListView will be less than 32 characters, so there should be plenty of room, but each ListView takes up more than 50% of the screen no matter what I've tried. CSS is not my strong suit.
Current CSS which is wrong
.lv_table{
width:500px;
border: 1px solid #ccc;
}
.lv_tr
{
width: 100px;
}
.list_view
{
border-style: solid;
border-width: 2px;
border-color: #000000;
}
.list_image
{
float: left;
display: inline-block;
}
.list_item_large
{
font-size: 1.6em;
color: #000000;
padding: 8px 0px 0px 0px;
margin: 0px auto;
display: inline-block;
text-align:left;
min-height: 32px;
}
ListView Controls
<table class="lv_table">
<tr class="lv_tr"><td class="list_view">
<asp:ListView runat="server" ID="lvwCategories" >
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
<td> </td>
<td class="list_view">
<asp:ListView runat="server" ID="lvwLists">
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
<td> </td>
<td class="list_view">
<asp:ListView runat="server" ID="lvwItems">
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="list_image">
<img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
</div>
<div class="list_item_large ">
<a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div>
</div>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
<div>
<img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
</div>
<div>
<b>No Categories Found</b>
</div>
</EmptyDataTemplate>
</asp:ListView>
</td>
</tr>
</table>
You can change your .lv_table style width to 100% and give your .list_view style a width:33%; and remove all the inline width:500px; of your <div>'s in your LayoutTemplates.
This is my aspx code
<div id="tabs-1">
<table id="BookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</div>
<div id="tabs-2">
<div id="circleG" style="margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px;">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
</div>
<div id="tabs-3">
<p>
Date:
<input type="text" id="datepicker" runat="server">
</p>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="BookingForDate" runat="server" OnClick="BookingForDate_Click" Text="Search" />
<span style="color: red" id="errorDateMessage" runat="server"></span>
<div runat="server" id="circleG2" style="margin-left: auto; margin-right: auto; margin-left: 400px; padding-bottom: 60px;">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
<table id="DateBookingTable" runat="server" class="tableResultClass">
<tr>
<th>ID</th>
<th>PlanTime</th>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
It is simple code that have three div as tabs.
I want to know which tab is selected in a specific moment. how please?
I think it is something about session but I don't know what it is
You can do the following:-
1) Declare a global variable.
2) Attach a onClick event for each div. Whenever this event is fired, set this global variable with the id of corresponding div.
3) Access this global variable in the required function.
I use JQuery ThickBox 3.1 , and here is my code
<telerik:RadListView runat="server" ID="myDataList" AllowPaging="true"
DataKeyNames="id" ItemPlaceholderID="PlaceHolder1"
NeedDataSource="list_DataRebind">
<LayoutTemplate>
<div class="sushibar">
<asp:Panel ID="SushiPanel" runat="server">
<div class="sushi">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
<telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="4" PagedControlID="myDataList">
<Fields>
<telerik:RadDataPagerButtonField />
<telerik:RadDataPagerPageSizeField />
<telerik:RadDataPagerSliderField />
</Fields>
</telerik:RadDataPager>
</asp:Panel>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="imageDiv">
<span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
<%#Eval("Title") %></span>
<br />
<a href='<%#Eval("ImagePath")%>' title='<%#Eval("Title")%>' class="thickbox" >
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
</ItemTemplate>
</telerik:RadListView>
Popup box with Image and Title show correctly , but I have another field(<%#Eval("Description")%>) to show with it !
I found how to show Inline Content in Thickbox ,
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a
caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"
class="thickbox">Show hidden modal content.</a>
But I don't know how to use this in a ListView !
:D , I found the answer ! Just put the contents ( Image + Description ) to hidden division (style with Display:none) and set this div id to inlineId .
<ItemTemplate>
<div class="imageDiv">
<span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
<%#Eval("Title") %></span>
<br />
<div id="popUpRegion" style="display: none">
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="500px" height="600px" />
<p>
<%#Eval("Description")%></p>
</div>
<a href="#TB_inline?height=800&width=600&inlineId=popUpRegion" title='<%#Eval("Title")%>'
class="thickbox">
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
</ItemTemplate>