Control header label position in Angular 8 - angular7

I am creating datatable in Angular 8. I am trying to display 'Column A' heading aligned left and 'Column B' heading aligned right. Trying out many solutions and nothing is working. The CSS class applied to header label is 'datatable-header-cell' Please help me to align these labels correctly. I drew small sample in Paint to show what I am trying to do. Thanks in advance.
<ngx-datatable #myTable class="material skf-table" [rows]="rows" [columns]="columns" [columnMode]="'force'"
[scrollbarH]="true" [headerHeight]="'50'" [loadingIndicator]="isLoading" [footerHeight]="'50'" [rowHeight]="'50'">
<ngx-datatable-column *ngFor="let column of columns; let i = index" name="{{ column.name }}"
prop="{{ column.prop }}" frozenLeft="{{ column.frozenLeft }}">
<ng-template let-value="value" let-row="row" let-name="name" ngx-datatable-cell-template>
<ng-container ngSwitch="{{ column.prop }}">
<ng-container *ngSwitchCase="'Column A'">
<span [style.color]="value > 0?'green':'red'" [style.text-align]="right"
style="float: right;">{{ numberWithCommas(value.toFixed(0)) }}</span>
</ng-container>
<ng-container *ngSwitchCase="'Column B'">
<span [style.color]="value > 0?'green':'red'" [style.text-align]="right"
style="float: right;">{{ numberWithCommas(value.toFixed(0)) }}</span>
</ng-container>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>

After some research I added following code to css file and that fixed the issue for me.
::ng-deep .datatable-header-cell:nth-child(1) {
text-align: left !important;
}
::ng-deep .datatable-header-cell {
text-align: right !important;
}

Related

How to align text in a same paragraph in left and right in primevue InlineMessage

I want to align 2 texts left and right using bootstrap. I have used primevue component InlineMessage.
<InlineMessage severity="error" class="my-4 block align-items-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>
Can someone help me?
I tried to use text-align, align-items but it seems like not applying?
In primevue <InlineMessage> component has an embedded icon. in that case, if you going to use class = "justify-content-between" it will be not worked as you expected.
But you will be able to do it...
<InlineMessage severity="success" class="block py-5 my-4">
<div class="" style="float:left">Total Requests</div>
<div class="" style="float:right">10</div>
</InlineMessage>
And also parent element width should be 100%.
I assume you want to align one text to the left, and the span to the right?
First, you need to change the block class to flex so that you can use flexbox.
Then you need to use the justify-content utility. You can do this with the class justify-content-between.
If you don't see the changes, just add the class w-100 so that the <InlineMessage> element takes up 100% of the available width.
Your code would look like this:
<InlineMessage severity="error" class="my-4 flex justify-content-between w-100">Error Request Percentage <span style="margin-left: auto" > 10%</span> </InlineMessage>
Bootstrap has no .block css definition, you can add it yourself, for example:
.block { display: flex; }
And append to your inline class justify-content-center to center it.
If you wish to use block then define .block { display: block; } and append class text-center to center the text.
Otherwise your inline is just long as the text inside of it, and it will never align it
.block { display: flex; }
.block2 { display: block; }
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<InlineMessage severity="error" class="my-4 block align-items-center justify-content-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>
<InlineMessage severity="error" class="my-4 block2 text-center">Error Request Percentage <span class="" > 10%</span> </InlineMessage>
If I understood correctly you wish to align differently inside of inline element, then you can use something like this:
.block { display: flex; }
.block > span { flex: 1; text-align: right; }
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<InlineMessage severity="error" class="my-4 block align-items-center justify-content-left">Error Request Percentage <span class="" > 10%</span> </InlineMessage>

Flexlayout make material button bigger in height

I have the following html but this is making the button grow bigger in size. How to make the button not grow in height ?
<div fxLayout="row">
<h5>User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
Solution with fxLayoutAlign directive
The simplest way is to use the fxLayoutAlign directive on your div element as shown below.
<div fxLayout="row" fxLayoutAlign="center center">
...
</div>
Solution with CSS
The problem in your HTML template is that the h5 element is the tallest element and that all other elements in the row are laid out with same height. One possible solution is to remove the top and bottom margins from the h5 element using CSS.
h5 {
margin-top: 0;
margin-bottom: 0;
}
In case you have other h5 elements on the same page that must not be altered, you need to define a specific CSS class for the h5 element that appears in the flex row (it could be named "h5-inline").
.h5-inline {
margin-top: 0;
margin-bottom: 0;
}
The HTML template would then look like this.
<div fxLayout="row">
<h5 class="h5-inline">User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>

Decrease height of mat-button-toggle to match buttons

