This is a migrated thread and some comments may be shown as answers.

ImageAlign="Middle" doesn't work?

3 Answers 200 Views
BinaryImage
This is a migrated thread and some comments may be shown as answers.
Koen Coppens
Top achievements
Rank 1
Koen Coppens asked on 21 Apr 2010, 08:42 PM
Hello, I implemented the "Listview/Image Gallery"-demo and it looks great (thanks for that :-)).
But in my case the pictures can be both landscape and portrait, and i'm unable to center the images in the middle of the fieldset as you can see in the attachment. What am I doing wrong?

<h2> 
            Foto's</h2> 
        <div> 
            <asp:ScriptManager EnableViewState="false" runat="server" ID="ScriptManagerPand"/> 
            <telerik:RadAjaxLoadingPanel EnableViewState="false" runat="server" ID="RadAjaxLoadingPanelPand" MinDisplayTime="200" /> 
            <telerik:RadFormDecorator EnableViewState="false" runat="server" ID="RadFormDecoratorPand" DecoratedControls="All" Skin="Outlook"/> 
            <telerik:RadAjaxPanel EnableViewState="false" runat="server" ID="RadAjaxPanelPand" LoadingPanelID="RadAjaxLoadingPanelPand"
                <telerik:RadListView EnableViewState="false" runat="server" ID="RadListViewPand" DataSourceID="ObjectDataSourcePand" 
                    AllowPaging="true" PageSize="20" DataKeyNames="Id" OverrideDataSourceControlSorting="true"
                    <LayoutTemplate> 
                        <div id="ListPand"
                            <asp:Panel EnableViewState="false" runat="server" ID="PanelPand" Style="float: left; margin-left: 160px" 
                                Visible="<%#Container.PageCount > 1 %>"
                                <asp:Button runat="server" ID="PrevButton" CommandName="Page" CommandArgument="Prev" 
                                    Text="Vorige" Enabled="<%#Container.CurrentPageIndex > 0 %>"/> 
                                <asp:Button runat="server" ID="NextButton" CommandName="Page" CommandArgument="Next" 
                                    Text="Volgende" Enabled="<%#Container.CurrentPageIndex < Container.PageCount - 1 %>"/> 
                            </asp:Panel> 
                            <div> 
                                <telerik:RadSlider runat="server" ID="RadSliderPand" MaximumValue="3" MinimumValue="1" 
                                    Value="2" LiveDrag="false" SmallChange="1" AutoPostBack="true" OnValueChanged="RadSliderPand_ValueChanged" 
                                    Width="150px" CausesValidation="false" Skin="Outlook" /> 
                            </div> 
                            <div style="clear: both;"
                            </div> 
                            <fieldset runat="server" id="itemPlaceholder" /> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div style="clear: both;"
                            </div> 
                        </div> 
                    </LayoutTemplate> 
                    <ItemTemplate> 
                        <fieldset style="float:left; width: <%#ImageWidth.Value+4%>px; height: <%#ImageHeight.Value+4%>px; margin-bottom: 4px"
                            <telerik:RadBinaryImage EnableViewState="false" Style="cursor: pointer; background: #eeeeee; padding: 2px 2px 2px 2px;" runat="server" ID="RadBinaryImagePand" 
                                DataValue='<%#Eval("Data") %>' Height='<%#ImageHeight %>' Width='<%#ImageWidth %>' 
                                ResizeMode="Fit" ImageAlign="Middle" onclick="<%#CreateWindowScript(DirectCast(Container.DataItem, Photo)) %>" AlternateText="Klik om te vergroten" 
                                ToolTip="<%#DirectCast(Container.DataItem, Photo).ID %>" class="myClass" onmouseover="containerMouseover(this)" onmouseout="containerMouseout(this)" /> 
                        </fieldset> 
                    </ItemTemplate> 
                </telerik:RadListView> 
            </telerik:RadAjaxPanel> 
            <asp:ObjectDataSource runat="server" ID="ObjectDataSourcePand" SelectMethod="GetData" 
                TypeName="Data.DataProvider"
                <SelectParameters> 
                    <asp:Parameter Name="PandID" /> 
                </SelectParameters> 
            </asp:ObjectDataSource> 
            <telerik:RadWindowManager runat="server" ID="RadWindowManagerPand"
                <Windows> 
                    <telerik:RadWindow VisibleStatusbar="false" runat="server" ID="WindowHuurpandFoto" NavigateUrl="HuurpandFoto.aspx" 
                        Width="635px" Height="530px" AutoSize="false" Behaviors="Close,Move" ShowContentDuringLoad="false" 
                        Modal="true" ReloadOnShow="true"
                    </telerik:RadWindow> 
                </Windows> 
            </telerik:RadWindowManager> 
        </div> 

     Protected Sub RadSliderPand_ValueChanged(ByVal sender As Object, ByVal e As EventArgs) 
        Dim selectedValue As Integer = DirectCast(sender, RadSlider).Value 
 
        Select Case selectedValue 
            Case 1 
                If True Then 
                    ImageHeight = Unit.Pixel(76) 
                    ImageWidth = Unit.Pixel(76) 
                    RadListViewPand.PageSize = 20 
                    Exit Select 
                End If 
            Case 2 
                If True Then 
                    ImageHeight = Unit.Pixel(158) 
                    ImageWidth = Unit.Pixel(158) 
                    RadListViewPand.PageSize = 10 
                    Exit Select 
                End If 
            Case 3 
                If True Then 
                    ImageHeight = Unit.Pixel(287) 
                    ImageWidth = Unit.Pixel(287) 
                    RadListViewPand.PageSize = 6 
                    Exit Select 
                End If 
        End Select 
        RadListViewPand.CurrentPageIndex = 0 
        RadListViewPand.Rebind() 
    End Sub 
 
    Protected Property ImageWidth() As Unit 
        Get 
            Dim state As Object = If(ViewState("ImageWidth"), Unit.Pixel(160)) 
            Return DirectCast(state, Unit) 
        End Get 
        Private Set(ByVal value As Unit) 
            ViewState("ImageWidth") = value 
        End Set 
    End Property 
 
    Protected Property ImageHeight() As Unit 
        Get 
            Dim state As Object = If(ViewState("ImageHeight"), Unit.Pixel(160)) 
            Return DirectCast(state, Unit) 
        End Get 
        Private Set(ByVal value As Unit) 
            ViewState("ImageHeight") = value 
        End Set 
    End Property 

Thanks!

3 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 23 Apr 2010, 03:07 PM
Hello Koen,

Can you please set text-align:center; to the parent fieldset and see if this helps.

Best wishes,
Rosen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Koen Coppens
Top achievements
Rank 1
answered on 23 Apr 2010, 03:23 PM
Thanks, that helped. Any idea how I can center the landscape pictures? Vertical-align doesn't seem to work...

Greets,
Koen
0
Rosen
Telerik team
answered on 23 Apr 2010, 03:45 PM
Hi Koen,

In order to align the image vertical you should set line-height to the fieldset, set vertical-align:middle; to the image and add a &nbsp; after the image. For example:

<fieldset style="width: 200px; height: 200px; text-align: center; line-height: 200px;">
    <telerik:RadBinaryImage runat="server" Style="vertical-align: middle;" Height="100px"
        Width="120px" />&nbsp;
</fieldset>

Also you may check this article on the different ways of how to apply vertical alignment in general.

Kind regards,
Rosen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
BinaryImage
Asked by
Koen Coppens
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Koen Coppens
Top achievements
Rank 1
Share this question
or