ASP.NET에서 중첩 패널 컨트롤을 스타일링하는 방법

StackOverflow https://stackoverflow.com/questions/903002

  •  05-09-2019
  •  | 
  •  

문제

패널이 Div에 앉아 있는데 패널을 더 많은 패널을 추가하기 위해 컨테이너로 사용하고 싶습니다! 패널에 패널을 추가하고 싶은 이유는 무엇입니까? 기존 패널에 추가하는 패널은 객체와 이미지와 레이블 만 포함하도록 만들어졌습니다.

기존 마스터 컨테이너 패널은 설계 시간 동안 생성되며 "ToolboxPanel"이라는 멋진 이름으로 만듭니다. 런타임 동안, 이미지, 레이블을 동적으로 생성하고 패널에 둘 다 추가 한 다음 여기에서 볼 수 있듯이 해당 패널을 도구 박스 패널에 추가하는 For/Next 루프가 있습니다.

For i = 0 To imageholder.Count - 1 'create a control
        insertpanel = New Panel 'these object types have been DIM'd up above
        insertimage = New Image
        inserttext = New Label
        inserttext.ID = "text" + partnumberholder(i) + i.ToString 'the "holder" arrays hold the goodies from my db
        inserttext.Text = brandholder(i) + " " + partnumberholder(i)
        insertimage.ID = "image" + partnumberholder(i) + i.ToString
        insertimage.ImageUrl = ".\Images\Display\" + imageholder(i) + ".jpg"
        insertpanel.CssClass = "drag" 'this allows the panel to be dragged around using a JQuery script elsewhere
        'insertpanel.BackImageUrl = "~\Images\Display\" + imageholder(i) + ".jpg" 'commented out because this method looks awful
        insertpanel.ID = "panel" + partnumberholder(i) + i.ToString

        insertpanel.Controls.Add(insertimage)
        insertpanel.Controls.Add(inserttext)
        toolboxpanel.Controls.Add(insertpanel)
    Next

문제는 패널에 추가 한 각 패널이 1 개의 열로 채워져 최대 높이가 700px에 불과하다고 말하는 ToolboxPanel의 CSS 규칙을 완전히 위반한다는 것입니다. 그것은 패널을 늘리고, 그 자리가 들어간 것보다 더 높은 길로 뻗어있는 것 같습니다!

내 주요 질문은 다음과 같습니다.

1) 3 개의 열, 고정식 높이 및 깔끔한 스크롤 막대로 표시되는 방식으로 메인 패널에 패널 객체 (내 이미지/레이블 내장)를 추가 할 수 있도록 어떻게해야합니까?

2) 더 좋은 방법이 있습니까? 다음이 있어야합니다 :(

홈페이지에서 현재 혼란을 볼 수 있습니다. http://www.mobiuspc.com

도움이 주셔서 감사합니다! 계산서

도움이 되었습니까?

해결책

두 가지가 필요합니다.

  1. ㅏ Clearfix 스타일 시트
  2. 내부 패널을 떠 다니기 위해

플로팅은 단순하지만 때로는 처음에는 조금 어려울 수 있습니다. 이 튜토리얼을 읽으십시오 그들에 관한 모든 것을 배우기 위해 수레에.

기본적으로 내부 패널 스타일에 다음 스타일을 추가하기 만하면됩니다.

float: left;

플로팅은 자동으로 DIV와 모든 내용을 가능한 한 좁게 만듭니다. 너비를 지정합니다, 당신이 이미 가지고있는 것처럼.

다음으로 Clearfix 스타일을 외부 패널에 적용하여 내부의 모든 부유 함 내용물이 "단두대 효과"로 어려움을 겪지 않도록해야합니다. 플로팅 블록에는 "레이아웃"이 없기 때문에 일반 문서 흐름의 일부가 아니므로 부모 용기에 의해 무시됩니다. Clearfix는 컨테이너가 플로트가 레이아웃이있는 것으로 인식하도록함으로써이를 해결합니다.

다른 팁

패널은 일반적으로 항상 DIV 태그로 렌더링해야하지만 ID는 이름 지정 컨테이너에 의해 구식이되므로 CSSCLASS 속성을 추가하기가 더 쉽습니다. CSS를 이에 따라 설정합니다.

오버 포우가 스크롤을 허용하려면 위치를 유지하고 높이를 설정하여이를 허용합니다.

.myContainter {
    position: relative; /* or absolute, or a float */
    height: 700px;
    overflow: auto;
}

해야합니다. :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top