I updated angular to version 13.3.8 in my project and the [hidden] attribute stopped working.
This is part of my code where it stopped working:
<ng-container matColumnDef="noData">
<mat-footer-cell *matFooterCellDef [attr.colspan]="displayedColumns.length">
<div class="flex flex-col items-center w-full">
<span class="text-gray-400 text-sm">{{ 'no_data_available_table' | translate }}</span>
</div>
</mat-footer-cell>
</ng-container>
<mat-footer-row *matFooterRowDef="['noData']" [hidden]="dataSource && dataSource.data.length > 0">
</mat-footer-row>
I found a temporary solution, I hope it helps you until you fix the error.
[hidden] {
display: none;
}
Related
I have implemented JQuery UI Datepicker on a site.
I have an issue where that when I click to show the calendar dropdown, where the dropdown overlays the bootstrap card in the next row, anything over the card-header cannot be clicked on.
If I scroll the page, the calendar position remains static, but the non-clickable area moves to wherever the card-header is positioned.
The z-index of the calendar is 9999, whilst that of the card-header is only 3.
I have tried adding
style="overflow: visible !important"
to the card based on another answer on stackoverflow, but no dice.
I have screenshot rendered html below, marking the datepicker, and the overlaid card-header:
In case relevant, I am using:
Bootstrap 4.6
ASP.NET Webforms
Material Dashboard 2.1.0
JQuery UI 1.13.2
JQuery 3.6.0
Any ideas why this is happening, and how to resolve? Thanks.
Edit 1 - 2023-01-11
I have put up a minimal example Here
I have added an inline style to the card-header that is being overlaid to increase the height, so that the problem is more apparent.
(I have stripped out a load of script references for this example that are now causing a few console errors, but these are not related to the issue.)
I am unable to replicate your code as it has links to content that is local to your web site. Consider the following more basic example.
$(function() {
$(".datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="row">
<div class="col-md-12">
<div class="card z-index-2 mt-0 h-100">
<div class="card-header">
<h4>Card with Datepicker</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm table-borderless mb-0">
<tbody>
<tr>
<th class="pl-0 w-50 pt-1 pb-1 border-top-0" scope="row"><strong>Select Date</strong></th>
<td class="pt-1 pb-1">
<span class="bmd-form-group is-filled"><input name="LastContactedCal" type="text" id="LastContactedCal" class="datepicker form-control" value="05/10/2022"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card z-index-2 mt-0 h-100">
<div class="card-header" style="height: 200px;">
<h4>Another Card</h4>
</div>
<div class="card-body">
<p>Some Stuff</p>
</div>
</div>
</div>
</div>
This works as expected without the issue that you reported. I suspect that some other component that my example is not using is interfering with the click event in your sites code. I would suggest you remove all additional libraries except for Bootstrap and jQuery UI, then add them back in one at a time or in other orders, to see when the functionality you are seeing returns.
I'm working on reactive-forms in angular 7.I have 3 components and each component has a form.based on if,components switches.I'm not using routes ,just hiding and showing components.if we reach back to previous component.then angular-material input have a red border.How to remove that border
dashboard.component.ts(parent)
<section>
<mat-card class="auth-card">
<mat-card-content>
<div [ngStyle]="componentConst.showAcc ? {'display':'block'} : {'display':'none'}" id="acc ">
<app-account (showStep)="onNextStepShow($event)"></app-account>
</div>
<div [ngStyle]="componentConst.showC ? {'display':'block'} : {'display':'none'}" id="cred ">
<app-cred (showNextStep)="onNext($event)" (showStip)="onShowPrev()"></app-cred>
</div>
appaccount.ts
<form [formGroup]="providerForm" (ngSubmit)="onSubmit()">
<div class="form-control">
<mat-form-field>
<input type="text" placeholder="Provider" matInput [matAutocomplete]="auto"
formControlName="providerName">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChanged($event)">
<mat-option *ngFor="let providerItem of providersData" [value]="providerItem.providerName">
{{providerItem.providerName}}</mat-option>
<mat-option *ngIf="providersData.length===0 && isSearching!='false'" disabled>Begin typing to search...
</mat-option>
</mat-autocomplete>
<mat-error *ngIf="submitted && formControl.providerName.errors">
<mat-error *ngIf="formControl.providerName.errors.required"> * Provider is required</mat-error>
</mat-error>
</mat-form-field>
</div>
<div class="button-section">
<button mat-button [disabled]="!isSelected">Next</button>
</div>
</form>
In the Switching time you should reset a form. so in that time reset but form field are touch then you will get a red border because of the validation. add this code in the switching between between form event.
this.providerForm.reset()
providerForm.markAsPristine();
providerForm.markAsUntouched();
I have 3 containers which contain an input and a span. The span width can change dynamically because I will be adding localization so I don't know the max width of the text. Therefore, is there a way that I can set all spans to be the same width without setting a fixed width or using Javascript? Preferably using Angular Material.
See example here: http://codepen.io/cmacdonnacha/pen/PzWWda
<body ng-app="myApp" ng-controller="AppCtrl">
<div layout="column">
<md-input-container md-no-float layout="row">
<span>From:</span>
<input type="email">
</md-input-container>
<md-input-container md-no-float layout="row">
<span>To:</span>
<input type="email">
</md-input-container>
<md-input-container md-no-float layout="row">
<span>Cc:</span>
<input type="email">
</md-input-container>
</div>
</body>
Thanks!
Try to use div element for each md-input-container and use span with flex attribute. Here is the code for that.
<div layout="column">
<div layout="row" flex layout-align="start center">
<span flex="initial">From:</span>
<md-input-container flex>
<input type="from">
</md-input-container>
</div>
<div layout="row" flex layout-align="start center">
<span flex="initial">To:</span>
<md-input-container flex>
<input type="email">
</md-input-container>
</div>
<div layout="row" flex layout-align="start center">
<span flex="initial">Subject:</span>
<md-input-container flex>
<input type="subject">
</md-input-container>
</div>
You can define the value flex as desired to get the required result. Here is the working code. http://codepen.io/next1/pen/yJgKBR
Edit: As you will use inital as flex value, span element will only use the space required by it but you will lose the alignment in that way.
In ionic ios app swipe the page it shows blank screen.Please help me how to fix this.
app.js
$stateProvider.state('login',
{
cache: false,
url: '/login',
templateUrl: 'templates/Login.html',
controller: 'loginCtrl'
})
this is Login.html template page
<ion-view view-title="Login" hide-nav-bar="true" padding="true">
<ion-header-bar align-title="center" class="bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content scroll="true" overflow-scroll="true">
<form name="signInForm" novalidate="" ng-submit="tryLogin(signInForm)">
<div class="list-header">
<label class="item item-input" tabs-item-hide="true" ng-class="{ 'has-errors' : signInForm.Email.$invalid, 'no-errors' : signInForm.Email.$valid}">
<input type="email" placeholder="Email" name="Email" ng-model="loginData.Email" autofocus required>
</label>
<span class="form-errors" ng-show="signInForm.Email.$error && signInForm.$submitted" ng-messages="signInForm.Email.$error" ng-messages-include="templates/form-errors.html">
</span>
<label class="item item-input">
<input type="password" placeholder="Password" name="Password" ng-model="loginData.Password" required>
</label>
<span class="form-errors" ng-show="signInForm.Password.$error && signInForm.$submitted" ng-messages="signInForm.Password.$error" ng-messages-include="templates/form-errors.html">
</span>
<div> </div>
<p class="text_right">
Forgot Password?
</p>
<div>
<button class="button button-block button-positive">Login</button>
</div>
<div style="text-align: center">
Create an account
</div>
</div>
</form>
</ion-content>
My Main Page HTML:
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" >
<ion-header-bar class="bar-positive">
<h1 class="title">MY App</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item item-icon-left" nav-clear menu-close href="#/Settings">
<i class="icon ion-gear-b"></i>Settings
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Now swipe the child page it from the iphone it show the blank screen, coldn't load it again
just use the following line of code in the config of your AngularJS module
angular.module(....)
.config(function($stateProvider,$urlRouterProvider,$ionicConfigProvider){
$ionicConfigProvider.views.swipeBackEnabled(false);
//remaining code in config
}
an issue was created on github and the cash being disabled was identified as the cause of the problem. moreover a reply from the ionic team came as follow (last reply on github)
This is caused by caching being disabled. There is big benefit of caching you views, and an edge case like this isn't something we want to support.
If you're worried about data not being updated, you can use the view
lifecycle events to make sure data is up to date.
so if you need the caching disabled and you don't care about this feature you can disable it as #Arul said. if you want this feature you have to enable caching.
I'm using jQuery UI icons in a table and they take up the size of the table cell, which is elongated horizontally.
Q: What html/css is necessary to make the icon have the same width as it's height?
Here's what I have so far:
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
If the result you are expecting is the icon wrapped in a rounded box then you have to do set the container div a width of 16px, like here:
http://jsfiddle.net/marcosfromero/n2tYP/
#wanted .delete div {
width: 16px;
}
Not entirely sure if this is what you want, but maybe you need to set the behaviour of the div so that it does not fill 100%. Like this:
<table>
<td class="delete">
<div class="ui-state-default ui-corner-all" style="display:table">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
</table>
The div's display style is changed so that it does not scale to full width.
I can't tell if you want a jQuery specific answer or just a css answer. Since I don't know the former here's the latter. If you want to limit the width to known pixels and have the height adjusted so that it maintains the proper aspect ratio, a style like
img{width=32px; height= auto;}
should do the trick. Since most icons are square and of known size I would think
img{width=32px; height=32px;}
would work out too.
I don't understand. Are you sure some other CSS in your page isn't causing this problem?
jQuery UI CSS uses the background-image property to display images, and generally those images shouldn't be "taking up the size" of its parent.
I put together a quick jsFiddle with the following contents:
Dependencies:
jQuery 1.5.1
jQuery UI 1.8.9
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css
HTML:
<table>
<tr>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
</div>
</td>
</tr>
</table>
<br />
<table>
<tr>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
Hello
</div>
</td>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
world!
</div>
</td>
</tr>
</table>
CSS:
/* Extend the width ... */
td.delete { width: 100px; }
And it came out looking fine in Google Chrome:
Is there a particular browser this is happening on for you? Can you provide a concrete example?