Develop Reference

ASP.NET WebForms: Image Sizemode in Repeater Control - c#

Is it possible to display pictures with a non-square aspect ratio in a repeater control element?
I load images from a datatable with paths as strings.
But all images are stretched to 450px x 450px.
Code:
<div style="width: 500px; height: 500px; overflow: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
<Columns>
<asp:TemplateField HeaderText="IMS-Bilder">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Bild-Pfad")%>'
Width="450px" Height="450px" Style="cursor: pointer" ImageAlign="Middle" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
I miss the SizeMode property of WinForms :/
Maybe someone has a hint for me :)

In web forms, you'll probably want to handle image display with CSS. As you've seen, width and height properties will just force a specific value. There is also a property called ImageAlign, but I'm not sure how much that helps you. Otherwise its up to CSS pretty much.

CSS was the right keyword :)
I was able to fix the problem with my own css class:
.myImage {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
height: 75%;
cursor: pointer;
}
and remove the (forced) height and width of the image/imagebutton:
<div style="width: 1000px; height: 1000px; overflow: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
<Columns>
<asp:TemplateField HeaderText="IMS-Bilder">
<ItemTemplate>
<asp:Image CssClass="myImage" ID="Image1" runat="server" ImageUrl='<%# Eval("Bild-Pfad")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
Final look of the loaded pictures:
Thank you, #erastl :)

Related

I am embedding a gridview inside of a panel like this, which works as it should, but I sometimes return a great deal of information and would like to be able to add a horizontal scroll bar to the top as well, can someone assist??
<asp:Panel ID="panel1" runat="server" ScrollBars="Both" style="overflow:scroll">
<asp:GridView ID="grid1" runat="server" Visible="True" AutoGenerateColumns="false"
ShowFooter="true" Width="16px" Height="120px" >/>
<columns>
</columns>
</asp:GridView>
</asp:Panel>
EDIT
I am trying to use the option from the link you provided below, but my grid width is way to small. I think I have it set properly in the syntax tho?
<div class="wrapper1">
<div class="wrapper2">
<asp:GridView ID="grid1" runat="server" Visible="True" AutoGenerateColumns="false"
ShowFooter="true" Width="10000pxpx" Height="3000px" >/>
<columns>
</columns>
</asp:GridView>
</div>
</div>
<style type="text/css">
.wrapper1, .wrapper2{width: 300px; border: none 0px RED; overflow-x: scroll; overflow-y:hidden;}
.wrapper1{height: 200px; }
.wrapper2{height: 200px; }
.div1 {width:10000px; height: 200px; }
.div2 {width:10000px; height: 200px; background-color: #88FF88; overflow: auto;}
</style>
Also, adding in the extra <div> tag throws the grid further down on the page than what I need it to be.

You can try removing your panel and go with a div instead.
<div style="overflow-x:auto;width:800px">
GridView here
</div>
overflow-x:auto will produce a horizontal scrollbar only if the GridView's width is greater than 800px.

WebSiteVideo.aspx
<asp:DataList ID="DataList1" Visible="true" runat="server" AutoGenerateColumns="false" RepeatColumns="1" CellSpacing="15">
<ItemTemplate>
<a class="player" style="height: 100px; width: 120px; display: block" href='<%# Eval("Id", "File.ashx?Id={0}") %>'>
</a>
<u>
<%# Eval("Name") %>
</u>
</ItemTemplate>
</asp:DataList>
when i am clicking the video it should be Enlarge, According to this coding what have to do? Any solution?

You have to probably call some kind of function through client side which will zoom your video.
Check this JQuery Show Large Image Preview When Hover On Link In Asp.Net

I have a very long string in database(MS SQL) table such as
'99024','99050','99070','99143','99173','99191','99201','99202','99203','99204','99211','99212','99213','99214','99215','99217','99218','99219','99221','99222','99231','99232','99238','99239','99356','99357','99371','99374','99381','99382','99383','99384','99385','99386','99391','99392'
Right now it displays as in a datagridview of a windows form application.
What I expected is likely as (ignore the headtext, it doesn't matter).
Which means to split a long string to many short strings. Each string occupies one line.
Originally it was well done in asp.net gridview by the following code:
<ItemTemplate>
<div style="width: 75px; overflow: hidden; white-space: nowrap; word-wrap: break-word;">
<asp:TextBox ID="TextBox1" runat="server" Wrap="true" TextMode="MultiLine" Text='<%# Eval("ICD9").ToString().Replace(",", Environment.NewLine.ToString())%>'
Rows='<%# Eval("test").ToString().Split(new string[] { "," }, StringSplitOptions.None).Length %>'
</asp:TextBox>
</div>
</ItemTemplate>
<EditItemTemplate>
<div style="width: 75px; overflow: hidden; white-space: nowrap; word-wrap: break-word;">
<asp:TextBox ID="TextBox2" runat="server" Wrap="true" TextMode="MultiLine" Text='<%# Eval("ICD9").ToString().Replace(",", Environment.NewLine.ToString())%>
'>
</asp:TextBox>
</div>
</EditItemTemplate>
Now I want to use it in windows form DataGridView, I don't know how to edit the column to customize the item. But I just thought that they could be similar.
Thanks for help.

In windows application, first of all you need to do is changing the DataGridView RowStyle so it can be auto sized based on your content
dataGridView1.AutoSizeRowsMode = DataGridViewAutoSizeRowsMode.Fill;
dataGridView1.RowsDefaultCellStyle.WrapMode = DataGridViewTriState.True;
then replace the comma by newline
Eval("test").ToString().Replace(",", System.Environment.NewLine);

I am using two listviews to display two tag clouds (a red one and a green one). When the tag gets quite big, it overlaps the smaller ones. Is there a way to space out the tags, i.e vertical padding or something?
<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView1" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("Tag") %>
</ItemTemplate>
<EmptyDataTemplate>
<asp:Label ID="negative_tags" runat="server" Text=""></asp:Label>
</EmptyDataTemplate>
</asp:listview>
</div>
<br />
<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView2" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("Tag") %>
</ItemTemplate>
<EmptyDataTemplate>
<asp:Label ID="positive_tags" runat="server" Text=""></asp:Label>
</EmptyDataTemplate>
</asp:listview>
</div>

Yes,
on your <a> tags you can add:
line-height: 30px
or alternativelly you can add
padding-top:5px; padding-bottom:5px

I want the arrow-collapsed image to be displyed before accordian headers and when accordian header is clicked and expanded, arrow-collapsed image should change to arrow-expanded image. What am I doing wrong below? Also, image paths are all correct. I have checked many times.
my accordian:-
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
css
Am I giving the CSS Class names incorrectly or what ????
#denis..its still not displaying the images..cant find the images in Firebug either

Firstly, I would suggest to take a look at Accordion sample page which lists all available properties along with their descriptions. You'll notice that the Accordion also exposes HeaderSelectedCssClass property - this is where you set a style for the collapsed state. So, you could re-write your markup like so:
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler"
HeaderSelectedCssClass="accordionHeader toggler-expanded"
ContentCssClass="accordionContent">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
And for CSS:
<style type="text/css">
.accordionHeader {
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}
.toggler {
background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
}
.toggler-expanded {
background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
}
.accordionContent {
margin-top: 10px;
margin-left: 20px;
}
</style>
And please remove all those scripts.