How can align items in row/column depending on condition in *ngFor.
If the input type is textarea, then it should be in the next line otherwise on the same line.
html input from json - Stackblitz Demo
what you are trying to do is rather simple, you just need to add an extra class in the div you are iterating through with *ngFor as in:
<div
*ngFor="let prop of objectProps"
[ngClass]="{ 'same-line': prop.type !== 'textarea' }"
>
Then you can use that class to set the element's display to inline-block so that it does not go in the next line as in:
.same-line {
display: inline-block;
width: 50%;
}
(note that I also needed to specify the width as that needs to be known here)
This is the result:
And I you can also see this working in the following fork of your stackblitz demo:
https://stackblitz.com/edit/typeinformationdynamic-i24na7?file=app/dynamic-form.component.ts
Related
Is it possible to to specify the modal-dialog-centered class somehow? There is an windowClass option for the outer element, but I don't see a way to specify modal-dialog-centered on the inner element.
I'm just beginning with Angular and I know it's against it's principles but only way I found to achieve centering was specifying opener function in HTML template like this:
<button (click)="openModal(myModalTemplateId)" btn btn-secondary">
and define this nasty function inside component like this:
openModal(content) {
let x = this.modalService.open(content);
// change the padding value for your case or use some other styling
x._windowCmptRef._component._elRef.nativeElement.style = 'display: block; padding-top: 30%';
// you can try to use the code bellow to set the class but it's not working for me
// x._windowCmptRef._component._elRef.nativeElement.children[0].classList.add('modal-dialog-centered');
}
In this example when the user want to edit the row or to add a new one, you can see the width of text-area(Description column) don't follow the width of the td, so I added some CSS, but no changes. So how can I make the width take the 100% of the td using CSS ?
This is the code :
<span style="width:100%" editable-textarea="user.status" e-name="" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
This is the EXAMPLE.
The span that you are adding width: 100% to actually gets hidden. What you need to do is update the CSS for the class of the span that appears that wraps the inputs. Seems to be .editable-wrap
http://jsfiddle.net/NfPcH/660/
I wonder how ExtJS makes columns hidden without any visible CSS changes!
The problem that I had - I can't set the CSS rule to hide children icon in that hidden column. F.e. if the hidden td had class 'hidden', I can use something like that:
td.hidden img {display:none;}
But in this case I can do it only in renderer with manipulating grid.columns[col].isHidden().
renderer: function(value,td,record,row,col,store,view) {
return grid.columns[col].isHidden() ? '' : someFunctionToRenderColumn();
},
It's ok, but then if I show hidden column it will not refresh grid and shows empty column. Of course I can add one more event for show/hide that column, but it is so difficult! Has it any simple way?
It gives them a width of 0px:
<colgroup>
<col class="x-grid-cell-gridcolumn-1023" style="width: 0px;">
</colgroup>
... and that should hide your img too. Except if you've given them an absolute positionning or something. You should try to position your img using float, margin and padding. Or you will have to toggle the 'hidden' class yourself using the hide and show event of the column.
You can hide columns by targeting the corresponding col element. No need to put classes on each of the individual tds.
Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/MupLH/
which has
<table>
<col><col class="invisible"><col>
...
and the CSS:
.invisible {visibility:collapse}
But you don't even need a class; you can also use col:nth-child(2) if you know the column number.
I have code that looks like this:
<h4 class="tableTotals">Total Selected: R<div id="bankTotal">##,##</div></h4>
The output that I want should all be in ONE line but as it turns out the div tags displays it's content in a new line, which I don't exactly want. So the output looks like this:
Total Selected: R
##,##
When I actually want it to display like this:
Total Selected: R##,##
Does anybody know how to stop the div displaying on a new line?
Thank for any push in the right direction!
Use <span> instead of <div>
div is a block element, and h4 is a header meant for single line.
Style your div to be displayed as inline-block
#bankTotal { display: inline-block; }
Demo
Using inline-block does not have to chang the div completely into as inline element just like span . Furthermore, you can still have block properties.
<div> is a block element and will put a return before and after the <div>
You should use instead.
<h4 class="tableTotals">Total Selected: R<span id="bankTotal">##,##</span></h4>
Using CSS:
#bankTotal{
display:inline;
}
div displaying on a new line ?
<div id="bankTotal" style="display:inline">##,##</div>
or
<div id="bankTotal" style="float:left">##,##</div>
but better :
<span id="bankTotal" >##,##</span >
display:inline property of css for displaying the div "inline",
or u could use <span> tag instead of <div> tag ..
<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>
Here I have added a style to position the DIV manually to where you want it to be. Please note that I didn't put it in its exact position so just fiddle with the margin PX.
<h4 class="tableTotals">Total Selected: R<div id="bankTotal" style="margin-left:50px;margin-top:-10px;">##,##</div></h4>
I have <select multiple="multiple">..</select> select and I also have select{heigth: 30px;} in some stylesheet that I cannot edit. Now my multiple select have 1-row heigth - "size" attribute cannot be applied. How can I solve the problem?
I like the clean solution.
select[multiple] {
height: 100px;
}
Well, first off - I'm assuming that you're using the height property, not the misspelled heigth property. There's two ways you could solve this.
The first (which I don't recommend) is by simply appending the style to the HTML element, like below:
<select multiple="multiple" style="height:100px">..</select>
Or, instead, my suggestion would be making a second style sheet, that uses the following property, including the "!important", which follows the attribute value:
select {
height: 100px !important;
}
Doing it like such will override the original style, and replace it. This isn't the only method that you can use to override it - you can read here on CSS specificity.
I think the right way should be adding a class to the specific <select> and giving it the right size, like:
<select multiple="multiple" class="multiple">
select.multiple {
height: 100px;
}