Toggle button seems not have css - css

I need to create a dropdown button, so I installed bootstrap and ng-boostrap. This is my html:
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
and in my app.module.ts I put:
imports:{
NgbModule.forRoot()}
I have just also put bootstrap css in my angular.json file.
The problem is that dropdown appear grey like it doesn't have css. I don't know what is the problem. Anyone can help me?
EDIT
My angular.json file have this:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.css"
],

Step 1) install #ng-bootstrap/ng-bootstrap
npm install --save #ng-bootstrap/ng-bootstrap
Step 2) Import the ng-bootstrap package in app.module.ts file
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
#NgModule({
...
imports: [NgbModule, ...],
...
})
export class AppModule {
}
Note: No need of doing NgbModule.forRoot()
Step 3) Use your html code in app.component.html file
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
I have created the same example, which is forked from the ng-bootstrap.
View Demo
Hope this will help you.

I solved this problem by adding line:
#import '~bootstrap/dist/css/bootstrap.min.css'
to my /src/styles.css file.
(You need have bootstrap or bootstrap-css-only installed. To install run command npm install bootstrap-css-only --save)

Related

Why is bootstrap not working all of a sudden?

I am running bootstrap on React, and then using Storybook to view it.
This is the code that I ran on Friday, and it was working without any problems. Today, I run it, and it's no longer working! I ran it on Jsfiddle and onecompiler, and still not working. I copied the carousel component from the bootstrap website, pasted it in my vscode, ran it, and it's not working! I pasted it in jsfiddle and onecompiler, and still not working! What is happening here? Why is it not working all of a sudden? Am I doing something wrong? By 'not working' I mean clicking on the left/right indicators does not move the slider!
Here's the code that I'm running:
<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="true">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div className="carousel-inner">
<div className="carousel-item active">
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" className="d-block w-100" alt="..." />
</div>
<div className="carousel-item">
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" className="d-block w-100" alt="..." />
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div>
I just copied it from bootstrap, and just replaced class with className to make it work on React, but it's not working. Everywhere is where it's supposed to be with the exception that indicators and controls do not work.
I feel like the issue has to do with me using normal bootstrap for React, rather than React Bootstrap, which does work! But normal bootstrap also worked on Friday, why is it not working now? And why is it not working in any online compiler either? Does it work for you? Am I missing something?
Try checking the following to find a possible resolution :
Check if you have provided link to bootstrap in index.html or alternatively have you correctly installed bootstrap using npm.
Have you installed or linked to the correct version of bootstrap for which you have taken the carousel.
In my opinion, rule of thumb to get through the styles in frontend is to inspect the elements and the console. Try checking if bootstrap styles are applied to the divs in the inspect element styles.

Primeng angular 7 - css is not getting applied

