[CLOSED] Image will be cut off under chrome browser

  1. #1

    [CLOSED] Image will be cut off under chrome browser

    Dev. Env:
    1. Chrome: v56.0.2924.87
    2. Ext.NET 4.1.0

    Our menu page will be rendered incorrect(be cut off)
    Click image for larger version. 

Name:	2017-02-15 16_26_23-Main Menu.jpg 
Views:	76 
Size:	71.1 KB 
ID:	24862

    Which should be rendered like this.
    Click image for larger version. 

Name:	2017-02-15 16_26_36-Main Menu.jpg 
Views:	38 
Size:	97.7 KB 
ID:	24863

    cshtml codes here (main menu):
    @using Ext.Net;
    @using Ext.Net.MVC;
    @using ResMgmt.Helpers;
    @{
        Layout = "~/Views/Shared/_Layout_simple.cshtml";
        ViewBag.Title = "Main Menu";
        var X = Html.X();
    
        var p = new UserPermissions(User.Identity.Name);
    }
    
    @section ContentSection {
        @* 以下是 è*¦ç›£ç³»çµ± 相關 menu *@
        @if (p.IsResourceGranted("MenuAssetMgmt")) {
            @(
            X.Panel()
                .Frame(false)
                .Layout(LayoutType.VBox)
                .Border(false)
                .BodyStyle("background: transparent;")
                .Items(
                    X.Image()
                    .Height(100)
                    .Src(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/è*¦ç›£ç³»çµ±.png"))
                )
            )
    
            @(
            X.Panel()
                .Frame(false)
                .Border(false)
                .BodyStyle("background: transparent;")
                .BodyCls("MenuItemContainer")
                .ItemsFromPartial("Partial/MenuItemAssetMgmt", p)
            )
        }
    
    
        @* 以下是民用è¨*備管理 相關 menu *@
        @if (p.IsResourceGranted("MenuEquipBringInMgmt")) {
            @(
            X.Panel()
                .Frame(false)
                .Layout(LayoutType.VBox)
                .Border(false)
                .BodyStyle("background: transparent;")
                .Items(
                    X.Image()
                    .Height(100)
                    .Src(Url.Content("~/Images/UI_Design_v1/Icon/民用è¨*備管理/民用è¨*備管理.png"))
                )
            )
    
            @(
            X.Panel()
                .Frame(false)
                .Border(false)
                .BodyStyle("background: transparent;")
                .BodyCls("MenuItemContainer")
                .ItemsFromPartial("Partial/MenuItemCommEquip", p)
            )
        }
    
    
        @* 以下是 基本資料è¨*定 相關 menu *@
        @if (p.IsResourceGranted("MenuSettings")) {
            @(
            X.Panel()
                .Frame(false)
                .Layout(LayoutType.VBox)
                .Border(false)
                .BodyStyle("background: transparent;")
                .Items(
                    X.Image()
                    .Height(100)
                    .Src(Url.Content("~/Images/UI_Design_v1/Icon/基本資料è¨*定/基本資料è¨*定.png"))
                )
            )
    
            @(
            X.Panel()
                .Frame(false)
                .Border(false)
                .BodyStyle("background: transparent;")
                .BodyCls("MenuItemContainer")
                .ItemsFromPartial("Partial/MenuItemSettings", p)
            )
        }
    }
    sub menu items code here
    @using Ext.Net;
    @using Ext.Net.MVC;
    @using ResMgmt.Helpers;
    
    
    @{
        var X = Html.X();
        var p = Model;
    }
    
    
    @if (p.IsResourceGranted("MIPartnerTrainingMgmt")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/人員受訓資料ç¶*è*·.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/人員受訓資料ç¶*è*·on.png"))
                .Width(150)
                .ToolTip("人員受訓資料ç¶*è*·")
                .Href(Url.AbsoluteAction("MIPartnerTrainingMgmt", "Settings"))
        )
    }
    
    @if (p.IsResourceGranted("MIVRPlaceSettings")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/å*˜ç½®åœ°é»žè¨*定.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/å*˜ç½®åœ°é»žè¨*定on.png"))
                .Width(150)
                .ToolTip("營區å*˜ç½®åœ°é»žè¨*定")
                .Href(Url.AbsoluteAction("MIVRPlaceSettings", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIVREquipInstallationMgmt")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/安裝位置管理作æ¥*.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/安裝位置管理作æ¥*on.png"))
                .Width(150)
                .ToolTip("è¨*備安裝位置管理作æ¥*")
                .Href(Url.AbsoluteAction("MIVREquipInstallationMgmt", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIVRBudget")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/年度é*ç®—作æ¥*.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/年度é*ç®—作æ¥*on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£å¹´åº¦é*ç®—作æ¥*")
                .Href(Url.AbsoluteAction("MIVRBudget", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIVRMaintainDayCheckPrint")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/每日清點檢查作æ¥*.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/每日清點檢查作æ¥*on.png"))
                .Width(150)
                .ToolTip("每日清點檢查作æ¥*")
                .Href(Url.AbsoluteAction("MIVRMaintainDayCheckPrint", "AssetMgmt") + "?orgId=0")
        )
    }
    
    @*@if (p.IsResourceGranted("MIVRMaintainDayInventoryPrint")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/每日ç¶*管清點作æ¥*.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/每日ç¶*管清點作æ¥*on.png"))
                .Width(150)
                .ToolTip("每日ç¶*管清點作æ¥*")
                .Href(Url.AbsoluteAction("MIVRMaintainDayInventoryPrint", "AssetMgmt"))
        )
    }*@
    
    @*
    
        @if (p.IsResourceGranted("MIPrint_Report4")) {
            @(
                X.ImageButton()
                    .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/每å*£è‡ªæ¸…成果統計表.png"))
                    .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/每å*£è‡ªæ¸…成果統計表on.png"))
                    .Width(150)
                    .ToolTip("每å*£è‡ªæ¸…成果統計表")
                    .Href(Url.AbsoluteAction("MIPrint_Report4", "AssetMgmt"))
            )
        }
    *@
    
    @if (p.IsResourceGranted("MIVREquipQuery")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/查詢作æ¥*.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/查詢作æ¥*on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£è¨*備查詢作æ¥*")
                .Href(Url.AbsoluteAction("MIVREquipQuery", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIVREquipTransferPickup")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/接收作æ¥*.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/接收作æ¥*on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£è¨*備接收作æ¥*")
                .Href(Url.AbsoluteAction("MIVREquipTransferPickup", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIVREquipSetSetting")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/組別è¨*定.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/組別è¨*定on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£è¨*備組別è¨*定")
                .Href(Url.AbsoluteAction("MIVREquipSetSetting", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIVREquipAdd")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/新增作æ¥*.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/新增作æ¥*on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£è¨*備新增作æ¥*")
                .Href(Url.AbsoluteAction("MIVREquipAdd", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIVREquipMaintain")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/新增ç¶*ä¿®.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/新增ç¶*ä¿®on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£è¨*備新增ç¶*ä¿®")
                .Href(Url.AbsoluteAction("MIVREquipMaintain", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIPrint_Report14")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/資產管制表.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/資產管制表on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£è¨*備資產管制表")
                .Href(Url.AbsoluteAction("MIPrint_Report14", "AssetMgmt"))
        )
    }
    
    @*@if (p.IsResourceGranted("MIVREquipControlLabelPrint")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/管制標籤列印.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/管制標籤列印on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£è¨*備管制標籤列印")
                .Href(Url.AbsoluteAction("MIVREquipControlLabelPrint", "AssetMgmt"))
        )
    }*@
    
    @if (p.IsResourceGranted("MIVREquipMaintainRecordPrint")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/ç¶*修紀錄表.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/ç¶*修紀錄表on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£ç³»çµ±ç¶*修紀錄表")
                .Href(Url.AbsoluteAction("MIVREquipMaintainRecordPrint", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIVREquipMaintainRecord")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/ç¶*修管制.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/ç¶*修管制on.png"))
                .Width(150)
                .ToolTip("è*¦ç›£è¨*å‚™ç¶*修管制")
                .Href(Url.AbsoluteAction("MIVREquipMaintainRecord", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("PanelPrint_Report15")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/陸軍è*¦ç›£è¨*å‚™é*ç®—統計å*±è¡¨.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/陸軍è*¦ç›£è¨*å‚™é*ç®—統計å*±è¡¨on.png"))
                .Width(150)
                .ToolTip("陸軍è*¦ç›£è¨*å‚™é*ç®—統計å*±è¡¨")
                .Href(Url.AbsoluteAction("PanelPrint_Report15", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIPrint_Report18")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/陸軍è*¦ç›£è¨*å‚™ç¶*修數量統計.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/陸軍è*¦ç›£è¨*å‚™ç¶*修數量統計on.png"))
                .Width(150)
                .ToolTip("陸軍è*¦ç›£è¨*å‚™ç¶*修數量統計")
                .Href(Url.AbsoluteAction("MIPrint_Report18", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIPrint_Report17")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/陸軍è*¦ç›£è¨*備故障數量統計.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/陸軍è*¦ç›£è¨*備故障數量統計on.png"))
                .Width(150)
                .ToolTip("陸軍è*¦ç›£è¨*備故障數量統計")
                .Href(Url.AbsoluteAction("MIPrint_Report17", "AssetMgmt"))
        )
    }
    
    @if (p.IsResourceGranted("MIPrint_Report16")) {
        @(
            X.ImageButton()
                .ImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/陸軍è*¦ç›£è¨*備備用料件統計.png"))
                .OverImageUrl(Url.Content("~/Images/UI_Design_v1/Icon/è*¦ç›£ç³»çµ±/陸軍è*¦ç›£è¨*備備用料件統計on.png"))
                .Width(150)
                .ToolTip("陸軍è*¦ç›£è¨*備備用料件統計")
                .Href(Url.AbsoluteAction("MIPrint_Report16", "AssetMgmt"))
        )
    }

    layout cshtml
    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @{
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        <script src="@Url.Content("~/Scripts/Shared/Layout.js")" type="text/javascript"></script>
        <link href="@Url.Content("~/Content/_Layout_simple.css")" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            // initialize the chrome console logger
            if (!window.console) console = {};
            console.log = console.log || function () { };
            console.warn = console.warn || function () { };
            console.error = console.error || function () { };
            console.info = console.info || function () { };
    
            function initConfig() {
                
            };
        </script>
        @RenderSection("headtag", required: false)
        
    </head>
    <body onload="initConfig();" background='@Url.Content("~/Images/UI_Design_v1/Background/BG_listpage/BG_listpage_01.jpg")'>
        @X.ResourceManager()
        @(
            X.Viewport()
                .ItemsFromSection(this, "ContentSection")
                .AutoScroll(true)
        )
        @RenderBody()
    
        @RenderSection("scripts", required: false)
    </body>
    </html>
    controller action codes
    public ActionResult MainMenu_v2() {
                // set default ViewBag
    
                return View("MainMenu_v2");
            }
    PS. Ext.NET 4.2.0 also has this problem.
    Ted / Datacom
    Last edited by fabricio.murta; Mar 01, 2017 at 1:02 PM.
  2. #2
    Hello Ted!

    I can see you use heavily modified CSS over there, I'm afraid the problem would be there and not in Ext.NET. Couldn't you pinpoint what CSS rule is making it break in DOM Explorer of your browser?..

    Well, as for the code you provided, we can't just run that here, I see several references to files and methods, that's not available. We'd need a simplified code (maybe based on an example in Examples explorer) and that would imply no layout file for the view nor custom-css. Reproducing the issue on Ext.NET without outside interference would be required for us to be able to reproduce the issue in our side and give you the best advice on how to avoid the issue you are facing.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @u8621011!

    It's been some time since we last replied here and still no feedback from you. Do you think you can make us a test case we can reproduce your issue and effectively help you out with the problem... or maybe you solved it on your side already? Please let us know if/how we can assist you.

    If you still don't reply to this thread in 7+ days from now, we may be marking this thread as closed. But don't worry, you will still be able to post follow-ups here even after that, so take your time.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Fabricio,

    I have tried once to reduce the codes to reproduce that problem but failed. We will try again later if have time. (The same codes work better under Internet Explorer)
  5. #5
    Hello! Thanks for your feedback! We're looking forward to be able to help you with that issue!

    We will be marking this thread as closed for now then. When time comes for you to post a test case, just either post it here or create a new thread pointing (with a link, for example) to this one.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Grid filter text box disappears in Chrome browser
    By speedstepmem4 in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 27, 2015, 4:59 PM
  2. Replies: 0
    Last Post: Jul 05, 2013, 10:49 AM
  3. Replies: 8
    Last Post: Apr 03, 2013, 4:17 PM
  4. Replies: 1
    Last Post: Feb 17, 2013, 8:56 PM
  5. [CLOSED] Ext.Net 1.1 issue in Chrome Browser?
    By ryan.kim in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 08, 2011, 9:37 PM

Posting Permissions