问题标签 [bootstrap-material-design]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
742 浏览

html - 位置:相对;破坏我的选择下拉动画的风格

col-md-6破坏我的ng-select下拉动画的类

当我从浏览器的开发人员工具中禁用它时,一切看起来都很好。当我将类样式替换col-md-6为此:

一切正常,但我不能只替换position: relative;我所有的布局,所以我需要一个解决方案来帮助我只为我的选择删除该样式。我试图将课程覆盖col-md-6到另一个双胞胎课程,但它似乎无法正常工作。仅在我编辑原始课程col-md-6时有效。帮我!我添加了一些片段以使其清楚。

HTML:

CSS:

编辑:

这可能很重要。我的双胞胎班级的样式被分配给我损坏的 div 但仍然无法正常工作......但是当我从原始样式禁用已经禁用的样式时,col-md-6它开始工作。

不起作用:

在此处输入图像描述

http://prntscr.com/h48fkj

工作:

在此处输入图像描述

http://prntscr.com/h48f93

0 投票
1 回答
2481 浏览

javascript - ReferenceError:使用 Material Bootstrap 警报时未定义 toastr

我正在尝试在我的 Django 应用程序中使用Material Bootstrap Alert 。如果用户在尝试登录页面时输入了错误的密码或用户名,错误消息应该会出现在右上角。使用 js alert 它工作得非常好,但是当我试图调用时,toastr.error('Wrong login credentials. Please, try again...');我得到了这些错误:

jQuery.Deferred 异常:未定义 toastr @ http://127.0.0.1:8000/login/:63:9 j@ http://127.0.0.1:8000/static/js/jquery-3.2.1.min。 js:2:29997 g/http://127.0.0.1:8000/static/js/jquery-3.2.1.min.js:2:30313 未定义

ReferenceError: toastr 未定义

这是我的 login.html 页面:

这是我的 template.html 和所需的脚本:

我对 JS 或 jQuery 不是很有经验。所有 javascript 文件均来自官方 MDB 网站

0 投票
1 回答
1172 浏览

angular - 在我的 Angular4 上使用 mdb 的透明导航栏

我用于导航栏的 style.scss

我的 home.component.html 以及我的背景图片所在的 home.component.html

我的导航栏组件.html

Mdb的标记实际上正在工作,但我遇到的问题是我的导航栏是一个不同的组件,因此背景图像不会与导航栏重叠

0 投票
2 回答
1741 浏览

javascript - 如何正确应用 .mdb-select 样式?

MDB的文档有以下示例:

但是,他们链接到的样式表没有.mdb-select我能找到的类。我错过了什么?我已经在自己的项目中尝试了他们的示例,但无法应用该样式。

该项目已经链接了基本引导文件(某处),并且在我的页面中我试图像这样引用 MDB:

0 投票
0 回答
542 浏览

bootstrap-4 - Bootstrap-Material-Design 4 Dropdown 未在 Jhipster 中打开(Angular 5)

我正在尝试在我的 jHipster 项目中使用 Creative-tim Material Bootstrap 4 Theme,但是经过多次尝试后,我无法使下拉或浮动标签组件正常工作。

我试过的东西: 1. 在 vendor.ts 中添加文件

  1. 在 vendor.scss 中添加 css/scss

    @import 'node_modules/bootstrap-material-design/dist/css/bootstrap-material-design'; @import '../../../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

  2. 添加了@import 'material-dashboard.scss';在 global.scss

  3. 这些是 package.json 的依赖项

    “依赖”:{“@angular/animations”:“^5.2.4”,“@angular/cdk”:“^5.2.1”,“@angular/common”:“5.2.0”,“@angular/编译器”:“5.2.0”,“@angular/core”:“5.2.0”,“@angular/http”:“5.2.0”,“@angular/forms”:“5.2.0”,“@角度/材料”:“^5.2.1”、“@angular/platform-b​​rowser”:“5.2.0”、“@angular/platform-b​​rowser-dynamic”:“5.2.0”、“@angular/router” :“5.2.0”,“到达”:“2.3.1”,“@ng-bootstrap/ng-bootstrap”:“1.0.0-beta.9”,“bootstrap”:“4.0.0”,“bootstrap” -material-design": "^4.1.1", "core-js": "2.4.1", "font-awesome":“4.7.0”、“generator-jhipster-entity-audit”:“^3.1.0”、“jquery”:“3.2.1”、“ng-jhipster”:“0.4.0”、“ngx-cookie” :“2.0.1”,“ngx-infinite-scroll”:“0.5.1”,“ngx-webstorage”:“2.0.1”,“反射元数据”:“0.1.10”,“rxjs”:“ 5.5.6”,“swagger-ui”:“2.2.10”,“popper.js”:“^1.12.9”,“sweetalert2”:“6.10.1”,“tether”:“1.4.0”, “zone.js”:“0.8.19”,“ng-diff-match-patch”:“2.0.6”}0.1”、“ngx-infinite-scroll”:“0.5.1”、“ngx-webstorage”:“2.0.1”、“反射元数据”:“0.1.10”、“rxjs”:“5.5.6” ,“swagger-ui”:“2.2.10”,“popper.js”:“^1.12.9”,“sweetalert2”:“6.10.1”,“tether”:“1.4.0”,“zone.js” ": "0.8.19", "ng-diff-match-patch": "2.0.6" }0.1”、“ngx-infinite-scroll”:“0.5.1”、“ngx-webstorage”:“2.0.1”、“反射元数据”:“0.1.10”、“rxjs”:“5.5.6” ,“swagger-ui”:“2.2.10”,“popper.js”:“^1.12.9”,“sweetalert2”:“6.10.1”,“tether”:“1.4.0”,“zone.js” ": "0.8.19", "ng-diff-match-patch": "2.0.6" }8.19", "ng-diff-match-patch": "2.0.6" }8.19", "ng-diff-match-patch": "2.0.6" }

