-2

I need to show all data of each column without using ellipsis .Actually my data is collapse with adjacent row .how to show all data in a row ? Actually column text will be large (don't know the length of that text it is coming from server ) But i need to show whole text.could you please tell me how to show all column text here is my code

<div id="scrollingTable" ng-if="isservicedataloadedProperly">
            <ion-scroll overflow-scroll="true"  ng-style="viewHeight">
               <div class="row brd rowclass" collection-repeat="column in tasklist_records track by $index" ng-class="{white:$index%2 == 0,grey:$index%2 == 1,firstrow:$first}" collection-item-height="40">

                  <div class="col brbrdleft_right dleft_right col-10 text-center"></div>
               </div>
               <div ng-if="!haveNorecordFound" class="norecordfoundcss"> No record found.</div>
            </ion-scroll>
         </div>

Update :

Already use css of height

/* Styles go here */

.rowclass {

  height:50%;
}

Nothing work..

Shruti
  • 1,554
  • 8
  • 29
  • 66
  • Remove the attribute: `collection-item-height="40"` which is setting inline styles. – jme11 Jul 03 '15 at 18:49
  • COULD YOU PLEASE ANSWER THIS QUESTION http://stackoverflow.com/questions/31242123/how-to-give-row-height-in-table – Shruti Jul 06 '15 at 14:21
  • Hi. The problem is in the [collectionRepeat](http://ionicframework.com/docs/api/directive/collectionRepeat/). If you scan the [codebase](http://code.ionicframework.com/nightly/js/ionic.bundle.js), you'll see it sets an inline style for the height of the element 'rows'. If you don't give it an express value with the *item-height* attribute, it tries to calculate the height. If you right-click on your source, you'll see that it's setting the row height to 36px. I don't really know a way around this, other than to set the item-height or not use the collection-repeat directive. – jme11 Jul 06 '15 at 14:47
  • @jme But I don't know the how much text it will come ..mean may be one word will come or it will be one line' or paragraph – Shruti Jul 06 '15 at 14:50
  • if you have this type of problem than what you will do ? – Shruti Jul 06 '15 at 14:52
  • if i will give height 50px than it will give height 50px to each row..it will break when text will come large – Shruti Jul 06 '15 at 14:53
  • It's a really good question. I can't think of a simple solution. I'd probably use css overflow ellipse and write a nice popover directive that you could hover on or tap for the complete text. – jme11 Jul 06 '15 at 14:56
  • I will definitely give it thought for you and give an answer if I come up with something better. – jme11 Jul 06 '15 at 14:58
  • Thanks ...Could you please help me showing this popover directive after ellipse – Shruti Jul 06 '15 at 14:58
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82507/discussion-between-shruti-and-jme11). – Shruti Jul 06 '15 at 14:59
  • please provide your thought and answer of this Question – Shruti Jul 06 '15 at 16:23
  • did you find anything ? if yes please post the answer – Shruti Jul 06 '15 at 17:17
  • @jme11 have you tried anything ? – Shruti Jul 06 '15 at 23:23
  • @jme11 is it possible to solve this Question if yes ..please post your answer – user944513 Jul 07 '15 at 03:25
  • could you please check this Question http://stackoverflow.com/questions/31265257/how-to-add-ellipsis-after-two-lines/31265548#31265548 – user944513 Jul 07 '15 at 10:10
  • @jme11 do you have any knowledge regarding this – Shruti Jul 07 '15 at 14:10

1 Answers1

1

I got the impression from your colleagues, based on previous questions/answers that mobile devices were not your primary target. I came to this conclusion because I repeatedly pointed out that Ionic was optimized for apps delivered to mobile devices and thus, the UI elements have been designed for touch, so changing the sizes of headers, buttons and other touch-targets was not advised. I further pointed out that large grids of tabular data was not conducive for display on mobile devices and produces very poor usability.

I never got an explanation as to why you were continuing with your design approach despite these points, so, I was left to assume that mobile devices are not your target. If that is correct (that you're not designing a mobile or responsive app), then here are some options:

  1. Use a table. I've recommended this previously to Pallavi. Given that your data is tabular in nature, a table makes a lot of sense. Furthermore, there are solutions like UI Grid that can offer some out of the box support for dealing with complex data sets and provides many built in features for column sorting and searching, pagination, grouping and summary rows. It's a bear to use, but depending on your requirements, it's worth knowing about (again, assuming you're not building for mobile).

  2. Do not use collection-repeat and choose ng-repeat instead. The collection-repeat directive is designed for delivering large data sets to mobile devices. The intent is to provide better performance on lower powered devices with smaller screen resolutions. As a result, collection-repeat ONLY renders the collection items that are current in view. In order to do that efficiently, the directive needs to have a consistent row height so that it can calculate the number of visible items. I tried and tested several approaches to get around this, but in the end the simple answer was the most performant: Use ng-repeat instead. You can vastly improve performance of ng-repeat with the use of one-time bindings and filters that can make up for the performance gains offered by collection-repeat.

Especially if I'm wrong about the mobile part, then you should consider that the third option is to change your UI vector entirely. It's none of my business, but I do have 25 years of experience designing and building enterprise software products, so I'd be remiss if I didn't point out that your current UI design is nothing more than a non-functional version of MS Excel. Where is the benefit for the user? How does seeing some 5000 records in a paginated grid help them to act on that data in the context of their job? Personally, I would revisit my personas (or actual user stakeholders), and ask those two questions. You might find that the best approach is to scrap everything and replace it with some other UI (such as a search interface or a list interface). I did in fact mock up two alternative approaches, but after testing, I decided that the effort and additional bindings didn't make sense in the context of a desktop application. So, again, in the context of what I understand your requirements to be I recommend the two options above.

jme11
  • 17,134
  • 2
  • 38
  • 48
  • could you please check this question http://stackoverflow.com/questions/31386381/why-http-request-not-cancelled-in-angular-js – Shruti Jul 13 '15 at 15:11