I am learning angular n making a project. display table
I have this above page in which I want to separate the records by type. however I am not able to get the condition right. Can someone help me. Below is my code.
<div class="row">
<div class="col">
<h3>Escalations</h3>
</div>
</div>
<div ng-if="notes.values === 'Escalations' ">
<app-list-view
[data]="notes.values"
[cols]="notes.cols"
[routeInfo]="notes.routeInfo"
[sortBy]="'isActive'">
</app-list-view>
</div>
Related
Hi i need to wrap an array like this [TASK 1, TASK 2, TASK 3].
In HTML i want to display it like that TASK 1, TASK 2... and then with a tooltip the user can see the rest of the tasks.
I need that because i have little space in the col.
The piece of HTML is structured like that
EDIT:
<div class="col-2 border-right-yellow fw-bold">
<div class="row body-cells flex-center">
<div class="col-8">
<div class="row">
<div class="col">{{resource.resourcePlanDTO.cognome}}</div>
<div class="col">{{resource.resourcePlanDTO.nome}}</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col">
{{getTasks(resource)}}
</div>
</div>
</div>
</div>
</div>
getTasks is the method i use to take the string array from the back-end
I tried to use some flexbox classes but it didn't work :(
Now the array is displayed like you can see in the image in the column No.Task
Anyone can help? :)
My Problem
I am new to Bootstrap. My boss wants me to replicate the following screen ( or as close as possible ):
Desired Layout
I have tried to do this myself using:
<div class = "row">
and
<div class = "col-lg-x">
... but I can't get the rows and columns right! So frustrating. I have tried and tried and tried.
Does anyone have any ideas how I would replicate the following layout easily?
Thank you so much for looking at my problem.
Regards,
John
Not sure if it's the way that you have put your code on to SO however it should look something like this
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-12 col-sm-12">
12
<div class="row">
<div class-"col-sm-4">
4
</div>
<div class="col-sm-8">
8
</div>
</div>
</div>
Edit: You may also wish to take a look at nesting to help you achieve this https://getbootstrap.com/docs/4.0/layout/grid/
I have below an HTML code which utilizes ng-repeat to show data. The data is separated to two columns, and each column will have more or less the same number of data (shown through links).
However, to do this, I traversed through the same set of data twice, with two different ng-repeat conditions (with the first traversal showing the first set of data in the first column, and the second traversal showing the second set of data in the second column).
I believe this is really redundant (and time consuming, too), because for the first traversal, I get the first half of the data then skip the rest (by ng-if), and for the second traversal, I get the second half.
Is there a way to traverse through the data just once, but still being able to show the division of data?
Note: I've tried putting ng-repeat before the first < div class="column" >, and keep the conditionals inside < a >, but what happens is that even the < div class="column" > repeats, which shouldn't be the case. I just want the < a > tags to repeat in their corresponding columns.
Code
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies" ng-if="$index <= (agencies.length/2)">
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies" ng-if="$index > (agencies.length/2)">
{{agency.name}}<br>
</div>
</h5>
</div>
</div>
My improvement is to use 'limitTo' pipe, instead of ng-if.
Look at this version, it's more efficient.
{{agFull = agencies.length; ""}}
{{agHalf = agFull/2; ""}}
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies | limitTo : agHalf">
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies | limitTo : agFull : agHalf">
{{agency.name}}<br>
</div>
</h5>
</div>
</div>
I would also recommend to store agencies.length & agencies.length/2 in a variable, as I did above. You can also use the controller for that, if you don't like template variables.
Since you are looking to optimize, i suggest that you split your array in to two in the controller. This will remove the redundancy. Don't let your view to the the controller's work.
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies[0]" >
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies[1]">
{{agency.name}}<br>
</div>
</h5>
</div>
I have the following simplified markup:
<div class="row">
<div class="col-lg-3" ng-if="isSuperUser()">
Conditional column 1
</div>
<div class="col-lg-3">
Column 2
</div>
<div class="col-lg-6">
Column 3
</div>
</div>
I want Column 3 to take up the last 6 grid columns always. I also want the contents of Column 1 or Column 2 if not a super user to take up the first 3 grid columns depending.
The problem is when the Column 1 is not displayed, Column 2 and Column 3 shift to the left such that Column 3 is no longer on the right side. A solution that seems hacky is to add a <div class="col-lg-3" ng-if="!isSuperUser()"> before Column 3, but it seems like there may be a better solution.
I can't see anything in Bootstrap's documentation that demonstrates this functionality. I see there is push and pull classes, but they don't seem to be what I'm looking for.
Thanks in advance.
JSBIN
you can try nest row into the .col-xs-*. That's mean you could use the out row to fixed position before you want hidden something.
<div class="container">
<div class="row">
<div class="col-xs-6">col 6
<div class="row">
<div class="col-xs-2">
2
</div>
<div class="col-xs-10">
10
</div>
</div>
</div>
<div class="col-xs-6">col 6
<div class="row">
<div class="col-xs-12">
your purpose
</div>
</div>
</div>
</div>
</div>
You are looking to offset columns in Bootstrap. Conditionally add the class .col-lg-offset-3 to the second column.
I started to use Twitter bootstrap for this application that I am working on.
I read the documentation about nesting rows in both fixed grid system and in fluid one.
Now, I want to do something like this
So of course I could do something like this
<div class="container">
<div class="row">
<div class="span 12">red</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
</div>
and I think I would get what I want. But I am wondering what are the consequences of doing
<div class="container">
<div class="row">
<div class="span 12">red</div>
</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single container tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?
The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better
However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"
Also remove the spaces between the spans and numbers
class="span 3"
Should say
class="span3"