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/
Related
I'm wondering, how to give ngx-gallery (https://github.com/MurhafSousli/ngx-gallery) a new height. It has a fixed value of 500px and changing the parent divs height is not changing anything.
I was looking either for some attribute in the template like this
<gallery
[height] = '250px'>
</gallery>
Stackblitz: https://stackblitz.com/edit/angular-osh1vu
Followup-question: In the Stackblitz, the behaviour is fit-height (regarding the black background) and in my application it is fit-width, so the black stripes are above and under the image. How can i change this too?
(which was possible on older? version , but is no more a valid attribute)
or
some css code (looking in the dev tools, the sliding images are labeled div.g-template.g-item-template), which is also not possible to overwrite:
div.g-template.g-item-template {
height: 200px !important;
}
Demo add class to galery element
<div class="basic-container">
<h2>Gallery component</h2>
<gallery class="custom"
[items]="items"
[dots]=true
[thumb]=false
[loop]=false
[playerInterval] = 5000
[autoPlay]=true
[loadingStrategy]=preload>
</gallery>
</div>
in css change
.custom{
height:200px;
}
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
I have a datatable with primefaces:
<p:dataTable var="wapsoplandtl" id="wapsoplandtlList" widgetVar="wapsoplandtlList" value="#{exportController.wapsoplandtls}"
paginator="true" rows="50" scrollable="true" scrollWidth="2500px;" styleClass="borderless"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" paginatorPosition="bottom"
rowsPerPageTemplate="10,25,50" rowKey="#{wapsoplandtl.dtlsys}">
and produce something like this:
As you can see, it has scrollwidth attribute, but the header got scrolled to the far right. I want only scroll the content of datatable, not the header and footer (paging). Can anyone help me?
This can be done by CSS only, forget about the scrollable attribute of the <p:datatable> component, apparently it will always overflow the whole table, and not just the content.
In this case, do the following:
Remove the scrollable and scrollWidth attribute from your <p:datatable> component;
Include another CSS class (any name, but keep this name to be used later, in this case I will use the name 'overflow-content') in the styleClass attribute from <p:datatable>;
Include the following CSS rule in your page:
-
.overflow-content .ui-datatable-tablewrapper table {
overflow: auto;
width: 2500px;
}
The result will be something like this:
For this you need to first add the option scrollX: true and should add css to table width:100% inline.
$('#example').dataTable( {
"scrollX": true
} );
and you are done.
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>