소개

2019년 Advent Calendar에서 공개한 좋아! 플러그인 EX 에서 선택할 수 있는 아이콘을 늘렸습니다.




아이콘을 스페이스 요소 내에 표시하는 경우에 세로 위치를 중앙 정렬하는데 당황했으므로 메모해 둡니다.

예를 들면 이런 코드입니다. 이 때 세로 위치가 중앙 정렬되지 않습니다.

(($) => {
  kintone.events.on("app.record.detail.show", (event) => {
    const element = kintone.app.record.getSpaceElement("space");
    $(element).append("<span><button>ボタン</button></span>");

    return event;
  });
})(jQuery);

height를 지정할 수 있는 경우

상위 요소의 span에 다음을 설정하면 중앙 정렬할 수 있습니다.

display: inline-flex;
height: 66px;
justify-content: center;
align-items: center;

height를 지정할 수 없는 경우

상위 요소의 span에 다음을 설정하면 중앙 정렬할 수 있습니다.

position: absolute;
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;