ImageAlign="Middle" doesn't work?

4 posts, 0 answers
  1. Koen Coppens
    Koen Coppens avatar
    2 posts
    Member since:
    Apr 2010

    Posted 21 Apr 2010 Link to this post

    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!

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 23 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Koen Coppens
    Koen Coppens avatar
    2 posts
    Member since:
    Apr 2010

    Posted 23 Apr 2010 Link to this post

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

    Greets,
    Koen
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 23 Apr 2010 Link to this post

    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.
Back to Top