[CLOSED] How to increase the icon selection width

[pawangyanwali]

I have a strange problem, after I was able to configure the desktop with icons , I need two things, how to disable icon selection and how to increase the icon selection trace ( color) that comes default with ext.net

Picture attached


Desktop.cshtml

@{
    ViewBag.Title = "Desktop";
}
 
<script>
    function HideComponent(control) {
    
    for(var i = 0 ; i < control.taskbar.items.length;i++) {
       if(i < control.taskbar.items.length -1)
        control.taskbar.items.get(i).hide();
        
    }
        
    }
</script>
@(Html.X().Desktop()
    .ID("compdesktop")
    .Listeners(l => l.Ready.Handler = "HideComponent(this.desktop);")
    
    .DesktopConfig(
    (@Html.X().DesktopConfig()
         .DDShortcut(false)
        .AlignToGrid(true)
        .Wallpaper("resources/wallpapers/desk.jpg")
        .Show()
    
    )
         
    )

      .Modules(m => m.Add(
                    (@Html.X().DesktopModule()
                    .ModuleID("Module1")

                    .Shortcut(
                    (@Html.X().DesktopShortcut()
                    .Name("Application Configuration")
                        .IconCls("x-app-shortcut")
                            .TextCls("x-long-label")
                    .SortIndex(1)
                    .X("100")
                    .Y("100")

                    ))))
                )
           .Modules(m => m.Add(
                        (@Html.X().DesktopModule()
                        .ModuleID("Module2")
                       
                        
                        
                        )
                        .Shortcut(
                        (@Html.X().DesktopShortcut()
                         
                        .IconCls("right-arrow ")

                        .SortIndex(1)
                        .X("250")
                        .Y("100")
                        
                        ))))

          .Modules(m => m.Add(
                        (@Html.X().DesktopModule()
                        .ModuleID("Module1")

                        .Shortcut(
                        (@Html.X().DesktopShortcut()
                        .Name("Cycle Configuration")
                        .IconCls("x-cycle-shortcut")
                        .TextCls("x-long-label")
                        .QTip("Cycle configuration options.")
                        .SortIndex(1)
                        .X("350")
                        .Y("100")

                        ))))
                    )
    )

desktop.css

 .x-app-shortcut
{
    border: thin solid #FFFFFF;
    background-image: url(app_config.png);
    background-position: center;
    height: 150px;
    width: 150px;
    background-color: #C0C0C0;
    background-repeat: no-repeat;
    background-attachment: inherit;
    table-layout: auto;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
    word-spacing: normal;
    letter-spacing: normal;
    text-indent: inherit;
    line-height: normal;
    display: block;
    float: none;
    visibility: visible;
   
    overflow: auto;
} 
 .x-cycle-shortcut
{
    border: thin solid #FFFFFF;
    background-image: url(cycle_config.png);
    background-position: center;
    height: 150px;
    width: 150px;
    background-color: #C0C0C0;
    background-repeat: no-repeat;
    background-attachment: inherit;
    table-layout: auto;
    vertical-align: top;
    text-align: center;
    white-space: nowrap;
    word-spacing: normal;
    letter-spacing: normal;
    text-indent: inherit;
    line-height: normal;
    display: block;
    float: none;
    visibility: visible;
   
    overflow: auto;
     
} 
.right-arrow 
{
      background-image: url(right-arrow.png) !important;
       background-repeat: no-repeat;
       background-position: center;
            
       height: 150px;
    width:150px;
}
.x-bold-text .x-btn-inner{
    font-weight: bold !important;
}

.x-long-label{
    height:auto !important;
    width:150px !important;
    font-size:14px;
}

[Baidaly]

Hello!

You should override styles for shortcuts. It doesn't the best solution but while I'm looking for more appropriate solution for your problem, please use following styles:

.x-item-selected div.ux-desktop-shortcut-bg {
	width: 170px !important;
}

.x-view-over .ux-desktop-shortcut-bg {
	width: 170px !important;
}

Just substitute 170px with required size.

[Daniil]

Hi,

An icon is not an item of DataView which renders shortcuts. So, it needs to manage size of the items following down the hierarchy.

This rule helps.

div.ux-desktop-shortcut-wrap {
    height: 150px !important;
    width: 150px !important;
}

So, there is no a good possibility to set up it for some specified shortcut.

You can try what @Baidaly suggested. But I am not sure it will work well in all cases.