RadImageAndTextTile

2 posts, 0 answers
  1. Chris
    Chris avatar
    7 posts
    Member since:
    Apr 2012

    Posted 22 Feb 2017 Link to this post

    Is it possible to control the layout of the title image and text on the RadImageAndTextTile?  I would like to decrease the amount of padding on the left and bottom margin for the image as well as increase the left margin between the text and the image in the title section of the tile.   As you can see in the example, I would like to move the text over to the right and the image down a few pixels and left a few pixels.

    Can the title section be templated?

    Thanks for any insight you can offer.

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5624 posts

    Posted 24 Feb 2017 Link to this post

    Hi Chris,

    You have two options:

    • use a template tile and define a layout you wish: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/tiles/contenttemplate-tile.
    • override the built-in CSS rules for the control by inspecting the rendered HTML with the browser dev toolbar. For example (tweak them further according to your needs)

      <style>
          .myCustomPositions.RadTile img.rtileTitle
          {
              bottom: 0px;
              left: 0px;
          }
       
          .myCustomPositions.RadTile .rtileTitleIndent
          {
              padding-left: 60px;
              padding-right: 60px;   
          }
      </style>
      <telerik:RadImageAndTextTile runat="server" ID="riatt1" Text="lorem ipsum dolor sit amet" Shape="Wide" CssClass="myCustomPositions">
          <Title ImageUrl="~/my-images/icon_32x32.png">
          </Title>
      </telerik:RadImageAndTextTile>

    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top