I got an Angular Flex-Layout row which contains some buttons and a mat-button-toggle-group. Unfortunately, the mat-button-toggle-group is somewhat bigger than the buttons and I would like to have them all on the same height / line-height.
This is hot it looks currently:
Tried to meddle with the css classes of mat-button-toggle-group and others, but only got to so far as to reduce the button height while the content stayed the same.
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<div>
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<div class="control-buttons">
<button
mat-stroked-button
>
<i class="material-icons">skip_previous</i>
</button>
( more buttons )
</div>
</div>
<div>
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<mat-button-toggle-group multiple>
<mat-button-toggle
value="random"
>
<i class="material-icons">
shuffle
</i>
<span class="only-on-big-screen">
random
</span>
</mat-button-toggle>
( more buttons )
</mat-button-toggle-group>
</div>
</div>
</div>
Another workaround would be to do this:
.mat-button-toggle-group {
height: 32px;
align-items: center;
}
You can change the height by adding custom styles. You have to change the line-height of the class mat-button-toggle-label-content.
.mat-button-toggle-label-content {
line-height: 32px !important; <-- set you height here
}
What worked for me was reducing the line-height of the content and adjusting height of the buttons in a global style file.
.mat-button-toggle-button {
height: 2rem; // the modified height that I wanted.
}
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
line-height: 1rem; // default value is 48px. I wanted the height to be 2rem, but had to adjust this line-height to 1rem so that the icons were vertically centered.
}

jquery mobile scrollview not working on ios 4.3

I'm using "jquery.mobile.scrollview.min.js" to make my div scrollable. My App works well on any IOS with version greater than 5 ,when I try to run it on IOS version 4.3 the scrolling areas behave strangely.
My Div as below
<div id="BranchesScrollDiv" class="ui-listview">
<table class='MrPfixedcolumn' width="100%" style="border-spacing: 0; font-family: Arial;
color: #000; font-weight: bold; font-size: small">
<wc id="wcMrPTableContainer" runat="server">
<tr id='MrPcolumn1row1' class="#CssClass#">
<td class='MrProw1' align='left' onclick="BLBranchID=#BranchID#; BLBranchENname=#BranchENname#;BLBranchARName=#BranchARName#;BLCity=#City#;BLArea=#Area#;BLLong=#Long#;BLLati=#Lati#;BLTele=#Tele#;BLEmail=#Email#;BLFax=#Fax#;BLWorkH=#WorkH#; HandleBranchesListRowClicked();" style="width:50%;height:30px;border-right:1px solid #fff;">
<span id='MrPcolumn1row1span' >#BranchValue#</span>
</td>
<td class='MrProw1' align="left" onclick="BLBranchID=#BranchID#; BLBranchENname=#BranchENname#;BLBranchARName=#BranchARName#;BLCity=#City#;BLArea=#Area#;BLLong=#Long#;BLLati=#Lati#;BLTele=#Tele#;BLEmail=#Email#;BLFax=#Fax#;BLWorkH=#WorkH#; HandleBranchesListRowClicked();" style="width:25%;height:30px;border-right:1px solid #fff;">
<span id='Span1' >#CityValue#</span>
</td>
<td class='MrProw1' align="left" onclick="BLBranchID=#BranchID#; BLBranchENname=#BranchENname#;BLBranchARName=#BranchARName#;BLCity=#City#;BLArea=#Area#;BLLong=#Long#;BLLati=#Lati#;BLTele=#Tele#;BLEmail=#Email#;BLFax=#Fax#;BLWorkH=#WorkH#; HandleBranchesListRowClicked();" style="width:25%;height:30px;">
<span id='Span2' >#AreaValue#</span>
</td>
</tr>
</wc>
</table>
</div>
and I applied scrolling on it in document ready as below
$("#BranchesScrollDiv").scrollview({ direction: 'y' });
$("#BranchesScrollDiv > .ui-scrollbar").addClass("ui-scrollbar-visible");
can any body advice me what can i do to solve this problem ?
Thanks in advance.
$("#BranchesScrollDiv").scrollview({ scrollMethod: 'translate', direction: 'y' });
instead of
$("#BranchesScrollDiv").scrollview({ direction: 'y' });
I wish to help other with this answer

Strange highlight Mobile Safari

I have some problem with the highlight.
This is my CSS code:
html {
-webkit-tap-highlight-color: rgba(0,0,0,0.7);
-webkit-touch-callout: none;
}
This is my HTML code:
<a href="javascript: location.href = 'level://?id=123456';">
<div class="Box" id="Box0">
<table class="BoldText" style="margin:8px;">
<tr>
<td valign="top" width="50">
<div class="ProfileImage">
<div style="background:url(<url>) top left no-repeat;"></div>
</div>
</td>
<td>gustaf98 published a level
<div style="width:220px; margin-top:4px;" class="lightText">Skiftnyckel</div>
</td>
</tr>
</table>
</div>
</a>
And this is the result when I touch the box on my iPhone in a UIWebView:
And my question are, how can I get the black highlight over the whole box?
Please help!
You have this applied to the entire HTML rather than a specific container according to your CSS. Do you have a working example of this, or a link?
Try applying it specifically to the box that you want to be highlighted.
For example...
.box {
-webkit-tap-highlight-color: rgba(0,0,0,0.7);
-webkit-touch-callout: none;
}

Resources