CODEWITHSUNDEEP
iosangularinputclickionic2
Haydon
Haydon

Reputation: 1

input click event not working on IOS device with ionic 2 and angular2

I try to upload image with a in ionic 2 project . I need to customer the style and it's work with browser ,android. but it's not working on ios device.

I have try to set the style :cursor :point. but it's not woking too.
html:

 <div class="upload-box J_UploadBox"  (click)="fileSelect.click()">
    <input class="J_UploadData" type="hidden" value="">
    <div class="box-do"><ion-icon name="camera"></ion-icon>
      <span class="must-tip" style="display:none"></span></div>
    <div class="J_Views"><span class="tip">upload image</span></div>
  </div>
  </div>
  <div class="J_UploadInput" >
    <input type="file"   #fileSelect  (change)="onChange($event)"  accept="image/*">
  </div>

CSS:

enter image description here

is there anyone know why ? thanks

Upvotes: 0

Views: 1635

Answers (1)

wubbalubba
wubbalubba

Reputation: 707

I had a similar dilemma which I resolved it by placing the <input> inside of a <div> formatted like an Ionic button like so:

profile.page.html

<div ion-button class="fileUpload">
  <span>Choose Picture</span>
  <input #fileInput class="upload" type="file" (change)="fileChangeListener($event)" />
</div>

profile.page.scss

.fileUpload {
  position: relative;
  overflow: hidden;

  input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}

Upvotes: 1

Related Questions