CSS冲突。 CSS更改了我的<select>类

时间:2016-07-20 11:15:54

标签: javascript html css twitter-bootstrap laravel-5

我有一个带有SELECT的表单的Laravel站点: &lt; form method =&#34; POST&#34;行动=&#34; {{URL(&#39;管理/ createactivity&#39;)}}&#34;&GT;     &lt; div class =&#39; form-group&#39;&gt;         &lt; label for =&#34; name&#34;&gt; Name:&lt; / label&gt;         &lt; input type =&#34; text&#34;名称=&#34;名称&#34;类=&#34;形状控制&#34; value =&#34; {{old(&#39; name&#39;)}}&#34; /&GT;     &LT; / DIV&GT;     &lt; div class =&#34; form-group&#34;&gt;         &lt; label for =&#34; activitytype&#34;&gt;输入:&lt; / label&gt;         &lt; select name =&#34; activitytype&#34;类=&#34;形状控制&#34; value =&#34; {{old(&#39; activitytype&#39;)}}&#34;&gt;             &lt; option value =&#34; - &#34;&gt;选择一个&lt; / option&gt;             &LT; PHP                 foreach($ items as $ name =&gt; $ id){                     echo&#39;&lt; option value =&#34;&#39; 。 $ id。 &#39;&#34;&GT;&#39; 。 $ name。 &#39;&LT; /选项&GT;&#39 ;;                 }             ?&GT;         &LT; /选择&GT;     &LT; / DIV&GT;     &lt; div class =&#34; form-group&#34;&gt;         &lt; label for =&#34; description&#34;&gt;说明:&lt; / label&gt;         &lt; input type =&#34; text&#34;命名=&#34;描述&#34;类=&#34;形状控制&#34; value =&#34; {{old(&#39; description&#39;)}}&#34;&gt;     &LT; / DIV&GT;     &LT; DIV&GT;         &lt; button type =&#34;提交&#34; class =&#34; btn btn-primary&#34;&gt;创建&lt; / button&gt;     &LT; / DIV&GT; &LT; /形式&GT; 它使用Bootstrap类form-group和form-control,它们工作得非常好但是当我用这个表单加入页面时,SELECT突然将它从类控制更改为: &lt; span class =&#34; jcf-select jcf-unselectable jcf-select-form-control&#34;&gt;     &lt; select name =&#34; activitytype&#34; class =&#34; form-control jcf-reset-appearance&#34;值=&#34;&#34; style =&#34; position:absolute;身高:100%;宽度:100%;&#34;&gt;         &lt; option value =&#34; - &#34;&gt;选择一个&lt; / option&gt;         &lt; option value =&#34; 2&#34;&gt; Aqua&lt; / option&gt;         &lt; option value =&#34; 1&#34;&gt; HIIT&lt; / option&gt;     &LT; /选择&GT;     &lt; span class =&#34; jcf-select-text&#34;&gt;         &lt; span class =&#34;&#34;&gt;选择一个&lt; / span&gt;     &LT; /跨度&GT;     &lt; span class =&#34; jcf-select-opener&#34;&gt;&lt; / span&gt; &LT; /跨度&GT; 这使用了一些JavaScript文件作为&#39; jquery-1.11.3.min.js&#39;,&#39; query.main.js&#39;和&#39; plugins.js&#39;。我认为问题在于这些文件,特别是使用&#39; plugins.js&#39;,但我不知道如何修复它。 事情是在&#34;开始&#34;对于页面的加载,我可以使用Bootstrap类正确地看到SELECT字段,突然,在完全加载代码后,它会发生变化。 请帮忙。

1 个答案:

答案 0 :(得分:2)

您的代码转换清楚地表明您在某处包含 JCF - JavaScript Custom Forms 库:

describe("test", function () {    
    var element,
        scope,
        otherScope
        mockData = [
            {                
                isModalVisible: true
            },
            {                
                isModalVisible: false
            }
        ];

    beforeEach(angular.mock.module("myApp.directives"));

    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope.$new();
        scope.agg = mockData;

        element = "<test figures=\"agg\"></test>";
        element = $compile(element)(scope);

        angular.element(document.body).append(element);

        scope.$digest();

        otherScope = element.isolateScope();

        spyOn(otherScope, "init");
    }));    

    //This one doesn't work
    it("should close all modals by default", function () {
         expect(otherScope.init).toHaveBeenCalled();
    });
});

<span class="jcf-select jcf-unselectable jcf-select-form-control"> _____________^__________^________________^ <select name="activitytype" class="form-control jcf-reset-appearance" value="" style=...> ________________________________________________^ 内查看并确保评论所有plugins.js代码或将其删除,例如:

jcf

希望这有帮助。