I am wanting to create a layout that has 2 items side by side and each item has 3 columns. The 1st and 2nd columns are fixed width and the 3rd column needs to fill the rest of the width and grow in height as needed for text. These 2 side by side items would be a 50% split of items parent div. Something like below.
------------------------------------------- -------------------------------------------
| col1 | col2 | col 3 with copy that wraps | | col1 | col2 | col 3 with copy that wraps |
| when there is lots of text | | when there is lots of text |
| in this column | | in this column |
------------------------------------------- -------------------------------------------
or like this when parent div is smaller
-------------------------------- --------------------------------
| col1 | col2 | col 3 with copy | | col1 | col2 | col 3 with copy |
| that wraps when | | that wraps when |
| there is lots of | | there is lots of |
| text in this | | text in this |
| column | | column |
-------------------------------- --------------------------------
This is close but I really do not want to use percentage on the width of the 3rd column for the text.
https://jsfiddle.net/fractorr/htzyLupz/4/
If you use bootstrap, you can use the column division method to make the layout side by side
<div class="row">
<!-- first item -->
<div class="col-md-6">
<div class="row">
<!-- make column inside the outer column -->
<div class="col-md-3">
<!-- col1 -->
</div>
<div class="col-md-3">
<!-- col2 -->
</div>
<div class="col-md-6">
<!-- col 3 with wording -->
</div>
</div>
</div>
<!-- second item -->
<div class="col-md-6">
<div class="row">
<!-- make column inside the outer column -->
<div class="col-md-3">
<!-- col 1 -->
</div>
<div class="col-md-3">
<!-- col 2 -->
</div>
<div class="col-md-6">
<!-- col 3 with wording -->
</div>
</div>
</div>
</div>
Each row will consider as col-md-12. Plan on how you want to use the column size by adjusting the column size. 12 is max. Half is 6 and so on. Hope it help you.
Related
I have a spreadsheet which contains multiple tabs with similar layouts. I want to use a formula to merge these into a single tab which has a new column naming the tab it came from.
Example
Tab: Area A
| Item | Status |
|------|-------------|
| Foo | Blocked |
| Bar | In Progress |
Tab: Area B
| Item | Status |
|--------|-----------|
| Foobar | Completed |
Tab: Merged
| Area | Item | Status |
|------|--------|-------------|
| A | Foo | Blocked |
| A | Bar | In Progress |
| B | Foobar | Completed |
Merging without new column
I can merge the data without the additional column, using this formula:
=ARRAYFORMULA(SORT({'Area A'!A2:B; 'Area B'!A2:B}))
Which looks like this:
|--------|-------------|
| Item | Status |
|--------|-------------|
| Foo | Blocked |
| Bar | In Progress |
| Foobar | Completed |
Adding the Area column
What's missing from the above formula is the addition of the area column. This would be possible by cross-referencing the item in every tab using a vlookup and labelling it. But that wouldn't be very efficient and some updates are already slow to re-calculate in this document. I expect this to have approx. 40 tabs with 10,000 rows in total to merge.
Eg:
=IFS(NOT(ISERROR(VLOOKUP(B2,'Area A'!A$2:A,1,FALSE))), "A", NOT(ISERROR(VLOOKUP(B2,'Area B'!A$2:A,1,FALSE))), "B")
Is there a better way to do this?
I'd like something like this, but it doesn't work as the constant I'm adding doesn't match the number of rows it needs to be:
=ARRAYFORMULA(SORT({{"A",'Area A'!A2:B}; {"B", 'Area B'!A2:B}}))
you can borrow empty column and do:
=ARRAYFORMULA(SORT({{'Area A'!X2:X&"A", 'Area A'!A2:B};
{'Area B'!X2:X&"B", 'Area B'!A2:B}}))
or you can add it to first column and then split it:
=ARRAYFORMULA(QUERY(SORT({SPLIT(
{"A♦"&'Area A'!A2:A;
"B♦"&'Area B'!A2:A}, "♦"),
{'Area A'!B2:B;
'Area B'!B2:B}}), "where Col2 is not null", 0))
see: https://stackoverflow.com/a/63496191/5632629
Right now I have dynamic columns based off of a query, and then I have data attached to those columns that I want to populate in rows. They associate just fine, but the problem is that the rows hold whatever place they were in, instead of ascending to the top again, like so:
|column|column2|column3|
| row1 | | |
| | row2 | |
| | | row3 |
And the goal is:
|column|column2|column3|
| row1 | row2 | row3 |
| | | |
| | | |
I know that I could do this in the query, combining the headers with a dynamic query, but is there any SSRS magic that can achieve this without that?
EDIT 1
I am using a matrix, sorry about not specifying, I heard that the only way to do dynamic columns are matrices, so I thought it was implied.
EDIT 2
The rows come in like
Wanted_Column | Wanted Row
Column | data
Column2 | data
Column | data
and I want it so that the table will look like
|column|column2|
| data | data |
| data | |
| | |
for any number of columns/rows
I'm assuming you are using a matrix to do this. It's not clear from your question... Anyway, you'll need to add row grouping. If you don't have data that can be grouped by an actual column value then set the group expression to 1 and that should do it.
If this is not correct then please show you data as it comes from the dataset and the expected output.
Is possible more than 1 alias in ng-repeat follow example ?
ng-repeat="dt in data | limitTo: reportCtrl.rowsLimit as rows1 | limitTo: reportCtrl.tableParams.rowsLim: (reportCtrl.tableParams.currentPage - 1) * reportCtrl.tableParams.rowsLim as rows2"
Say I have the following data structure
* Key 1
* Value 1
* Value 2
* Key 2
* Value 3
* Value 4
* Value 5
How, with AngularJS, can I render it in a table similar to the following:
|-------|---------|
| Key 1 | Value 1 |
| |---------|
| | Value 2 |
|-------|---------|
| Key 2 | Value 3 |
| |---------|
| | Value 4 |
| |---------|
| | Value 5 |
|-------|---------|
The keys are done via rowspan.
Nice and tricky question!
One way to do it would be:
Given an object like this:
$scope.testData={
key1:[1,2],
key2:[3,4,5]
};
You could do this:
<table>
<tr ng-repeat-start="(key, val) in testData">
<td rowspan="{{val.length}}">{{key}}</td>
<td>{{val[0]}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in val.slice(1)">
<td>{{value}}</td>
</tr>
</table>
Example
I would like to build an html table based on a model.
I want to do something like that:
Student | competence 1 |
| subject 1 | subject 2|
| exam 1 | exam2 | average | |
xxxxx yyyyyyyyy | 10 | 20 | 15 | 45 |
And here is how I'm trying to do this:
table(ng-controller="ExaminationListCtrl")
tr
th(ng-repeat="(competence, s) in competenceToSubjectSize", colspan="{{s.length}}")
{{competence}}
tr
th(ng-repeat="subject in subjects")
{{subject.subject}}
My issue is that I can't use colspan="{{s.length}}", it seems to me that "competence" and s are only bound to the child of th elements
How could I achieve this?
I was wrong since the top tag we could access to the scope marked with the ng-repeat