Кнопка перекрытия заголовка

Я пытаюсь внедрить кросс-платформенное мобильное приложение через apache cordova на VS 2015. Проблема заключается в том, что заголовок перекрывает кнопку как-то. Я проверил файлы CSS и js-файл, но не смог решить проблему. Любые подсказки?Кнопка перекрытия заголовка

Вот мой пример индексного файла:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 

    <meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://ip/wcf/OCRService.svc 'unsafe-eval' 'unsafe-inline'; default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 

    <title>LoTTo</title> 

    <!-- LoTTo references --> 

    <link href="css/ionicons.css" rel="stylesheet" /> 
    <link href="css/ionic.css" rel="stylesheet" /> 
    <link href="css/ng-img-crop.css" rel="stylesheet" /> 

    <!-- Cordova reference, this is added to your app when it's built. --> 

    <script src="scripts/angular.min.js"></script> 
    <script src="scripts/ionic.bundle.js"></script> 
    <script src="scripts/ng-cordova.min.js"></script> 
    <script src="scripts/ng-img-crop.js"></script> 
    <!--<script src="cordova.js"></script>--> 
    <script src="scripts/platformOverrides.js"></script> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/index.js"></script> 
    <!--<script src="scripts/angular-ios9-uiwebview.patch.js"></script>--> 
    <script src="scripts/ng-file-upload-shim.min.js"></script> 
    <script src="scripts/ng-file-upload.min.js"></script> 


    <style> 
     .cropArea { 
      background: #E4E4E4; 
      overflow: hidden; 
      width: 300px; 
      height: 300px; 
     } 
    </style> 
</head> 
<body ng-app="starter"> 
    <ion-header-bar class="bar bar-header bar-light"> 
     <h1 class="title">LoTTo</h1> 
    </ion-header-bar> 
    <ion-content ng-controller="ExampleController" padding="true"> 
     <button class="button button-full button-balanced icon-right ion-ios-camera" ng-click="takePhoto()"> 
      Resim Çek 
     </button> 

     <button class="button button-full button-balanced icon-right ion-images" ng-click="choosePhoto()"> 
      Resim Seç 
     </button> 
     <center> 
      <div class="cropArea"> 

       <img-crop image="myImage" result-image="myCroppedImage" change-on-fly="false" 
          area-type="rectangle" 
          area-min-size="100" 
          result-image-format="image/jpeg" 
          result-image-quality="1" 
          result-image-size="300"></img-crop> 
      </div> 
      <div ng-show="myImage !== undefined">Gönderilecek Resim:</div> 

      <div><img ng-src="{{myCroppedImage}}" ng-show="myImage !== undefined" id="image" /></div> 

     </center> 
     <button class="button button-full button-balanced icon-right ion-images" ng-click="upload(myCroppedImage)" ng-if="myImage !== undefined"> 
      Resim Yükle 
     </button> 


    </ion-content> 

</body> 
</html>

Заранее спасибо & С наилучшими пожеланиями.

Вот пульсирующий выход: overlap image

Edit 1: Если я раскомментировать cordova.js из заголовка, кнопка исчезает полностью. Вот пульсация выход: disappear image

источник

2015-11-30 Cenk

Вам нужно добавить маржу ниже элемента h1

h1.title { 
    margin-bottom: 20px; 
}

Это добавит еще некоторое пространство перед кнопками.

источник

2015-11-30 21:52:44

Привет @ Рихард Гамильтон, я добавил ваш код в ionic.css, но он не работает. Что-то ломает его, но я не мог найти. Если я раскомментирую '- ' cordova в заголовке, кнопка полностью идет под заголовком. – Cenk

Я думаю, что это связано с этим [ссылка] (http://stackoverflow.com/questions/27614857/ngimgcrop-dependency-injection-not-working-properly-in-angularjs). Я проверю и дам вам знать. – Cenk

Да, это было связано с ng-img-crop.js, как я сказал в своем предыдущем посте. Теперь все выглядит нормально! – Cenk

Кнопка перекрытия заголовка

ответ

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