javascript - ExtJS 5 grid with grouping feature: Selected row with box shadow -

-

i'd add box shadow selected row in grid uses grouping feature. applied box shadow table element of selected row:

.x-grid-item-selected {     box-shadow: 0 0 6px 2px rgb(119, 119, 119) inset; }

unfortunately, table element of first row in group contains group header gave me result when selected first row in group:

enter image description here

also can't apply box shadow tr element of grid row (.x-grid-item-selected .x-grid-row) since chrome doesn't support box shadows on tr elements (at least not without setting display property block break layout completely).

applying box shadow each cell (.x-grid-item-selected .x-grid-cell) doesn't give me desired neither:

enter image description here

here's how i'd selected row (just sake of completeness):

enter image description here

in extjs 4 able accomplish using rowwrap feature removed extjs 5.

i'd appreciate if give me this!

here's fiddle play around with: https://fiddle.sencha.com/#fiddle/jkv

thanks & best regards

ps.: i've asked question on sencha forums

with suggestion of arthurakay commented above in mind able find suitable solution using linear-gradients instead of box shadows looks this:

.x-grid-item-selected .x-grid-cell {     background:         linear-gradient(top, rgb(119, 119, 119), transparent 6px),         linear-gradient(bottom, rgb(119, 119, 119), transparent 6px);      // browser specific prefixed versions... }  .x-grid-item-selected .x-grid-cell:first-child {     background:          linear-gradient(top, rgb(119, 119, 119), transparent 6px),         linear-gradient(bottom, rgb(119, 119, 119), transparent 6px),         linear-gradient(left, rgb(119, 119, 119), transparent 6px);      // browser specific prefixed versions... }  .x-grid-item-selected .x-grid-cell:last-child {     background:          linear-gradient(top, rgb(119, 119, 119), transparent 6px),         linear-gradient(bottom, rgb(119, 119, 119), transparent 6px),         linear-gradient(right, rgb(119, 119, 119), transparent 6px);      // browser specific prefixed versions... }

since still cumbersome, i'd appreciate more input solve in more "elegant" way.

here's working fiddle: https://fiddle.sencha.com/#fiddle/jrh

thanks & best regards


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

[C++][SFML 2.2] Strange Performance Issues - Moving Mouse Lowers CPU Usage -

-
i've been working on making 2d map editor past 2 weeks or so, , i've run strange problem. trying optimize code, example, making functions should've been functions begin with, did made cpu usage go through roof. i've tried commenting out different sections of code thought culprits (scrolling, rendering, other calculations) no avail. think issue might trying call things within different functions, sake of making modular possible, i'd functionality. the other major change i've made since file i'm comparing i've ported variables external cpp file, since having variables global makes lot easier use within different functions. simple issue, can't life of me understand why happens. with original code, around 2-3% cpu usage. new code, around 20-35%, but, if move mouse around, it'll drop around 6-8%. tl;dr: after trying optimize code using functions, i've somehow killed performance, , found strange quirk moving mouse reduces cpu usage.. /...
Read more

ios - Possible to get UIButton sizeThatFits to work? -

-
i have been using method of resizing uibuttons depreciated, , not robust. , other reasons, want sizethatfits work uibuttons. i've read online, i'm not sure if should work (seems working some, not others, difference maybe between style, i'm using custom). here simple test code recreate issue (i put in viewdidload test, shouldn't matter, , real code part of large project): uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom]; [btn settitle:@"this test long title need word wrap more single line when displayed on tiny ipod in portrait view." forstate:uicontrolstatenormal]; btn.titlelabel.linebreakmode = uilinebreakmodewordwrap; // depreciated - nothing replace it? cgrect r = btn.frame; r.origin.x = 0; r.origin.y = 0; r.size.width = 320; r.size.height = [btn.titlelabel.text sizewithfont:btn.titlelabel.font constrainedtosize:cgsizemake(r.size.width,100000) linebreakmode:btn.titlelabel.linebreakmode].height; // returns approx 86 , changes correctly ...
Read more