Mixing
Dynamically Creating & arranging checkbox into Columns [closed]
I want to create an container which will arrange the checkbox into table columns.
Currently on below html code it is showing me following output
Following is my code:
<label class="control-label text-success">Add Applications</label>
<div class="container border">
<div class="row">
<div class="col-sm anyClass">
<div class="form-check form-check-inline text-nowrap col-md-3 pl-2" *ngFor="let name of applicationList; let srno = index" [attr.data-index]="srno">
<div *ngIf="srno == 1||srno == 4||srno == 7||srno == 10"> <span class="ml-4"></span> </div>
<div *ngIf="srno == 2||srno == 5||srno == 8||srno == 11"> <span class="ml-5"></span> </div>
<input type="checkbox" name="{{name}}" value="{{name}}">
<label class="pt-2 pl-1">{{name}}</label>
</div>
</div>
</div>
</div>
My ts is:
applicationList = [
'Application 6',
'Application 7',
'Application 8',
'Application 9',
'Application 10',
'Application 11',
'Application 12'
];
Here I have hard-coded the margin value based on the srno number in the arraylist.
I want this to be caluclated dynamically.
Please help me, thanks in advance.
javascript html angular typescript
asked Nov 19 '18 at 13:46
Chaitanya
367
closed as too broad by Pete, cнŝdk, Nic3500, blue-phoenox, Andy Jones Nov 19 '18 at 23:05
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
I want to create an container which will arrange the checkbox into table columns.
Currently on below html code it is showing me following output
Following is my code:
<label class="control-label text-success">Add Applications</label>
<div class="container border">
<div class="row">
<div class="col-sm anyClass">
<div class="form-check form-check-inline text-nowrap col-md-3 pl-2" *ngFor="let name of applicationList; let srno = index" [attr.data-index]="srno">
<div *ngIf="srno == 1||srno == 4||srno == 7||srno == 10"> <span class="ml-4"></span> </div>
<div *ngIf="srno == 2||srno == 5||srno == 8||srno == 11"> <span class="ml-5"></span> </div>
<input type="checkbox" name="{{name}}" value="{{name}}">
<label class="pt-2 pl-1">{{name}}</label>
</div>
</div>
</div>
</div>
My ts is:
applicationList = [
'Application 6',
'Application 7',
'Application 8',
'Application 9',
'Application 10',
'Application 11',
'Application 12'
];
Here I have hard-coded the margin value based on the srno number in the arraylist.
I want this to be caluclated dynamically.
Please help me, thanks in advance.
javascript html angular typescript
asked Nov 19 '18 at 13:46
Chaitanya
367
closed as too broad by Pete, cнŝdk, Nic3500, blue-phoenox, Andy Jones Nov 19 '18 at 23:05
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
1
This is more of a css problem, please show your rendered html and css for the checkboxes in a Minimal, Complete, and Verifiable example
– Pete
Nov 19 '18 at 13:55
add a comment |
I want to create an container which will arrange the checkbox into table columns.
Currently on below html code it is showing me following output
Following is my code:
<label class="control-label text-success">Add Applications</label>
<div class="container border">
<div class="row">
<div class="col-sm anyClass">
<div class="form-check form-check-inline text-nowrap col-md-3 pl-2" *ngFor="let name of applicationList; let srno = index" [attr.data-index]="srno">
<div *ngIf="srno == 1||srno == 4||srno == 7||srno == 10"> <span class="ml-4"></span> </div>
<div *ngIf="srno == 2||srno == 5||srno == 8||srno == 11"> <span class="ml-5"></span> </div>
<input type="checkbox" name="{{name}}" value="{{name}}">
<label class="pt-2 pl-1">{{name}}</label>
</div>
</div>
</div>
</div>
My ts is:
applicationList = [
'Application 6',
'Application 7',
'Application 8',
'Application 9',
'Application 10',
'Application 11',
'Application 12'
];
Here I have hard-coded the margin value based on the srno number in the arraylist.
I want this to be caluclated dynamically.
Please help me, thanks in advance.
javascript html angular typescript
asked Nov 19 '18 at 13:46
Chaitanya
367
I want to create an container which will arrange the checkbox into table columns.
Currently on below html code it is showing me following output
Following is my code:
<label class="control-label text-success">Add Applications</label>
<div class="container border">
<div class="row">
<div class="col-sm anyClass">
<div class="form-check form-check-inline text-nowrap col-md-3 pl-2" *ngFor="let name of applicationList; let srno = index" [attr.data-index]="srno">
<div *ngIf="srno == 1||srno == 4||srno == 7||srno == 10"> <span class="ml-4"></span> </div>
<div *ngIf="srno == 2||srno == 5||srno == 8||srno == 11"> <span class="ml-5"></span> </div>
<input type="checkbox" name="{{name}}" value="{{name}}">
<label class="pt-2 pl-1">{{name}}</label>
</div>
</div>
</div>
</div>
My ts is:
applicationList = [
'Application 6',
'Application 7',
'Application 8',
'Application 9',
'Application 10',
'Application 11',
'Application 12'
];
Here I have hard-coded the margin value based on the srno number in the arraylist.
I want this to be caluclated dynamically.
Please help me, thanks in advance.
javascript html angular typescript
javascript html angular typescript
asked Nov 19 '18 at 13:46
Chaitanya
367
asked Nov 19 '18 at 13:46
Chaitanya
367
asked Nov 19 '18 at 13:46
Chaitanya
367
asked Nov 19 '18 at 13:46
Chaitanya
367
asked Nov 19 '18 at 13:46
Chaitanya
367
367
closed as too broad by Pete, cнŝdk, Nic3500, blue-phoenox, Andy Jones Nov 19 '18 at 23:05
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as too broad by Pete, cнŝdk, Nic3500, blue-phoenox, Andy Jones Nov 19 '18 at 23:05
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
1
This is more of a css problem, please show your rendered html and css for the checkboxes in a Minimal, Complete, and Verifiable example
– Pete
Nov 19 '18 at 13:55
add a comment |
1
This is more of a css problem, please show your rendered html and css for the checkboxes in a Minimal, Complete, and Verifiable example
– Pete
Nov 19 '18 at 13:55
1
1
This is more of a css problem, please show your rendered html and css for the checkboxes in a Minimal, Complete, and Verifiable example
– Pete
Nov 19 '18 at 13:55
This is more of a css problem, please show your rendered html and css for the checkboxes in a Minimal, Complete, and Verifiable example
– Pete
Nov 19 '18 at 13:55
add a comment |
1 Answer
1
active
oldest
votes
You can remove the hard code and use flex to solve this.
css:
.box {
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 80px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>More about flex wrap: https://css-tricks.com/almanac/properties/f/flex-wrap/
More about flex direction: https://developer.mozilla.org/it/docs/Web/CSS/flex-direction
A complete simple guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT I realize now is not a vertical list. Here the snippet:
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 33%;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>answered Nov 19 '18 at 13:58
Jacopo Sciampi
1,410116
I have added the css but it is not adding the margin for the 2 & 3 column. As you can see in the above code I have added margin for column 2 & 3 level data.
– Chaitanya
Nov 19 '18 at 14:55
you can give a general padding (IE: 20px) on theboxclass and achieve the margin.
– Jacopo Sciampi
Nov 19 '18 at 15:03
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can remove the hard code and use flex to solve this.
css:
.box {
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 80px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>More about flex wrap: https://css-tricks.com/almanac/properties/f/flex-wrap/
More about flex direction: https://developer.mozilla.org/it/docs/Web/CSS/flex-direction
A complete simple guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT I realize now is not a vertical list. Here the snippet:
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 33%;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>answered Nov 19 '18 at 13:58
Jacopo Sciampi
1,410116
I have added the css but it is not adding the margin for the 2 & 3 column. As you can see in the above code I have added margin for column 2 & 3 level data.
– Chaitanya
Nov 19 '18 at 14:55
you can give a general padding (IE: 20px) on theboxclass and achieve the margin.
– Jacopo Sciampi
Nov 19 '18 at 15:03
add a comment |
You can remove the hard code and use flex to solve this.
css:
.box {
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 80px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>More about flex wrap: https://css-tricks.com/almanac/properties/f/flex-wrap/
More about flex direction: https://developer.mozilla.org/it/docs/Web/CSS/flex-direction
A complete simple guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT I realize now is not a vertical list. Here the snippet:
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 33%;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>answered Nov 19 '18 at 13:58
Jacopo Sciampi
1,410116
I have added the css but it is not adding the margin for the 2 & 3 column. As you can see in the above code I have added margin for column 2 & 3 level data.
– Chaitanya
Nov 19 '18 at 14:55
you can give a general padding (IE: 20px) on theboxclass and achieve the margin.
– Jacopo Sciampi
Nov 19 '18 at 15:03
add a comment |
You can remove the hard code and use flex to solve this.
css:
.box {
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 80px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>More about flex wrap: https://css-tricks.com/almanac/properties/f/flex-wrap/
More about flex direction: https://developer.mozilla.org/it/docs/Web/CSS/flex-direction
A complete simple guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT I realize now is not a vertical list. Here the snippet:
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 33%;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>answered Nov 19 '18 at 13:58
Jacopo Sciampi
1,410116
You can remove the hard code and use flex to solve this.
css:
.box {
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 80px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>More about flex wrap: https://css-tricks.com/almanac/properties/f/flex-wrap/
More about flex direction: https://developer.mozilla.org/it/docs/Web/CSS/flex-direction
A complete simple guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT I realize now is not a vertical list. Here the snippet:
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 33%;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div> .box {
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 80px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div> .box {
height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 80px;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div> .box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 33%;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div> .box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 33%;
} <div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>answered Nov 19 '18 at 13:58
Jacopo Sciampi
1,410116
answered Nov 19 '18 at 13:58
Jacopo Sciampi
1,410116
answered Nov 19 '18 at 13:58
Jacopo Sciampi
1,410116
answered Nov 19 '18 at 13:58
Jacopo Sciampi
1,410116
1,410116
I have added the css but it is not adding the margin for the 2 & 3 column. As you can see in the above code I have added margin for column 2 & 3 level data.
– Chaitanya
Nov 19 '18 at 14:55
you can give a general padding (IE: 20px) on theboxclass and achieve the margin.
– Jacopo Sciampi
Nov 19 '18 at 15:03
add a comment |
I have added the css but it is not adding the margin for the 2 & 3 column. As you can see in the above code I have added margin for column 2 & 3 level data.
– Chaitanya
Nov 19 '18 at 14:55
you can give a general padding (IE: 20px) on theboxclass and achieve the margin.
– Jacopo Sciampi
Nov 19 '18 at 15:03
I have added the css but it is not adding the margin for the 2 & 3 column. As you can see in the above code I have added margin for column 2 & 3 level data.
– Chaitanya
Nov 19 '18 at 14:55
I have added the css but it is not adding the margin for the 2 & 3 column. As you can see in the above code I have added margin for column 2 & 3 level data.
– Chaitanya
Nov 19 '18 at 14:55
you can give a general padding (IE: 20px) on the
box class and achieve the margin.– Jacopo Sciampi
Nov 19 '18 at 15:03
you can give a general padding (IE: 20px) on the
box class and achieve the margin.– Jacopo Sciampi
Nov 19 '18 at 15:03
add a comment |
1
This is more of a css problem, please show your rendered html and css for the checkboxes in a Minimal, Complete, and Verifiable example
– Pete
Nov 19 '18 at 13:55