I am using angular 7 and primeng library for UI compnents. CSS is not getting applied to the HTML elements. I have imported these css files in angular.json:
"styles": [
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.scss"
]
On the demo page: http://primefaces.org/primeng/#/inputgroup
Input box have these classes generated: ui-inputtext ui-corner-all ui-state-default ui-widget
These are missing from my generated html, if i apply these classes manually css gets applied. This is HTML code:
<h3 class="first">Addons</h3>
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="pi pi-user" style="line-height: 1.25;"></i></span>
<input type="text" pInputText placeholder="Username">
</div>
</div>
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">$</span>
<input type="text" pInputText placeholder="Price">
<span class="ui-inputgroup-addon">.00</span>
</div>
</div>
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">www</span>
<input type="text" pInputText placeholder="Website">
</div>
</div>
</div>
I have tried ViewEncapsulation:
import { ViewEncapsulation } from '#angular/core';
#Component({
..
encapsulation: ViewEncapsulation.None
})
There is no change in app.module.ts for primeng.
As Per My Example You need to change in app.module.ts file
See below Images
You need to import InputTextModule from primeng in root module of your component
And here is the angular.json file
if you find this helpfull...
I had the same problem, then I tried to put the css files into my styles.css instead of angular.json and it works fine now
change this...(angular.json)
"styles": [
"src/styles.scss",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
by this...(src/styles.scss):
#import '~primeng/resources/primeng.min.css';
#import '~primeng/resources/themes/bootstrap4-light-blue/theme.css';
#import '~primeicons/primeicons.css';
When you install primeng-lts
Add to below styles to angular.json
"styles": [
"./node_modules/primeng-lts/resources/themes/nova-light/theme.css",
"./node_modules/primeng-lts/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],

bootstrap modal does not show in basic ASP.NET Core Web angular application

I'm new with all of the browser UI tools. I have been working on a simple angular/typescript application. I created an angular application using VS2017 ASP.NET core web application template. I can't get a modal window to show up.
I've seen several answers stating that you need to include jquery and or bootstrap.js. But I don't know where to specify these in this project. I used nuget to install angular, bootstrap and I even installed the jquery and jquery.ui.combined with no luck.
<h1>Hello, world!</h1>
<p>Welcome to your new single-page application, built with:</p>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I've tried a bunch of different samples for showing a modal but I have not yet had a modal show.
I new it was something only a total newbie would not know. I just had to include the jquery and bootstrap scripts in 'angular.json'. I added the following to the "scripts" array.
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
I can confirm this works too with Visual Studio 2019 Angular Template.
Added mentioned scripts in 'angular.json' like :
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"src/assets/fonts/fonts-fontname.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Thank you Tony!

Bootstrap 4 Navbar doesnt collapse in Angular4

I'm working with Bootstrap 4 and Ng-Bootstrap in an Angular 4 Project,
i have linked the que bootstrap.css in my angular-cli.json this way
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
and imported the NgbModule in my app.module that looks like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
i made a Navbar copying the documentation from the bootstrap website and added the toggle component from ng-bootstrap (it works well) the code looks like this
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li>
<div ngbDropdown class="d-inline-block">
<div class="nav-link" id="dropdownBasic1" ngbDropdownToggle>Toggle
dropdown</div>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>
the problem starts when i scale down the window and the toggle does its work, when i press the button for collapsing the navbar it doesn't work.
i tried installing and linking the js files of jquery and popper and the bootstrap one, but it still doesn't work, the actual angular-cli.json looks like this
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/jquery/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
what am i doing wrong?
To work with angular you need this fix
first define this in your class public navbarCollapsed = true;
then chnage your button
<button class="navbar-toggler" type="button" (click)="navbarCollapsed = !navbarCollapsed" [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
also you need to add this to your collapsing div
<div class="collapse navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarSupportedContent">
now you don't need jquery, popper or bootstrap.js
you can find more info about this issue here.
also check ng-bootstraps working demo page code link.
I had the same problem, I used normal bootstrap 4 rather then ng-bootstrap and this way I don't need to any module in app.module file as well. it works. Below is the script add into angular.json (angular v6) and bootstrap 4+:
"scripts": ["../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]
For CSS I prefer to use Scss version so it goes like this.
"styles": [
"src/styles.scss",
"../node_modules/font-awesome/scss/font-awesome.scss"
],
and i import bootstrap into style.scss file
#import "~bootstrap/scss/bootstrap.scss";
Cheers!
JK
Look for the compiled classes, maybe you get the wrong version. I had a similar issue with the class col-sm-offset-#, the problem was that this classes doesn't exist in that version. Maybe could be the same issue
This is the route ..\node_modules\bootstrap\dist\js here we have two file
bootstrap.js and bootstrap.min.js
find into bootstrap.js the nav classes. if you could not found it, look for another Bootstrap repository.
Good luck.
this works fine for me
I installed
npm i --save #ng-bootstrap/ng-bootstrap ng add #angular/localize
app.module.ts
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
imports:[NgbModule]
NgbModule.forRoot() not working
angular.json
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js]`
Hope this helps, even just alittle bit

Foudation grid system not working on Angular Form

I have done the intsallation of foundation 6 on my Angular and it works fine but I realized the grid system is not working at all. I have made a lot of tweaks and turns but still no luck. Anyone knows why this may be. Thank you.
<div>
<h3>
Add A Warehouse
</h3>
</div>
<form novalidate [formGroup]= "warehouseForm" (ngSubmit)="onSubmitForm()">
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Name
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Name">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse Country
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Country">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Region
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Region">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse City
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse City">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<label>Warehouse Address
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Address">
</label>
</div>
<div class="medium-6 columns">
<label>Warehouse Street
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Street">
</label>
</div>
</div>
<div class="row">
<div class="medium-6 columns end">
<label>Warehouse Keeper
<span>
<i class="fa fa-user"></i>
</span>
<input type="text" placeholder="Warehouse Keeper">
</label>
</div>
</div>
<div>
<button type="submit" class="success button expanded">Save</button>
</div>
</form>
This is my form , I can say I say my foundation works because the fonts and other things are working. But the grid is just not working.
In the .angular-cli.json
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/foundation-sites/dist/css/foundation.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
"scripts": [
"../node_modules/foundation-sites/vendor/jquery/dist/jquery.js",
"../node_modules/foundation-sites/dist/js/foundation.js"
],
Image from code inspection
I think the issue is with the version of foundation you've got!
Check what grid system your current install of Foundation is using because the newest version of Foundation comes with their XY Grid enabled when you download the complete package and this wont call the CSS of the old grid!
You'll need to re-download a custom version of Foundation but check 'float grid' when you're downloading it and it will get you back to the older grid system and your code should work!
Heres a link to download the custom foundation version:
https://foundation.zurb.com/sites/download/
And if you want to learn more about the new XY Grid heres a link: http://foundation.zurb.com/sites/docs/xy-grid.html
Hope this helps!
In case anyone else has an issue with using Foundation Flex Grid:
Try adding these in your styles.scss:(you could read more from here)
#import "../node_modules/foundation-sites/assets/foundation";
#include foundation-flex-classes;
#include foundation-flex-grid;
If that did work, here's how I add foundation to my Angular 8 project:
Install foundation sites and jQuery:
$ npm install --save foundation-sites jquery
Add these in angular.json file:
"styles": [
"src/styles.scss",
"node_modules/foundation-sites/dist/css/foundation.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/foundation-sites/dist/js/foundation.min.js"
],
Add $ and foundation in app.component.ts
-
import { Component } from '#angular/core';
declare var $: any; // <=========== Add this
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app-frontend';
ngOnInit(): void {
$(document).foundation(); // <=========== Add this
}
}
Ctrl C and npm start or ng serve again to reset the server.

Resources