Текст не отображается за файлом ввода

Я использую следующий код для создания окна загрузки файла. но текст справки внутри div с id 'uploadHelp' не отображается. Если я удалю позицию «абсолютный» из css, она начнет отображаться, но тогда поле загрузки файла не будет доступно, поскольку оно было покрыто div uploadHelp.Текст не отображается за файлом ввода

<html> 
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
    <style> 

    .cf-container{ 
     overflow-y:auto; 
     overflow-x:hidden; 
     height:192px; 
    } 
    #file-input-container { 
     width: 94%; 
     height: 80px; 
     border: 2px dashed rgb(202, 206, 223); 
     background: transparent; 
     border-radius: 4px; 
     color: #444; 
     font-weight: 400; 
     font-size: 16px; 
     margin: 15px; 
     overflow-x: hidden; 
    } 
    #file-input { 
      background: transparent; 
      border: none; 
      height: 100%; 
      width: 100%; 
      opacity: 0; 
      margin: 0; 
      cursor: pointer; 
    } 
    .cf-upload-help { 
     position: absolute; 
     z-index: -1; 
     text-align: center; 
     padding-top: 15px; 
     width: 90%; 
     margin: 0 auto; 
    } 
    </style> 
    <div> 
     <!-- Modal --> 
     <div class="modal fade" id="uploadModal" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true" 
       style="margin-top: 25px;" tabindex="-1"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-body" style="padding: 0px"> 
       <div style="text-align:center"> 
        <div id="file-input-container"> 
         <div class="cf-upload-help" id="uploadHelp"> 
          <div>Click to choose a file</div> 
          <div>or</div> 
          <div style="font-size:12px">Drop the file here</div> 
         </div> 
         <input type="file" id="file-input" /> 
        </div>     
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div> 
      <div style="width: 100%; text-align: center;padding-top: 50px;"> 
       <button id="showUpload">Upload</button> 
       </table> 
      </div> 
     </div> 
    </div> 

    <script> 
    $("#file-input").change(function() { 
     var input = document.getElementById("file-input"); 
     if (input.value) { 
      $("#uploadHelp").html("Uploading..."); 
     } 
    }); 

    $("#showUpload").click(function() { 
     $("#uploadModal").modal("show"); 
    }); 

    </script> 
</html>

Это облегченная версия кода, в полный код, я вижу текст в uploadHelp DIV, даже с позиции «абсолюта». Вот дополнительный код в полной версии -

$("#file-input").change(function() { 
     var input = $("#file-input"); 
     if (input.value) { 
      $("#uploadHelp").html("Uploaded"); 
     } 
    });

Но как только я выбираю файл, модальное окно становится пустым и ничего не отображается.

JSFiddle - https://jsfiddle.net/w949yg76/

источник

2015-04-23 cssnoob

Вы можете положить, что в jsfiddle для нас? – vdwijngaert

сделано. https://jsfiddle.net/w949yg76/ – cssnoob

Ваш z-index: -1; делает вид ниже модальным. Установите его на 0, и он работает для меня.

https://jsfiddle.net/w949yg76/1/

источник

2015-04-23 18:15:40 vdwijngaert

Спасибо. Он работает на скрипке JS. Но в исходном коде я все еще сталкиваюсь с той же проблемой. Как только я выбираю файл, ничего не отображается. Когда я проверяю div «uploadHelp» на консоли хром и снимите флажок с свойства width, текст становится видимым, но идет влево. Затем я проверяю его снова, и текст приходит в центр по желанию. Есть идеи? – cssnoob

Это странное поведение. Трудно найти виновника, если я не вижу оригинальный код/приложение. – vdwijngaert

Я узнал, что это только проблема с хром на mac. Я пробовал его на сафари и firefox, и он работает хорошо. Изменение размера хромированных окон вызывает текст. – cssnoob

Вы всегда можете дать главный контейнер фона Aswell.

#file-input-container { 
    background-image: url("insertimagelink"); 
}

Я создал шлепнуть для demonstrate- http://plnkr.co/v2iEkuyWioT6GbJIF0VC

источник

2015-04-23 18:56:54

Текст не отображается за файлом ввода

ответ

Смежные вопросы