# <FullCalendar> 태그를 <ion-content> 태그 안에 사용시, 화면이 적당하게 표시되지 않음

- 원인 : <ion-content>가 load되는 시점하고, full-calendar가 load 되는 시점이 다른 듯 하다.

- 해결책 : <ion-content></ion-content>를 삭제 후, <div style="height:100%"></div>로 대체 

- 출처 :

 

# <FullCanlendar> 태그가 포함된 Component 상에서, custom css가 먹히지 않음

- 원인 : Angular는 기본적으로 View Encapsulation이라는 작업이 되어 있어, 커스텀 컴포넌트나 모듈 내에 속하는 Style 속성을 외부로부터 접근하기 어렵도록 보호하고 있다. 그렇기 때문에, 커스텀 컴포넌트를 사용하는 컴포넌트가 커스텀 컴포넌트에 영향을 주는 css를 일반적으로 적용하면 적용이되지 않는 것이다.

- 해결책 : " overwrite some of the CSS properties of the child components " 자식 컴포넌트의 css 속성을 덮어씌울 수 있도록 도와 주는 ::ng-deep prefix를 사용한다.

- 예제 :

Component css:

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

Component template:

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

Resulting (Angular generated) css:

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

- 출처 : https://stackoverflow.com/questions/46786986/how-and-where-to-use-ng-deep


# ios run/deploy 시 이슈사항


# ios 실행 시, Cannot find module 'unorm' 문제

cordova platform rm ios

cordova platform add ios@latest

- 출처 : https://stackoverflow.com/questions/49522649/cordova-cant-add-plugin-error-cannot-find-module-unorm


xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Developer/CommandLineTools’ is a command line tools instance

xcode-select — installsudo xcode-select -s /Applications/Xcode.app/Contents/Developersudo xcodebuild -license accept

-출처 : https://medium.com/@vschroeder/xcode-select-error-tool-xcodebuild-requires-xcode-but-active-developer-directory-fb7d3408c80b


# Modal Popover 형태 변경시, 높이 스타일 조절 문제

modal controller가 아닌 popover controller로 변경 후, 아래의 스타일 global.scss 상에 적용 및 "dialog-modal" class 적용

.dialog-modal {
div.popover-content {
width: 90% !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
}


출처 : https://forum.ionicframework.com/t/how-to-center-a-popover-horizontally-on-ios/175666

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기