ej tile direction

Hi syncfussion, i have an issue to change the ej tile direction. I want to change the ej tile direction to upwards insteads of downwards. Below is an example of menu: 



<e-menu-item url="" text="Pengurusan Passport" image-url="../icon/passport.png" css-class="menubar1">
                <e-menu-child-items>
                    <e-menu-child-item>
                        <e-content-template>
                            <div class="e-tile-group">
                                <div class="e-tile-column">                                   
                                        <ej-tile id="passportlist" image-position="@TileImagePosition.Center" tile-size="@TileSize.Wide" text="Senarai Passport" image-url="../images/tile/windows/passport.png" mouse-down="ListPassport" css-class="tile2"></ej-tile>
                                        <ej-tile id="passportbatch" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" text="Passport Batch" image-url="../images/tile/windows/passportbatch.png" mouse-down="PassportBatch" css-class="tile2"></ej-tile>
                                        <ej-tile id="LaporanPassport" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" text="Ringkasan Laporan" image-url="../images/tile/windows/report.png" mouse-down="LaporanPassport" css-class="tile2"></ej-tile>
                                    </div>
                                </div>
                            
                        </e-content-template>
                    </e-menu-child-item>
                </e-menu-child-items>
            </e-menu-item>
            <e-menu-item url="" text="Maklumat Hadiah" image-url="../icon/gift.png" >
                <e-menu-child-items>
                    <e-menu-child-item>
                        <e-content-template>
                            <div class="e-tile-group">
                                <div class="e-tile-column">    
                                    <ej-tile id="JHGiftInfo" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" text="Pengurusan Hadiah" image-url="../images/tile/windows/manage.png" mouse-down="JHGiftInfo" css-class="tile2"></ej-tile>
                                    <ej-tile id="LaporanHadiah" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" text="Ringkasan Laporan" image-url="../images/tile/windows/report.png" mouse-down="LaporanHadiah" css-class="tile2"></ej-tile>
                                </div>
                            </div>
                        </e-content-template>
                    </e-menu-child-item>
                </e-menu-child-items>
            </e-menu-item>
            <e-menu-item url="" text="Aduan" image-url="../icon/complaints.png">
                <e-menu-child-items>
                    <e-menu-child-item>
                        <e-content-template>
                            <div class="e-tile-group">
                                <div class="e-tile-column">
                                    <ej-tile id="JHComplaintList" image-position="@TileImagePosition.Center" tile-size="@TileSize.Wide" text="Senarai Aduan Jemaah" image-url="../images/tile/windows/complaint1.png" mouse-down="JHComplaintList" css-class="tile2"></ej-tile>
                                    <ej-tile id="ComplaintOption" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" text="Senarai Pilihan Aduan Jemaah" image-url="../images/tile/windows/complaint2.png" mouse-down="ComplaintOption" css-class="tile2"></ej-tile>
                                    <ej-tile id="LaporanAduan" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" text="Ringkasan Laporan" image-url="../images/tile/windows/report.png" mouse-down="LaporanAduan" css-class="tile2"></ej-tile>
                                </div>
                            </div>
                        </e-content-template>
                    </e-menu-child-item>
                </e-menu-child-items>
            </e-menu-item>

1 Reply

KR Keerthana Rajendran Syncfusion Team October 27, 2017 09:17 AM UTC

Hi Muhammad,     
     
Query: I want to change the ej tile direction to upwards instead of downwards.     
     
Are you trying to change the text direction of Tile component? If yes, you can change the text position to top instead of bottom using position property. Refer to the following code example:     
   
  <ej-tile id="JHGiftInfo" image-position="@TileImagePosition.Center" tile-size="@TileSize.Medium" image-url="http://asp.syncfusion.com/demos/web/Content/images/Tile/games.png" mouse-down="JHGiftInfo" css-class="tile2">   
            <e-tile-caption text="Pengurusan Hadiah" position="@TileCaptionPosition.InnerTop" />   
        </ej-tile>   
   
Refer to the following sample:   
   
If this is not your requirement, kindly revert with more details for your requirement to provide an appropriate solution at the earliest.  
  
Regards,  
Keerthana.  
 


Loader.
Up arrow icon