Questions tagged [angular-ui-bootstrap]
A set of AngularJS directives based on Twitter Bootstrap's markup and CSS
4,607
questions
-3
votes
0
answers
25
views
Duplicated node module folder
In a new project in visual studio code, I download Angular, it create all it need to create, everything OK, but, when I download Bootstrap with npm install bootstrap and I get a problem: the node ...
0
votes
1
answer
40
views
Angular Bootstrap Navigation unable to switch between nav-tabs
I'm using bootstrap navigation in angular application as shown in below HTML
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist"...
0
votes
0
answers
6
views
How to set custom width of bootstrap modal dialog?
Bootstrap version: v3.3.4
Using this statement to open a dialog -
var modalInstance = $modal.open({
templateUrl: 'hello-world.html',
size: 'lg'
I want to create extra-large or with the ...
0
votes
0
answers
14
views
Is there a way to display a form in a slideshow/pagination way
I have a form in my Angular bootstrap project. I want to display the questions in a group of 3 questions per slide/page, but the page should stay the same. The form is created dynamically from a JSON ...
-1
votes
1
answer
117
views
How to put custom bootstrap theme in Angular 12?
I have an angular website with bootstrap from npm and the @ng-bootstrap/ng-bootstrap. I really don't like the default theme. So I found some themes on bootswatch. and I downloaded the '_variables.scss'...
0
votes
2
answers
19
views
How to get different background color for different input fields
I have multiple input fields, how to apply different background-color for alternate fields.
Right now same color is applied to each input field.
Now, Background color for all input field is red, how ...
0
votes
1
answer
32
views
Why menu items are not coming horizontally in Angular?
Below is the code written in the "menu.component.html" file inside tag:
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div>
<...
0
votes
1
answer
1k
views
Problems installing boorstrap angular
I've been searching some queations to solve a problem installing the ng-bootstrap but i can solve it
I have w10, VSCode 1.65.2, angular version:
Angular CLI: 13.2.3
Node: 16.14.2
Package Manager: npm ...
0
votes
1
answer
28
views
How to close a dropdown on a mousedown
Frontend noob here, please be nice.
I have a dropdown menu using ui.bootstrap.dropdown. The users of my website are used to copy-paste stuff from this dropdown. In order to do so, they usually click ...
0
votes
0
answers
7
views
How to move code of ngTemplate to an actual file?
I'm using AngularJS (not Angular) with the Typeahead directive of UI Bootstrap. For customization one can define a custom template by inserting a script tag of type text/ng-template. This works fine, ...
0
votes
2
answers
59
views
Dynamically change font, background colors in Angular
We have a web application built using Angular 9. It has colors for headers, borders and some menu backgrounds stored in multiple places in css files.
The ask is to change those as per client branding. ...
0
votes
1
answer
43
views
Dynamically add div container inside ngFor?
I would like to implement this html page using MDBootstrap.
Inside my .ts file I have three Courses.
var c1 = Builder(Course).id(1).autor("ASFASF").build();
var c2 = Builder(Course).id(1)....
0
votes
2
answers
87
views
Bootstrap Data-bs-toggle is not working in the currently version?
I notice that bootstrap 5.1.3 data-bs-toggle isn't working anymore. Like in this exemple:
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="...
-1
votes
1
answer
64
views
Angular select of dynamic values show only a specific count of values in dropdown - bootstrap 5
i am having a service from my backend that returns a list of all countries.
In my component i loop through the array and want the user to select one of the countries.
I am using bootstrap 5
<select ...
0
votes
0
answers
21
views
How to disable to ngbDropdown so that User can not change the value
We are having ngb dropdown such as below
<div ngbDropdown class="d-inline-block" >
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle&...
2
votes
0
answers
56
views
Customize ngb-progressbar, add label on top/bottom of the bar
Thank you for your help in advance. The image below is my desired result using [ngb-progressbar][1]
Val1-val6 are array values that I want to use as label on top and bottom of the progress bar.
...
0
votes
1
answer
70
views
Bootstrap Table in Angular 12
i create a table with bootstrap; im using angular 12, when i use only one component with table head and body works fine, when i create another component with table body, it gets all messed up. i have ...
2
votes
1
answer
50
views
Popover AngularJs still shows even after setting its trigger to none
The 'Thanks' pop-over when clicking the thumbs up for the first time appears, but it is still appearing the second time the thumbs up is clicked even after setting its trigger to 'none'
Steps to ...
0
votes
2
answers
49
views
How can I vertically center an icon in an input?
I don't know how to center an icon vertically inside an input. This is my code:
<i-feather name="user" class="fea icon-sm icons"></i-feather>
<input type="text&...
0
votes
1
answer
33
views
Problems with href in angular using bootstrap 5
I need to implement tabs with boostrap in angular, but apparently href does not work to show the contents of each tab, it only shows the first one, simply to test I copied and pasted the code from the ...
0
votes
1
answer
662
views
Angular autocomplete dropdown
I want to create an input field with autocomplete. So when I write in the input field it displays me as dropdown values from the database.
Ideally, it should be with angular material but I can't get ...
0
votes
1
answer
55
views
AngularJS UI-Bootstrap Modal is not showing
We had to update the Bootstrap version (bs3 to bs4). We have some issues with Angularjs modal.It only works in bs3.4.1 version not even 3.4.2. Below is a similar piece of code, the problem is,
It ...
0
votes
1
answer
43
views
Popover AngularJs quickly disappearing
The 'Thanks' popover worked fine on the first try, but it quickly disappears on the succeeding attempts.
I used uib-popover and set its template to a <div> with simple input text & button at ...
0
votes
1
answer
34
views
Is there any way i can make stiky bar in ionic framework
is there any way i can make stiky bar in ionic i have implemented but the problem is in ios buts are vibrating in ios
enter image description here
0
votes
0
answers
53
views
Ng serve for angular application is not starting the server , it shows error
When I start my server by writing ng serve -o, it shows an error:
(Generating browser application bundles (phase: setup)...An unhandled
exception occurred: Script file
node_modules/bootstrap/dist/css/...
0
votes
0
answers
54
views
Cards in bootstrap overlapping
My cards in bootstrap are showing responsiveness at first but when I reduce the size of the window these cards start to overlap.
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mx-auto ...
0
votes
1
answer
45
views
How to properly display Bootstrap in Angular?
I am learning Angular right now. In the tutorial, I'm supposed use Bootstrap:
<ul class="nav nav-pills">
<li class="active"><a href="">Map View</...
1
vote
1
answer
40
views
How to make links wrap or scroll in a col element in Angular?
I have a row element containing two columns. Currently, my first column sometimes extends over my second column because the problem.problem_description part contains a really long link that extends ...
0
votes
0
answers
24
views
getting $uibModal (ui-bootstrap) and bootstrap 3 to work in Angular Components (v 11)
kind of new to the world of Angular, and got stuck in trying to use uibModal from ui-bootstrap (Bootstrap version 3) in a Angular Components project..
The reason we're not using Bootstrap 5, is ...
0
votes
0
answers
109
views
Angular + Bootstrap dropdown close only on click outside
I'm currently trying to create a dropdown that does not close when I click any of its content inside the dropdown-menu.
I can almost reach what I want if I just add a form tag containing the dropdown-...
0
votes
0
answers
22
views
NgbCalendar - Angular - Week split bertween two months
I'm using NgbCalendar, the calendar is showing the wrong date according to the day.
On the screenshot we can see the first line has the wrong date (eg. the 1st is a Wed.) and some days are missing on ...
0
votes
0
answers
33
views
Ui-grid - Trouble with popovers in cells when data is loaded from the server
I have a simple example here: https://plnkr.co/edit/ymdzdwJpJsW5MesB
Basically, I bring the data from the server (as per the documentation) and refresh the grid like so $scope.gridApi.core.refresh();.
...
0
votes
1
answer
76
views
Material icon disappears inside <span>
I want to display an icon next to a chunk of text, but the icon seems to be disappearing on me. This is what I have:
<div class="d-flex align-items-center mt-1" >
<...
0
votes
1
answer
138
views
Ng serve not working after uninstalling a package
Can you guys help me on how I can run ng serve again successfully.
I worked on an Angular project that used Bootstrap, and then I installed Angular Material, my design was ruined. So, I tried to ...
0
votes
0
answers
104
views
Angular Hide side menu without javascript
I simply copy some code from google but the issue is for toggle they use javascript and I don't want to use javascript. I am using it by bootstrap 5.
My code
<div class="wrapper d-flex align-...
0
votes
1
answer
204
views
How to set today as default date in angular bootstrap date picker when component loading?
In my component, I have a bootstrap date picker that allows users to pick a date like this.
What I want is to display today`s date by default when a user comes to this page.
So far
<form>
...
0
votes
1
answer
78
views
How can I use Bootswatch in an Angular project?
I have an Angular project in which I want to use Bootswatch. But I don't know how to install it, I first tried to install the module with:
npm i bootswatch
Then in the angular.json file I did the ...
-1
votes
1
answer
604
views
How can i keep selected tab on page refresh in angular..?
I have two tabs, one is cluster list and template list. after I edited something in the template list, I wanted to come back to same selected template list. But its going to the cluster list. I tried ...
0
votes
1
answer
94
views
Display xeditable editable form inside popup
Need to wrap the editable form inside a bootstrap uib-popover-template.
Have tried the editable ui-bootstrap popover approach, but it is not working as expected.
Plunker 1 --> https://plnkr.co/edit/...
0
votes
0
answers
144
views
Angular and Bootstrap navbar collapse not working?
The navbar collapse is not working on small screens. I click on the button that appears on the right side for the menu, but nothing happens. I have looked up other solutions, and changed my angular....
1
vote
1
answer
260
views
Bootstrap Navbar toggle icon button not showing nav items on click?
I have been using bootstrap in projects very smoothly, but then in one angular project, its navbar toggler icon button is appearing but not showing the nav items on clicking the button.
<div>
...
0
votes
1
answer
166
views
Dynamically build accordion with *ngFor
While building an accordion I was able to dynamically get accordion items. The problem now is that they all open at the same time. Is it possible to open them one by one based on ID?
This is my code:
&...
0
votes
1
answer
89
views
Property 'showNavigationIndicators' does not exist on type 'HomeComponent'
I am trying to add the bootstrap carousel in my home page, but I am getting the error "Property 'showNavigationArrows' does not exist on type 'HomeComponent'", I am using angular 12 and ...
0
votes
0
answers
23
views
Angular: Bootstrap: Form field style
I need to build a form validation with Bootstrap in Angular.
Which CSS style shall I use to mark error fields?
I need to paint error fields with red background or similar.
Here is the repo:
https://...
0
votes
0
answers
26
views
Avoid Event Bubbling issue for see more option using typeahead in IE11
I have a input search component, in which there is an typeahead input field.
input-search.component.html
<input [typeahead]="data" [typeaheadItemTemplate]="sampleTemplate" (...
0
votes
1
answer
46
views
How to add function to this button
The button will only accept "$dismiss()". But I need it to accept any other function.
var modalInstance = $uibModal.open({
animation: this.animationsEnabled,
...
0
votes
0
answers
30
views
Tooltip not closing when the tooltip-is-open turns false during the tooltip-popup-delay window
I have a tooltip set up with tooltip-trigger="'none'", and tooltip-is-open is used to control the logic of when the tooltip is shown. I want the tooltip to also have a delay, so it has ...
0
votes
2
answers
44
views
How to edit bootstrap navbar?
I am trying to make an angular app, where I am using bootstrap@5.0.2 . There in the navbar, I have two links which I want to move it to the right. But I am unable to do it. What do I do?
This is the ...
0
votes
1
answer
305
views
How to set the selected image as the first image to show in a bootstrap carousel in Angular?
I have created a small tuto code in which I have a list of cards. on these cards I have a click event that pass the index of this cards that I will use it later to set the first image to show in ...
0
votes
1
answer
139
views
Angular and Bootstrap Button group
We're using Angular together with Bootstrap. We created a button group like
<div class="input-group-append">
<div class="btn-group" role="group">
<...