I have following, a view in angular with a map and then, right below it, a list of superregions which I am getting from a controller repeating across the view. At this time, the superRegions are in two columns, which I want. However, you can see from the following picture that there is inconsistent padding in between them, which I definitely don't want. I've tried everything but cannot seem to mitigate the spacing. It's not a problem on the right column but on the left column it definitely is.
<div class="modal-ui-view" ui-view="regionManagementModalView" ></div>
<div class="region-listing-info" id="region-listing-info">
<div class="row">
<div class="portlet col-md-6">
//The map directive
</div>
<div class="portlet col-xs-6 col-md-6" ng-repeat="superRegion in superRegionCollection">
//a list of superRegions with styling
</div>
</div>
</div>
It's driving me crazy and I must have tried eleven solutions. How can I keep consisting vertical spacing on the left column like the right column has?
Related
I'm creating excel-like table using react.
And there have some essential features.
Support update feature for the cells including child row's cells.
If head row's data can represents all of it's children's data and itself, it's cell will be merged into single cell and show in single cell.
Support row expanding feature :: When user click row, it expand and show it's children's data which has same columns with parent. (Like each row represents some aggregation of data, and with clicking row, user can see sub-data.
Should guarantee proper performance for more than 30000 rows with 100 columns including images.
Should support filter & sort & search & hide column(s).
Should provide data at single page (It means it need to be infinite-scroll, not pagenation)
Should have sticky table header
Should user can fix some of columns to left side for providing easier way to see data with horizontal scrolling.
I succeed on 1,2,3,4,5,6,7 (Most of them) by react-virtualized. But it become a problem when regarding '8'-Fixing column.
I checked internet and found that react-virtualized is the only way to archive it.
Basic idea of this is quite simple. I use List for rendering each row by user's scrolling(Virtualization), AutoSizer and CellMeasurer(Cache) for implementing dynamic height rows(Expanding rows). And least of codes for implementing TableHeader and cell updating, sort, filter features.
But it became a problem when I need to implement column fix. react-virtualized seems it dose not allow customization for it's feature (Seems really static for their functionalities.)
At first, I considered create two table and position it horizontally so that left table act like fixed column, right table is horizontally scrollable by sharing CellMeasurerCache for dynamic height row. But I found this article https://stackoverflow.com/questions/45682063/react-virtualized-share-cellmeasurercache-for-multiple-grids which says that CellMeasurerCache is not sharable by more than one List.
Also I considered that using other components react-virtualized support. But there are Pros and Cons for each components and I need to give up one of above requirements.
Can you provide me a idea for implementing all above requirements?
I want to share my code but it is quite big (About more than 1000lines for single table -- abstract table which is not hard coded for single purpose) If you want to see, I'll send you in anyway.
But I can provide basic HTML markups -- which is 8 is not implemented. and proven to be usable disregarding some bugs and errors.
This is not real HTML, I omit some of markups.
(All data is not calculated at table, all of them are fetched from other servers.)
<div class="table">
<!--Head part-->
<div class="headers">
<div class="header" style="display: sticky; top: 0">
<div class="upper">Name</div>
<div class="bottom">
<button class="sort" style="background-image: url(sort_asc.png)"></button>
<button class="filter" style="background-image: url(btn_filter.png)"></button>
</div>
</div>
<div class="header" style="display: sticky; top: 0">
<div class="upper">Price</div>
<div class="bottom">
<button class="sort" style="background-image: url(sort_asc.png)"></button>
<button class="filter" style="background-image: url(btn_filter.png)"></button>
</div>
</div>
<div class="header" style="display: sticky; top: 0">
<div class="upper">Gross</div>
<div class="bottom">
<button class="sort" style="background-image: url(sort_asc.png)"></button>
<button class="filter" style="background-image: url(btn_filter.png)"></button>
</div>
</div>
</div>
<!--Content part-->
<div class="row"/> <!-- This is expanded row -->
<div class="column" style="display:flex;flex-direction:column; height:120px;"/>
<div class="headCell" style="height:120px">ChicagoCompany</div> <!-- This is merged cell -->
<div>
<div class="column" style="display:flex;flex-direction:column; height:120px;"/>
<div class="headCell" style="height:40px">215</div> <!-- Display average value of child -->
<div class="cell" style="height:40px">230</div>
<div class="cell" style="height:40px">200</div>
<div>
<div class="column" style="display:flex;flex-direction:column; height:120px;"/>
<div class="headCell"style="height:120px">440</div> <!-- This is merged cell -->
<div>
</div>
<div class="row"/> <!-- This is not expanded row -->
<div class="column" style="display:flex;flex-direction:columnheight:40px"/>
<div class="headCell"style="height:40px">Seattle Corp</div> <!-- This is merged cell -->
<div>
<div class="column" style="display:flex;flex-direction:columnheight:40px"/>
<div class="headCell"style="height:40px">130</div> <!-- Display average value of child -->
<div>
<div class="column" style="display:flex;flex-direction:columnheight:40px"/>
<div class="headCell"style="height:40px">440</div> <!-- This is merged cell -->
<div>
</div>
</div>
What I considered above about append two table horizontally is like above
<div class="tableSet"><div class="fixedTable">...</div><div class="flexibleTable">...</div></div>
(Put two "table" together horizontally)
I tried to set sticky to all class <column>, but it dose not work as I expected. (It is not the same-level properties as you know.)
I think I can bypass restriction on CellMeaurerCache so that it can be shared in both table. But I have no idea for that. Can you give me a advice?
Is there any way to bypass restriction and implement all requirements? Or Is there any library or component or way to achieve it's goal even if it need to be re-build from the scratch?
Yes. It looks like that I want to Excel on webpage.
I cannot see the issue in my html, but i can get the show/hide to work properly for a portion but not for another portion. It is the same ng-model. I am checking to see if feedback exists, if it does show one area, hide another. It is only working for the checklist. The checklist show and hides properly, but the message needs to display if the checklist is hidden. I know this is really simple, but no idea why it won't showing/hiding but i think it boils down to using feedback.length more then once. Can I do that? I have tried ng-if="feedback.length>0" and also ng-show="feedback.length>0" inside of the div for myMessage. The checklist is the only one that hides.
<div class="col-md-3" id="myMessage" ng-if="feedback.length>0">
<div class="alert alert-success">You have already submitted feedback for this user.</div>
</div>
<div class="col-md-3" id="checkList" ng-if="feedback.length==0">
<div class="row">
<div class="panel panel-default questionHolder2">
<div class="panel-heading"><strong>Thesis</strong></div>
<div class="panel-body">
1. After reading, but looking back at the paper now, can you summarize or paraphrase the author's argument or main point that s/he is trying to convey to the reader?
</div>
</div>
</div>
</div>
I'm using Foundation for our website and there's a section where there are 3 boxes / columns per row. As in:
CODE:
<div class="row">
<div class="large-4 columns">[BOX]</div>
<div class="large-4 columns">[BOX]</div>
<div class="large-4 columns">[BOX]</div>
</div>
Now when the browser is resized to about 1023px, each column suddenly changes to full width, as in:
..even though there is still some space on the right to go 2-columns first.
How do I make it so that Foundation goes to 2-columns first at a certain media query size before going full-width?
For people that may find this helpful:
<div class="row small-up-1 medium-up-2 large-up-3">
<div class="columns">
</div>
</div>
Large-up-3 means on large screen, the columns would be 3,
Medium-up-2 means on medium screen, the columns would be 2,
Small-up-1 means on small screen, the column would be 1 only.
You can change the numbers as per how many columns you want displayed.
(Foundation 5 has this update.)
I'm trying to get UI sortable with connected lists to play nice. Basically, I want to keep the functionality of two connected lists but I'd like the list on the right side to have two sections:
"First Place" only holds the very first tab and "Everything Else" holds the rest of the tabs. Basically, I want to just add two labels in there to separate things visually.
The user should be able to sort things vertically as if the labels weren't there and move tabs between the two lists.
This pen should demonstrate what I'm trying to do.
You'll notice that I can't really insert markup into
<div class="app" ng-repeat="app in list2">{{$index}} {{app.title}}</div>
as I only want the labels to appear one time...
Any ideas?
Using $first and $index:
<div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list2">
<div ng-repeat="app in list2">
<div ng-if="$first">First Place</div>
<div ng-if="$index == 1">Everything Else</div>
<div class="app">{{$index}} {{app.title}}</div>
</div>
</div>
So i have an array of slide image urls which i'm looping through here called slides.
<div class="presentForm" id="presentForm{{$index}}" ng:repeat="slide in slides" style="display: none;">
<img id ="presentationSlide" ng-src='{{slide}}' style="height: 300px" width="600px">
<label id="scriptLabel{{$index}}" for="slideScript{{$index}}" style="left:130px;">
Slide {{$index + 1}} Script
</label>
<textarea class="scriptText" name="Text" id="slideScript{{$index}}" ng-model="scripts{{index}}">
</textarea>
</div>
My problem arrises from the fact that I want to display a seconday array within this ng-repeat called scripts. The problem arises from the fact that scripts length might not match slides length (every slide might not have a script). So how could I display scripts[0] within the <textarea></textarea> but if scripts[3] doesn't exist display a blank text area?
This isn't a very thorough answer, but nested ng-repeat's should solve your problem. Let me know if I'm missing something.
EDIT: After re-reading your code. I think you might also need to rethink your data structure. scripts should be inside the slide object.
e.g.
slide = {name: 'slide1', scripts: ['script1', 'script2']}