0

I am developing a web application built off of Bootstrap 3.2.0. Everything is working just fine except that all my input arrays are not able to be edited within Firefox 33.1 (Safari 8.0 and Chrome 38.0.2125.122 work fine).

My settings page is looks like this:

<!-- Tab panes -->

<form method="post" class="form-horizontal" role="form">

    ...

    <div class="tab-content">
         <div role="tabpanel" class="tab-pane" id="social">

            <button type="button" class="social-add btn btn-success"><span class="glyphicon glyphicon-plus"></span> Add Social Icon</button>
            <br/><br/>

            <!-- Social Icons -->

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Social Icons</h3>
                </div>
            <div class="social-div panel-body">

                // Loop ...

                <div class="social-divs form-group">
                        <label class="col-sm-1"><span class="glyphicon glyphicon-move pull-right"></span></label>
                        <div class="col-sm-11">
                            <div class="col-sm-3">
                                <select name="social-type[]" class="form-control">
                                    // Loop ...
                                    <option value="...">...</option>
                                    // End Loop ...
                                 </select>
                            </div>

                            <div class="col-sm-6">
                                <input name="social-link[]" class="form-control" type="text" value="...">
                            </div>

                            <div class="col-sm-3">
                                <button type="button" class="social-remove btn btn-danger"><span class="glyphicon glyphicon-minus"></span> Remove</button>
                            </div>

                        </div>
                    </div>

                // End Loop ...

            </div>
        </div>
    </div>

    ...

</form>

As you can see I am using the HTML input array method to get all social icons since the user dynamically creates them and can reorder them. This all works perfect in Safari and Chrome as mentioned before, but the select box and textfield are not able to be edited in Firefox.

The weird thing is that if I just had:

<input name="social-link[]" class="form-control" type="text" value="...">

outside of a Bootstrap panel and tab system then the textfield is editable. So there must be some compatibility issues with Firefox and Bootstrap Panels or Tabs.

Thanks for your help in advance :)

Community
  • 1
  • 1
Kyle
  • 227
  • 2
  • 12
  • Could you create an example (fiddle, bootply, inline) that show the issue? I found no problem when using your code with Firefox 33.0 – Bass Jobsen Nov 20 '14 at 11:01
  • Thanks for the comment, and you are correct. I created a bootply http://www.bootply.com/XM8EmcewWl that shows off the code, and it works across the three main browsers. The only other variable that could affecting it is that I am using this code in WordPress. Do you think that could have anything to do with it? – Kyle Nov 20 '14 at 13:51
  • After further debugging there seems to be an issue with have sortable divs in a panel. Is this a known or common issue? – Kyle Nov 20 '14 at 14:04
  • First, wordpress (plugins and themes) add their own CSS and Javascript which can disturb your code in some manner. I'm not sure what you mean with sortable divs (is that a new issue?). – Bass Jobsen Nov 20 '14 at 14:30

1 Answers1

0

I was able to determine that it was the way I was calling jQuery sortable on a div container. Firefox does not like when you call disableSelection() on all sortable elements like this:

$("#sort").sortable().disableSelection();

So instead just use:

$("#sort").sortable();

A much better thread can be found here.

Kyle
  • 227
  • 2
  • 12