Angular UI bootstrap progressbar最小宽度

作者：郑谊099_448 | 2023-09-08 16:23

如何解决《AngularUIbootstrapprogressbar最小宽度》经验，为你挑选了1个好方法。

我试图设置角度UI引导程序进度条的最小宽度.我检查了文档,他们没有提到如何做到这一点.我知道'常规'引导程序你可以使用类似的东西.但是这只有在你将它包装在标准进度引导div中时才有效:


    
     text

但是这会显示一个没有"活动"动画的进度条,因为常规引导程序不支持此功能.当我这样尝试它时,它没有设置min-width属性


     text

编辑:我忽略了'常规'bootstrap文档中的动画部分.但是,如果可能的话,我想使用UI引导程序进度条.

1> wil93..：

常规Bootstrap 支持动画进度条.

您确定您正确导入了Boostrap文件吗？我想你可能只包括CSS文件而不包括JS.查看基本模板以查看应包含哪些文件.

另请参阅uib-progressbar文档.你写的代码片段似乎是正确的.正如我所说,我认为这个问题的原因是你没有包含Bootstrap的JS文件.

编辑:哦,ui-bootstrap显然不需要Bootstrap的JS,你是对的.

关于min-width你问题的一部分:我注意到你把这个progress-bar类添加到了元素中.根据该文件,所述progress-bar类不应该使用(它将被UI的自举被添加到

将要呈现的元素内 ,并且可以很容易地通过检查进度条宽度devtools验证).

因此,该min-width属性将应用于内部

.但是,由于渲染是由角度管理的,因此更改它的唯一方法是添加如下的CSS规则:

.setminwidth .progress-bar {
    min-width: 20em;
}

然后将新setminwidth类添加到外部,如下所示:

22%

我测试了这个,但它似乎不起作用.我认为这是因为min-width: 0; 在模板中进行了硬编码,并且每次ui-bootstrap重新渲染元素时它都会被重置.

我尝试添加!important到CSS规则,以避免被覆盖,但它也不起作用.

我想在这一点上你应该考虑为什么你需要添加这个min-width属性,因为ui-bootstrap喜欢覆盖它.可能是因为当%不足时你不希望进度条"太空"？如果是这种情况,我认为你应该查看Bootstrap最近引入的变化:现在它们似乎添加了min-width0%,1%和2%的特殊值.

UPD:Bootstrap人显然改变了主意并恢复了特殊min-width价值.在这一点上,我认为ui-bootstrap应该跟随并删除硬编码,min-width: 0;因为它不再需要了.我刚给他们发了拉请求.如果他们合并它,您将能够使用我上面发布的CSS.

推荐阅读

程序员
如何禁止转让

如何解决《如何禁止转让》经验，为你挑选了1个好方法。 ... [详细]
程序员
根据作为模板参数的函数的返回值避免分支

如何解决《根据作为模板参数的函数的返回值避免分支》经验，为你挑选了0个好方法。 ... [详细]
程序员
无法打开作为链接添加的configSource文件

如何解决《无法打开作为链接添加的configSource文件》经验，为你挑选了3个好方法。 ... [详细]
程序员
Google Cloud Logging中的Dataproc Spark作业输出

如何解决《GoogleCloudLogging中的DataprocSpark作业输出》经验，为你挑选了1个好方法。 ... [详细]
程序员
我怎样才能限制角度$ q承诺并发？

如何解决《我怎样才能限制角度$q承诺并发？》经验，为你挑选了0个好方法。 ... [详细]
程序员
Plotly:循环中的add_trace

如何解决《Plotly:循环中的add_trace》经验，为你挑选了2个好方法。 ... [详细]
程序员
卸载组件时取消图像加载

如何解决《卸载组件时取消图像加载》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在hadoop工作中优化改组/排序阶段

如何解决《如何在hadoop工作中优化改组/排序阶段》经验，为你挑选了1个好方法。 ... [详细]
程序员
按钮:使用JavaScript和CSS激活

如何解决《按钮:使用JavaScript和CSS激活》经验，为你挑选了1个好方法。 ... [详细]
程序员
包裹在pango的词用混杂的脚本

如何解决《包裹在pango的词用混杂的脚本》经验，为你挑选了1个好方法。 ... [详细]
程序员
rgl矢量图:显示正交矢量的直角

如何解决《rgl矢量图:显示正交矢量的直角》经验，为你挑选了0个好方法。 ... [详细]
程序员
Rails，如何测试缺少参数的400个响应

如何解决《Rails，如何测试缺少参数的400个响应》经验，为你挑选了0个好方法。 ... [详细]
程序员
Android Windows:它们何时以及如何创建？

如何解决《AndroidWindows:它们何时以及如何创建？》经验，为你挑选了0个好方法。 ... [详细]
程序员
在编译时使用给定函数初始化纯2D数组

如何解决《在编译时使用给定函数初始化纯2D数组》经验，为你挑选了0个好方法。 ... [详细]
程序员
为什么我的表单提交代码不执行？

如何解决《为什么我的表单提交代码不执行？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如果按下按钮,如何从调用的方法获取返回值？

如何解决《如果按下按钮,如何从调用的方法获取返回值？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Jenkins Slave - 如何添加或更新环境变量

如何解决《JenkinsSlave-如何添加或更新环境变量》经验，为你挑选了0个好方法。 ... [详细]
程序员
为什么TimedRotatingFileHandler无法正常工作以及如何在日志行中解决此问题(轮换正在工作,但缺少日志行)

如何解决《为什么TimedRotatingFileHandler无法正常工作以及如何在日志行中解决此问题(轮换正在工作,但缺少日志行)》经验，为你挑选了1个好方法。 ... [详细]
程序员
Travis CI突然失败：找不到conda命令

如何解决《TravisCI突然失败：找不到conda命令》经验，为你挑选了1个好方法。 ... [详细]
程序员
将功能分为验证和实施？为什么？

如何解决《将功能分为验证和实施？为什么？》经验，为你挑选了2个好方法。 ... [详细]

郑谊099_448

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

DevBox开发工具箱 | 专业的在线开发工具网站