I have a listview that repeats horizontally, and it displays 20 images. With my screen resolution, there's space for 5 images/row, so I should see 4 rows.
Unfortunately, it is currently showing one long row with all 20 images. It's also displaying the horizontal scrollbar.
My question: how can I limit the space to my screen resolution so that I see the 4 rows with images and no horizontal scrollbar? Everything should be displayed within the screen. If anything, there should be a vertical scrollbar to scroll down.
I added some CSS to limit the size of the body to 100%, but nothing changed. I also set the div within <body> to 100%, but didn't do anything either.
Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body, html
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width:100%">
<asp:DataList id="DataListImages" RepeatDirection="Horizontal" RepeatLayout="Table"
RepeatColumns="0" runat="server">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<AlternatingItemStyle BackColor="Gainsboro">
</AlternatingItemStyle>
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div style="width: 192px; height: 162px"></div>
<asp:Image runat="server" id="ProductImage"
AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>'
ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
First off, this is a DataList - you need to fix that.
You need to take a look at the ListView GroupTemplate:
Using GroupTemplate in ASP.Net ListView Control(Tiled Display)
You may want to pay attention to the dimensions of the images and the file sizes from a performance point of view.
Here's a sample of using ListView GroupPlaceHolder to achieve a certain layout:
<asp:ListView ID="galleryView" runat="server" OnPagePropertiesChanging="ChangePage"
GroupPlaceholderID="groupPlaceHolder" ItemPlaceholderID="itemPlaceholder"
GroupItemCount="5">
<LayoutTemplate>
<div ID="groupPlaceHolder" runat="server"></div>
</LayoutTemplate>
<GroupTemplate>
<div ID="itemPlaceholder" runat="server"></div>
</GroupTemplate>
<ItemTemplate>
<asp:Image runat="server" id="ProductImage"
AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>'
ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' />
</ItemTemplate>
<GroupSeparatorTemplate>
<div id="Div1" runat="server">
<div style="clear:both"><br /></div>
</div>
</GroupSeparatorTemplate>
</asp:ListView>
<div style="clear:both; padding-top:8px; padding-left:8px;">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="galleryView" PageSize="40">
<Fields>
<asp:NumericPagerField ButtonCount="20" />
</Fields>
</asp:DataPager>
</div>
Related
I am a new one to ASP.NET and currently learning from the book "Beginning ASP.NET with Visual Studio 2015" by William Penberthy. In the chapter 7 about layout with master pages I created a custom master page WebForms with stylesheet RentMyWrox and moved the inline style for various controls of the page ManagedItems.aspx to RentMyWrox.css. This cause the layout to mess up.
When I switched back to default master page and added the inline style to default Site.css stylesheet the layout was displayed correctly. I downloaded the source code for the book and it has the same issue. Could anyone explain, what is the problem?
My custom master page WebForms.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="WebForms.master.cs"
Inherits="RentMyWrox.WebForms" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Content/RentMyWrox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="header">
</div>
<div id="nav">
Navigation content here
</div>
<div id="section">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
Footer content here
</div>
</form>
</body>
</html>
Stylesheet for custom master page RentMyWrox.css
body {
font-family: verdana;
}
#header {
background-color:#C40D42;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:750px;
float:left;
padding:10px;
}
#footer {
background-color:#C40D42;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.dataentry input{
width: 250px;
margin-left: 20px;
margin-top: 15px;
}
.dataentry textarea{
width: 250px;
margin-left: 20px;
margin-top: 15px;
}
.dataentry label{
width: 75px;
margin-left: 20px;
margin-top: 15px;
}
#fuPicture {
margin-top: -20px;
margin-left: 120px;
}
Page ManagedItems.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/WebForms.Master" AutoEventWireup="true" CodeBehind="ManageItem.aspx.cs" Inherits="RentMyWrox.Admin.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<div class="dataentry">
<asp:Label ID="Label1" runat="server" Text="Name"
AssociatedControlID="tbName"></asp:Label>
<asp:TextBox ID="tbName" runat="server"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label ID="Label2" runat="server" Text="Description"
AssociatedControlID="tbDescription"></asp:Label>
<asp:TextBox ID="tbDescription" runat="server"
TextMode="MultiLine" Rows="5"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label ID="Label3" runat="server" Text="Cost"
AssociatedControlID="tbCost"></asp:Label>
<asp:TextBox ID="tbCost" runat="server"></asp:TextBox>
</div>
<div class="dataentry">
<asp:Label runat="server" Text="Item Number" AssociatedControlID="tbItemNumber"/>
<asp:TextBox runat="server" ID="tbItemNumber" /> </div> <div class="dataentry">
<asp:Label runat="server" Text="Picture" AssociatedControlID="fuPicture" />
<asp:FileUpload ID="fuPicture" ClientIDMode="Static" runat="server" />
</div>
<div class="dataentry">
<asp:Label runat="server" Text="Acquired Date" AssociatedControlID="tbAcquiredDate"/>
<asp:TextBox runat="server" ID="tbAcquiredDate"/>
</div>
<asp:Button Text="Save Item" runat="server" OnClick="SaveItem_Click" />
</div>
</asp:Content>
This is how it should look according to the book
This is how it actually looks like
The source code can be downloaded at http://media.wiley.com/product_ancillary/27/11190774/DOWNLOAD/RentMyWrox_Chapter7_CSharp..zip
Is the code attached/linked the "before" or "after" modification code?
My recommendation is to use the tools of your browser to check if the CSS file was actually loaded. In Chrome, you can press F12 and then click on the "Sources" tab. This will show you what is loaded down the left, I'm guessing your CSS file is not there.
If that's the case, it might be your reference in your master file.
Currently you have it as:
But that link is not a valid link from your manageitem.aspx page which is inside the 'Admin' folder.
Instead, try "~/Content/RentMyWrox.css" - this should map the proper path from the root of your application, rather than relative to whichever child page is loading the master.
I have an asp:ListView control containing a bunch of images set up like this:
<asp:ListView ID="lvSliderPhotos" runat="server">
<ItemTemplate>
<asp:Image ID="imgSliderPhoto" runat="server"
ImageUrl='<%# Eval("ThumbnailPath") %>' />
</ItemTemplate>
</asp:ListView>
For my DB table containing these I have a field called IsPublic which stores a boolean. How can I apply a style to the asp:Image control if the value is false?
I basically want something like this:
<asp:Image ID="imgSliderPhoto" runat="server"
ImageUrl='<%# Eval("ThumbnailPath") %>'
Style='<if (!Eval("IsPublic") { set a style property }>' />
Any idea how this can be accomplished?
You can check the value of IsPublic inside the CssClass property of the image control and set it to the desired style rule:
CssClass='<%# Convert.ToBoolean(Eval("IsPublic")) ? "public" : "private" %>'
Complete example:
<head runat="server">
<title></title>
<style type="text/css">
.public {
border: 6px solid red;
}
.private {
border: 6px solid black;
}
</style>
</head>
<body>
<asp:Image ID="Image1" runat="server" />
<form id="form1" runat="server">
<asp:ListView ID="lvSliderPhotos" runat="server">
<ItemTemplate>
<asp:Image ID="imgSliderPhoto" runat="server"
ImageUrl='<%# Eval("ThumbnailPath") %>' CssClass='<%# Convert.ToBoolean(Eval("IsPublic")) ? "public" : "private" %>' />
</ItemTemplate>
</asp:ListView>
</form>
</body>
I have a Datalist with binddata from code behind and I'm trying to add an ajax modalpopupextender to each item. This modalpopup needs to open the right panel with the problem that the target control id it's always the same button in the end of the page.
I am getting the radiobutton selected but i can't open the modalpopup that is equivalent to it. It always opens the first panel.
Can anyone help me? Is this even possible?
C#
protected void btnValidateGift_Click(object sender, EventArgs e)
{
if (Request.Form["gift"] != null)
{
}
}
aspx
<asp:DataList ID="datalistReward" runat="server" RepeatDirection="Vertical" RepeatColumns="3" CssClass="datalistGift">
<ItemTemplate>
<div class="giftDiv">
<div class="giftTitle">
<%# DataBinder.Eval(Container.DataItem, "name") %>
</div>
<div>
<img width="60%" src="img/brindes/<%# DataBinder.Eval(Container.DataItem, "img") %>.png" />
</div>
<div id="divRadioBtnGift" runat="server" style="width: 10%; margin: auto;">
<input type='radio' id='radioBtnGift_<%# DataBinder.Eval(Container.DataItem, "value") %>'
name='gift' value='<%# DataBinder.Eval(Container.DataItem, "id") %>' />
</div>
</div>
<asp:ModalPopupExtender ID="ModalPopUpReward" BehaviorID="modalBehaviorPopupReward" runat="server" PopupControlID="panelSelectReward"
CancelControlID="btnCloseReward" BackgroundCssClass="modalBackground" TargetControlID="btnValidateGift" />
<asp:Panel ID="panelSelectReward" runat="server" CssClass="modalPopup" align="center" Style="display: none">
<div style="background-color: aqua; border: 1px solid red;">
<img width="60%" src="img/brindes/<%# DataBinder.Eval(Container.DataItem, "img") %>.png" />
<asp:ImageButton ID="btnCloseReward" runat="server" Text="Close" OnClientClick="CloseModalPopUp()" />
</div>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
<asp:Button ID="btnValidateGift" Text="Validar >" runat="server" CssClass="divButton" OnClick="btnValidateGift_Click" />
Edit1: I've tried to add the a custom string to the panel id like this <%# DataBinder.Eval(Container.DataItem, "id") %> . But this doesn't even compile. Any chance of making this work?
You use server-side OnClick event to show the popup. It just shows the first (or last) data evaluated during page render.
To change ModalPopup's content you need to use OnClientClick event + asynchronous call to fill the popup with the data you need.
Here is the example of using client events with ModalPopup.
I have no idea how to accomplish something like this, so here goes.
I have a datatable that has the following data:
Room Cook Waiter Input
201 Joe Jim Green.png
202 Jack Mary Red.png
203 Jet Mark Yellow.png
204 Nick Jill Green.png
I have 3 PNG files: Green.png, Red.png, Yellow.png. Each PNG is 100x100px.
The data control that I've been using is a datalist. Each datalist item has the following: a 100x100px div for displaying the PNG according to the Input column and 3 labels, for columns Room, Cook, and Waiter.
This is not an issue and it's already being displayed correctly: each datalist item is 100x100px in size and within this space I have 3 labels displaying the other columns.
The bigger issue, which is where I'm stuck at, is being able to click on each datalist item and running server-side code. And when the server-side code runs, the codebehind will have the Room, Cook. and Waiter in that datalist item. This is where I'm really stuck at.
Most of the partial solutions I've seen have been with jquery, but I do not want to use that. Ideally, it would be to add a label over an image button, but that's not possible. Worse-case scenario would be to display the text outside the button, but that would ruin the design.
I'm including the aspx markup:
<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
<ItemTemplate>
<div style="padding: 8px">
<div style='width:195px;height:162px; background-image:url(<%# Eval("image_path") %>)'>
<div style="width: 195px; height: 22px; padding-top: 5px; overflow: hidden;">
<div style="box-sizing: border-box; width:97px; float:left;">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("RoomNum")%>' ></asp:Label>
</div>
</div>
<div style="width: 195px; height: 22px; box-sizing: border-box">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("CookName")%>' ></asp:Label>
</div>
<div style="width: 195px; height: 22px; box-sizing: border-box">
<asp:Label ID="Label3" runat="server" Text='<%# Eval("WaiterName")%>' ></asp:Label>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
Any help is appreciated.
Wrap your primary DIV with a LinkButton control and then you should be able to accomplish what you want. This will make the entire DIV clickable. You will may need to use the CommandName and CommandArgument properties.
<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
<ItemTemplate>
<asp:LinkButton ID="lnkButton" runat="server" CommandName="Details" CommandArgument='<%# Eval("RoomNum") + "," + Eval("CookName") + "," + Eval("WaiterName") %>' OnClick="lnkButton_Click">
<div style="padding: 8px">
<div style='width:195px;height:162px; background-image:url(<%# Eval("image_path") %>)'>
<div style="width: 195px; height: 22px; padding-top: 5px; overflow: hidden;">
<div style="box-sizing: border-box; width:97px; float:left;">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("RoomNum")%>' ></asp:Label>
</div>
</div>
<div style="width: 195px; height: 22px; box-sizing: border-box">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("CookName")%>' ></asp:Label>
</div>
<div style="width: 195px; height: 22px; box-sizing: border-box">
<asp:Label ID="Label3" runat="server" Text='<%# Eval("WaiterName")%>' ></asp:Label>
</div>
</div>
</div>
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>
Alternatively, you can use the "OnItemCommand" command in the DataList control. Here's some helpful info on setting that up: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datalist.itemcommand(v=vs.110).aspx
I have two panels. I want to show them abreast, but they don't.
.aspx:
<asp:Panel ID="treeviewMenu" Width="20%" Height="500" runat="server" ScrollBars="Both" HorizontalAlign="Left">
<asp:TreeView ID="treeview" runat="server" ShowLines="True" ImageSet="XPFileExplorer" OnSelectedNodeChanged="treeview_SelectedNodeChanged">
</asp:TreeView>
</asp:Panel>
<asp:Panel ID="qvObjektMenu" Width="75%" Height="500" runat="server" HorizontalAlign="Right">
<asp:Table runat="server" HorizontalAlign="Right">
<asp:TableRow>
<asp:TableCell>
<asp:Label runat="server">
QVObjekt Id:
</asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:Label ID="qvObjektId" runat="server"></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:Panel>
I have used a table outside this two elements, another Panel around them, nothing works.
How can I resolve this?
The answer here is CSS. There are a few options for how to do it in CSS.
Option 1: display:inline-block;
One option for that css is to use display: inline-block;:
<style type="text/css">
.inlineBlock { display: inline-block; }
</style>
Coupled with setting it in the <asp:Panel ...> tags:
<asp:Panel ID="treeviewMenu" ... CssClass="inlineBlock">
...
</asp:Panel>
<asp:Panel ID="qvObjektMenu" ... CssClass="inlineBlock">
...
</asp:Panel>
Option 2a: float:left;
Another option, as mentioned in Wim's answer is to use floats. But I do not think you want to combine both panels to have floats -- I suspect you only want one or the other. Either:
<style type="text/css">
.floatLeft { float: left; }
</style>
And
<asp:Panel ID="treeviewMenu" ... CssClass="floatLeft">
<asp:TreeView ID="treeview" runat="server" ShowLines="True" ImageSet="XPFileExplorer" >
</asp:TreeView>
</asp:Panel>
(with the other panel as it currently is in your markup)
OR
Option 2b: float:right;
<style type="text/css">
.floatRight { float: right; }
</style>
And
<asp:Panel ID="qvObjektMenu" ... CssClass="floatRight">
...
</asp:Panel>
Panels will be rendered as DIV elements so using css float:left, float:right and margin should work.