사용자 정의 요소의 크기가 적절하지 않음

일부 데이터 전달을 처리하기 위해 사용자 정의 요소를 만들었습니다. 이 시점에서, 나는 div 스타일과 같은 행동을하기 위해 사용자 정의 요소를 사용할 수 있도록 스타일을 추가하고 싶습니다. 특히, 나는 그 중 하나에 테이블을 가지고 있는데, 데이터를 추가 할 때 페이지가 커지기를 원하지 않습니다. 사용자 정의 요소의 크기가 적절하지 않음

는 지금, 내 HTML은 같은 종류의 외모 :

<head> 
    <script> 
    var myProto = Object.create(HTMLElement.prototype); 
    myProto.method = function(){}; 

    document.register('my-element', {prototype: myProto}); 
    </script> 
</head> 
<body> 
    <my-element> 
    <table> 
     <tr><td>Foo</td><td>Bar</td><tr> 
     <tr><td>Foo</td><td>Bar</td><tr> 
     <tr><td>Foo</td><td>Bar</td><tr> 
     <tr><td>Foo</td><td>Bar</td><tr> 
    </table> 
    </my-element> 

    <script>/*Other Code*/</script> 
</body>

나는이 CSS 같은 것을 지정할 수 있도록 내가 스타일을 좋아하는 것 :

my-element{ 
    height : 200px; 
    overflow-x : scroll; 
}

문제가 있다는 것입니다 사용자 정의 요소는 내용물에 맞게 크기가 조정되지 않으므로 height 또는 overflow은 영향을 미치지 않습니다. 다른 요소와 같은

Fiddle.

출처

2014-10-02 ckersch

필요 없음을 CSS에서의 위해. –

너무 자바 스크립트에서 물건을 스타일링하는 데 사용 :) CSS를 수정하고 @ HakurHaf의 대답을 기반으로 바이올린을 추가했습니다. – ckersch

그냥 스타일을. 귀하의 CSS 구문이 유효하지 않습니다.

이 시도 :

my-element { 
    height:200px; 
    overflow-x:scroll; 
}

내 자신의 작업 예제 : http://jsfiddle.net/ynreuka1/

UPDATE를 : 귀하의 사용자 정의 요소는 블록 레벨 요소가 아닙니다. display:block;를 추가 한 후 작동 :

http://jsfiddle.net/ynreuka1/3/

또 다른 업데이트를, 특정 크기와 스크롤바로 :

http://jsfiddle.net/ynreuka1/4/

출처

2014-10-02 22:16:33 HaukurHaf

다른 문제가 있다고 생각합니다. 문제는 사용자 정의 요소가 내용에 맞게 크기가 조정되지 않아 스크롤 막대가 작동하지 않는 것 같습니다. 나는 당신의 바이올린을 수정했고 다음과 같은 이슈를 보여줍니다 : http://jsfiddle.net/ynreuka1/1/ – ckersch

방금 내 대답을 업데이트했습니다. – HaukurHaf

굉장하고 완벽하게 작동했습니다. – ckersch

사용자 정의 요소의 크기가 적절하지 않음

답변

관련 문제