html - Display flattened list items with count of more items that fit in a div -

-

i have few list items want display in flattened order on website. items not fit on same line, trying show count of 'how many more items' available. 8 items:

screen size 1: ============================== item1, item2, item3   +5 items ==============================  screen size 2: ==================================================== item1, item2, item3, item4, item5, item6    +2 items ====================================================

the skeleton of code have is:

<div class="col-md-10">   <span ng-repeat="item in items | canfit">     <span class="itemname">{{item}}</span>   </span> </div> <div class="col-md-2" ngshow="n>0">    <span>+{{n}} items</span> </div>

i implemented using algorithm calculate character count, font-size, padding, screen size may change in future , trying have more agnostic of changes less perf impact.

is there simpler way achieve this?

ps: using angularjs bootstrap grid show items span10:(item1, item2, item3), span2: (+5 items)

i have read questions may helps angular material child alignment

enter image description here


Comments

Post a Comment

Popular posts from this blog

How can we post XML strings along with text strings in iOS -

-
nsstring *starcardstr=@"https://starcardsindia.com/test/api/userauthentication"; //nsstring *poststr=[nsstring stringwithformat:@"https://starcardsindia.com/api/otpverification"]; // nsurl *url=[nsurl urlwithstring:poststr]; nsurl *url=[nsurl urlwithstring:starcardstr]; nsmutableurlrequest *request=[[nsmutableurlrequest alloc]init]; [request seturl:[nsurl urlwithstring:starcardstr]]; [request sethttpmethod:@"post"]; nsstring *contenttype = [nsstring stringwithformat:@"text/xml"]; [request addvalue:contenttype forhttpheaderfield: @"content-type"]; nsmutabledata *pbody=[nsmutabledata data]; [pbody appenddata:[[nsstring stringwithformat:@"<xml>"] datausingencoding:nsutf8stringencoding]]; // create post [pbody appenddata: [[nsstring stringwithformat: @"<?xml version=\"1.0\" encoding=\"utf-8\" ?>"] datausingencoding: nsutf8stringencoding]]; //[pbody appenddata:[...
Read more

How to run C# code using mono without Xamarin in Android? -

-
i want create program uses mono runtime run c# code (binary not application). i copied libmono.so unity app , i'm write code using documentation: http://www.mono-project.com/docs/advanced/embedding/ and it's working have problems references can access classes mscorlib.dll , have problems system.reflection.assembly class throwing exception, when print console see: system.missingmethodexception: method not found: 'system.reflection.assembly.op_inequality' can fix it? can use mono runtime in c binary on android? ps. i'm using android tests. edit: found solution loading libraries, need set environment variable mono_path libraries path. but have still problems assembly class. the system.missingmethodexception error have seems .net profile mismatch error, 1 explained here . can use mono runtime in c binary on android? yes, using ndk guess. there alternatives can use instead of rolling own, such xmadevlab .
Read more

c# - cefsharp app remember password option -

-
i embedding webapp using cefsharp working fine. however, when logging app, cef doesn't offer remember username , password when opening app in normal chrome. is there way in cefsharp cef ask remember usernames/password when uses go app, able sign in quicker ? i have tried using command line args e.g. cefsettings cs = new cefsettings(); cs.cefcommandlineargs.add("enable-automatic-password-saving", "enable-automatic-password-saving"); cs.cefcommandlineargs.add("enable-password-save-in-page-navigation", "enable-password-save-in-page-navigation"); cef.initialize(cs); but far, cef has not prompted me save username/password. cefsharp doesn't support remember password prompt. don't believe cef either, though it's worth asking on http://magpcss.org/ceforum/ definitive answer (there's no reference in api current version). i'll point of unless explicitly told cef use in memory cookie store, session cookies ...
Read more