Search code examples
csstwitter-bootstrapautocompletecodemirrorcodemirror-modes

Codemirror Autocomplete hidden behind bootstrap modal

I am having an issue with codemirror autocomplete in bootstrap modal, it gets hidden behind the modal. So it works but doesn't appear in top.

So far i have tried using css modifications such as:

.codeMirror-hints, .CodeMirror-hint, .CodeMirror-hint-active { 
    z-index:2147483647 !important;
    position:relative !important;
    background:white!important; 
}

but anything like this solution is not working, tried both

position : absolute

and

position : relative

but no luck. I am using bootstrap 3.0 and codemirror 5.20.0 if that helps. The annoying thing with codemirror is that autocomplete goes away as soon as i try to do inspect element. I am using Chrome latest Build and Firefox both with same problem.

Edit:

the following is the code for codemirror on modal show:

$('#cssModal').on('shown.bs.modal',function(){
            var textArea = document.getElementById('pageCss');
            var editor = CodeMirror.fromTextArea(textArea, {
                theme: 'monokai',
                extraKeys: { "Ctrl-Space": "autocomplete" },
                mode:{name: "text/css", globalVars: true},
                lineNumbers: true,
                htmlMode:true
            }); 
        });

following is the modal popup:

<div class="modal fade" id="cssModal" tabindex="-1" role="dialog" aria-labelledby="cssModal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="cssModal-label">@("<style>")</h4>
                </div>
                <div class="modal-body">
                    <textarea name="page_css" id="pageCss" class="form-control addon" rows="10">@Html.Raw(!string.IsNullOrEmpty(Model.page_css) ? Model.page_css : " ")</textarea>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title">@("</style>")</h4>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>

the codemirror plugin sequence

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/codemirror.min.js"></script>    
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/show-hint.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/xml-hint.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/html-hint.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/css-hint.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/javascript-hint.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/mode/css/css.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>

FYI: i am using asp.net mvc, if that helps.

Solution

  • I finally made it working, never thought that class name case-sensitivity could be an issue in css, i just had to replace

    .codeMirror-hints

    To

    .CodeMirror-hints

    what a weird thing to happen.