ImageAlign="Middle" doesn't work?

[Koen Coppens]

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!

[Rosen]

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.

[Koen Coppens]

Thanks, that helped. Any idea how I can center the landscape pictures? Vertical-align doesn't seem to work...

Greets,
Koen

[Rosen]

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   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.