2013-08-09 2 views
1

dom pdf로 가격표를 만들려고합니다. 가격 태그는 일부 div 컨테이너로 구성됩니다. 이 컨테이너들 중 하나에는 최대 높이가 있지만 이는 작동하지 않습니다. 이 컨테이너의 텍스트를 100 대신 200 단어가있는 텍스트로 변경하면 가격 태그의 비율이 높아집니다. 하지만 고정 된 높이가 필요합니다.Dompdf 최대 높이가 작동하지 않습니다.

이 문제가 있습니까?

HTML :

<html> 

    <head> 

<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div class="tag"> 
    <div class="header"> 
    Product 
    </div> 
    <div class="article"> 
    <div class="info">Lorem sd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 

    </div> 
    <div class="barcode"> 
    <p>Barcode</p> 
    </div> 



</div> 
</body> 
</html> 

CSS :

.tag { 
    border-style: solid; 
    min-width:11.5cm; 
    max-width:11.5cm; 
    max-height:3.5cm; 
    margin:0.1cm; 
    padding:0.1cm; 
} 
.header { 
    min-width:11.5cm; 
    max-width:11.5cm; 
    font-size:35px; 
    font-weight:bold; 
} 

.article { 
    min-width:11.5cm; 
    max-width:11.5cm; 

} 

.info { 

    float:left; 
    text-align:left; 
    min-width:7.5cm; 
    max-width:7.5cm; 
    min-height:2.0cm; 
    max-height:2.0cm; 
    font-size:10px; 
} 

.barcode { 
    text-align:center; 
    min-width:11.5cm; 
    max-width:11.5cm; 
}` 

.INFO 클래스와 .tag 클래스가 중요하다. 최대 너비가 올바르게 작동합니다.

+1

일부 HTML 및 CSS를 제공해 주시면 문제의 원인을 더 잘 이해할 수 있습니다. – JackSD

+0

HTML과 CSS를 추가했습니다. (나는 CSS 속성의 일부 복제본이 있다는 것을 알고있다. 이것은 단지 테스트 용이다.) – Marco

+0

'min-'과'max-height'가 동일하다는 것을 알면 왜'height'를 사용하지 않는가? – DarkBee

답변

1

높이를 원하면 height을 사용하고 고정 값을주고 여분의 데이터를 숨기려면 overflow: hidden을 사용하십시오. CSS에서

변경 :

.info { 
    overflow: hidden; 
    float:left; 
    text-align:left; 
    min-width:7.5cm; 
    max-width:7.5cm; 
    height:35px; 
    font-size:10px; 
} 

여기 예를 들어 작업을 참조하십시오 : FIDDLE

+0

좋아요. 시도해 보겠습니다. 내 유일한 문제는 내 솔루션이 Dompdf에서 작동하지 않고 Chrome, firefox 등의 브라우저에서 작동한다는 것입니다. – Marco

+0

변경 사항 없음, 동일한 결과. 'height'는 스케일링입니다. – Marco

0

나는 해결책을 찾아 냈다. 약간 혼란 스럽습니다. max-heightmin-height이 작동하지 않습니다. 높이만있는 솔루션을 사용하면 제대로 작동합니다.

@Aayushi Jain : 귀하의 솔루션이 작동하지만 유일한 문제는 내 브라우저가 새 버전 대신 캐시의 기존 CSS를 사용한다는 것입니다.

+0

@ aayay-jain의 답변이 받아 들여지면 해결책을 찾았습니다. – BrianS

+0

또한 예, 최대 높이 및 최소 높이가 완전히 지원되지 않습니다. 나는 그들이 이미지에 대해 잘 작동한다고 생각하지만 객체를 차단하지는 않습니다. – BrianS

관련 문제