但是下拉和浮动标签仍然不起作用。请帮助我将http://md-pro-angular.creative-tim.com/dashboard?_ga=2.247609543.1315334517.1519214351-1513144354.1517469381主题集成到我的时髦应用程序中。

提前致谢。

0 投票
2 回答
2178 浏览

javascript - React MD Bootstrap:如何获取输入值

我正在使用MD Bootstrap React在 React 中编写应用程序。我在从Input 组件中获取值时遇到问题。

创建课程.js

在这两个输入中,我只是试图从用户那里获取输入并适当地设置状态。handleInput 被设计为动态的,因为我最终将在页面上有几个输入。

但是,当我在任一输入字段中输入时,都会出现错误: Uncaught TypeError: Cannot read property 'toString' of undefined

我究竟做错了什么?

编辑:为错误添加堆栈跟踪。每次都会出现以下所有三个错误。

0 投票
3 回答
288 浏览

html - 不带 !important 更改默认值

试图弄清楚结构,但我怎样才能改变事物的默认值?比如按钮颜色?现在我正在创建一个 styles.css 并做:

我想避免使用 !important 来处理类似的事情。任何帮助将不胜感激。

0 投票
2 回答
128 浏览

angular - 如何通过按输入登录关闭模态窗口?

选择登录按钮后,必须关闭对话框。我一直都有一些错误。例如,当您单击登录按钮时,对话框关闭,但一切都变暗。

谁知道如何解决这样的问题,求助。

HTML:

打字稿:

PS我为我糟糕的英语道歉。

0 投票
1 回答
185 浏览

pug - 从快速路线呈现为视图时,mdbootsrap 未显示

我在 pug 中有一个简单的登录视图。我使用材料设计进行引导。当我尝试作为简单的 html 文件运行时,它会显示出来。但是当我尝试将所有 css、bootstrap、js 文件包含到我的公共文件夹并通过快速路由呈现相同,引导样式和 js 功能都在工作。我通过更改路径进行了交叉检查。

1.我试图通过将文件放在公共文件夹中来呈现。然后制作一个快速静态中间件。但它不起作用。

2.即使我尝试将所有文​​件放在视图之外并尝试给出确切的路径,但没有显示出来。

3.然后我也尝试过../public/bootstrap.min.css(类似于从views文件夹导航到公共文件夹),仍然无法正常工作。

但是当我使用cdns时它工作正常。它有什么问题。我将提交代码文件(类似于我正在尝试的东西)。

登录.pug

app.js 中的中间件

我正在准确地获取页面,但只有 mdb 样式没有显示。我的 login.pug 代码或路径是否有任何问题。或者如果我使用 cdn,它工作正常。但是我能用它做所有的东西吗cdn的,我问这个的原因是我注意到我下载的mdb文件夹中有一些img文件夹和一些额外的东西。请帮忙。

0 投票
1 回答
58 浏览

javascript - Javascript .click() callback function apparently not called in Bootstrap accordion?

I'm working on updating a static website at www.peek.solutions which contains a Bootstrap accordion. I'm working on a branch (at https://github.com/khpeek/peek-solutions/tree/accordion-chevrons) in which I'm trying to add up/down-pointing chevrons to each list item which toggle according to whether it is expanded or not. I'm using Material Design icons (cf. https://materialdesignicons.com/bootstrap).

As a first stab at a solution, I'm trying to see whether I can even change the appearance of one icon. I've tried to illustrate it in a snippet below, but unfortunately, the icons don't render unless you download the fonts (as can be done by running npm install in the linked repository).

But basically, it seems that the problem is that the callback function of $('#accordion button).click() is not being called since if I set a debugger; trace in the body of that function, it does not pause in my browser.

Any ideas why this function is not getting called?

Update

It seems from experimenting in the console that calling .removeClass() on the material icon does not remove its class:

enter image description here

As you can see, it still as the 'mdi-chevron-up' class even after I've tried to remove it. Could this be the reason the icon is not changing?