I have another question for the community, this one is simple. As previous questions, I'm working on Mr. Asim Hussain "Angular4 From Theory to Practice" book and ran into an issue with bootstrap .has-danger and .has-success classes not working. I installed bootstrap with
npm install bootstrap --save
Added the path to the bootstrap css in the .angular-cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
And all seems to work well, the grid and form styles are loading well, no errors in the console. The issues comes when I implement the validation following the exercise, the form field border does not turn red or green as it should, here is my code
<!-- One of the fields from the form -->
<div class="form-group"
[ngClass]="{
'has-danger': f.form.controls.email?.invalid && (f.form.controls.email?.dirty || f.form.controls.email.touched),
'has-success': f.form.controls.email?.valid && (f.form.controls.email?.dirty || f.form.controls.email.touched)
}">
<label>Email</label>
<input type="email"
class="form-control"
name="email"
[(ngModel)]="model.email"
required
pattern="[^ #]*#[^ #]*">
</div>
Not sure why the bootstrap class is not turning the text field red or green as it should, can someone please help me figure this out?
The question is 7 months old, but the response may help others.
.has-danger no longer exists.
The question has been already asked here:
has-danger no longer working on Bootstrap v4 beta?
Related
We recently switched to webpack for our assets (js, scss, ...) and everything went fine so far, except a small bug where the input label behind the file-selector-button overflows with is neighbour as you can see in these examples below. Even with the default bootstrap styles (no additional whatsoever) we still encounter this bug.
Basic webpack application configuration:
import "bootstrap/scss/bootstrap.scss";
import "bootstrap-icons/font/bootstrap-icons.css"
// [...]
import "bootstrap";
Snippet of the first example:
<div class="row pb-3">
<div class="col">
<input class="form-control" type="file" name="uploadFile" id="uploadFile" required>
<div class="invalid-feedback">
Please select a file
</div>
</div>
</div>
The second example is from Bootstrap Docs
Even the inspector from e.g. Google Chrome does not help either and by now i could not find any solutions to fix this issue.
I am using Bootstrap 5.2.0 (tested 5.2.2, 5.1.x, ... with same results), no additional changes made to bootstrap itself.
Okay, looks like it has something to do with postcss-loader. Arguments like margin-inline-starts will be "removed" from built version (other Post: How to prevent 'postcss-preset-env' from removing CSS logical properties?)
The suggested solution does not work but removing postcss-loader at all is a possible temporary solution right now... but i will look forward to fix it and keep using postcss-loader
I am trying to learn Material in combinaton with Angular so that I can later apply the Material Design pattern to my applications. After browsing around I found Material2 for Angular and installed it on my machine through NPM. The website describes all the components it has and I first tried to start with the navigation components. After fiddling around a bit I found out that the components were not responsive. After some research I found out that flex layout could make the components work in combination with Material2. One thing I noticed on the Material2 website was that when I narrow the browser down to mobile device sizes, it would change the navbar (which has a few buttons) to this:
I marked the three buttons with a red box (Components, CDK, Guides). This is what I want to recreate, but as far as I know, there are no navbar components for Material2. Altough the navbar has Material2 buttons in it:
I was wondering how they made this, what do I need to have in order to do this? Can it be build in Material2 or should I use something else?
Thanks in advance.
FlexLayout offers a Responsive API, which lets you define different layout properties based on the media query, e.g.:
<div fxLayout='column' class="zero">
<div fxFlex="33" [fxFlex.md]="box1Width" class="one" ></div>
<div fxFlex="33" [fxLayout]="direction" fxLayout.md="row" class="two">
<div fxFlex="22" fxFlex.md="10px" fxHide.lg class="two_one"></div>
<div fxFlex="205px" fxFlex.md="65" class="two_two"></div>
<div fxFlex="30px" fxFlex.md="25" fxShow [fxHide.md]="hideBox" class="two_three"></div>
</div>
<div fxFlex class="three"></div>
</div>
Install FlexLayout through npm in your project.
Steps to install FlexLayout:
npm install #angular/flex-layout –save
or with yarn
yarn add #angular/flex-layout
And if you do not want to use FlexLayout, you can use Bootstrap4 & material design, refer 'https://mdbootstrap.com/docs/angular/navigation/navbar/'
I'm having an issue with Angular Material checkbox where after rendering there is an additional vertical line that is added because a class in the material.
This is my HTML:
<div class="col-md-6 col-sm-12">
<div class="col-sm-12">
<mat-checkbox class="full-width" formControlName="TPA_NUSC">{{ 'GLOBAL.TAX_NUMBER_MANDATORY_AB' | translate}}</mat-checkbox>
</div>
<div class="col-sm-12">
<mat-checkbox class="full-width" formControlName="TPA_VLNC">{{ 'GLOBAL.VALIDATE_TAX_NUMBER_AB' | translate}}</mat-checkbox>
</div>
</div>
And this is my output:
That verical line comes from the class "mat-checkbox" that is added after the rendering, at least, if I remove the class the line will disappear.
Any tips about this issue?
I had a similar problem but realized that I didn't have a theme.
Make sure you have something like this in styles.css: #import "~#angular/material/prebuilt-themes/indigo-pink.css";
I have found the issue, seems that someone add a class in our company css that override that indigo-pink.css
Many thanks to #Peter Kim to allow me to find the issue.
If anyone will have an issue like this, there is how I found out what could be wrong.
Try to get the cloested element in your developer console
Doing that I found out that the class had an border-right.
Click in the right top corner to go to the css file that is causing the issue
It will redirrect you to the css file, however it may not tell you which file it's, but you can go to your index.ts or where you declared your css and count the css until you get a match, for example, in my case it was the 14th sheet.
Just go to that sheet and search for the issue, in my case I searched for #b7b7b7 and it was a direct match.
Hope it help some else.
Recently found an issue when trying to write some Automation Tests for a component in my webapp, I am using Anglur for the front end, and am trying to create a type ahead input textbox
<div class="row">
<div class="col-md-4">
<label ng-bind="::'ENVIRONMENT' | translate"></label>
</div>
<div class="col-md-8" ng-class="{ 'has-error' : iliCtl.noEnvResults && iliForm.envs.$viewValue !== '' }">
<input name="envs" id="envs" type="text"
ng-model="iliCtl.selectedEnv"
uib-typeahead="env.name for env in iliCtl.environmentData | filter:{name:$viewValue} | limitTo:50"
typeahead-no-results="iliCtl.noEnvResults"
typeahead-show-hint="true" typeahead-min-length="0"
typeahead-on-select="onEnvSelect($item)"
placeholder="-- Select --"
class="form-control">
<div class="error-class" ng-show="iliCtl.noEnvResults && iliForm.envs.$viewValue !== ''" ng-bind="::'ERROR_207' | translate"></div>
</div>
</div>
The above code works fine until I inspect the element, the the generated HTML appears to generate two input tags as per image below.
Any ideas as to why this would be happening, as you can see the Input tags contain mostly the same properties the major differences seem to be styling properties. But I cant see why this would be happening.
I found the answer, and it isn't a bug as I first assumed.
The Input Tag property typeahead-show-hint="true" is responsible for generating the second input box in the HTML, It is used to display a suggested item in the text box.
I'm trying to use Bootstrap 3.0 as a template to create a website. The issue I'm having is that when you refresh the page all of the text disappears. It does not do it every time but 8/10 times it does. Here is the demo I have put on my website for you guys to check it out. http://dwayned.co/JSwebsite/
Please let me know if you have any questions or need to see any code.
Your HTML is quite messed up. Bootstrap structure should be like this...
<div class="container">
<div class="row">
<div class="col-xs-12">
YOUR CONTENT HERE
</div>
</div>
</div>
In the above example I've used one col-xs-12 class but you can use any combination of cols here as long as they add up to 12. See more on the Bootstrap grid system here in their docs: http://getbootstrap.com/css/#grid
I also notice in your code you are using a span12 class but this is from Bootstrap v2 and not the new v3 which uses the col classes I've outlined in my example above.
I found this existing thread that has a couple different answers referring to your issue. https://stackoverflow.com/questions/21984543/google-chrome-bug-website-not-displaying-text