Opened 11 years ago

Closed 11 years ago

#7149 closed defect (fixed)

BorderContainer: does not respect style applied from class

Reported by: ptwobrussell Owned by: Adam Peller
Priority: high Milestone: 1.2
Component: Dijit Version: 1.1.1
Keywords: Cc: ptwobrussell@…
Blocked By: Blocking:

Description

It appears that if you provide style to a BorderContainer? (as of r14379) via the class attribute that the BorderContainer? totally disregards it. (This isn't the case with BorderContainer? in 1.1.1 -- it's only an issue in the trunk.)

I've been able to isolate this down to where it can be reproduced pretty easily. Just apply the following patch to the test_BorderContainer.html file and open it up to see the results:

Index: test_BorderContainer.html
===================================================================
--- test_BorderContainer.html	(revision 14379)
+++ test_BorderContainer.html	(working copy)
@@ -19,6 +19,7 @@
 		#mondrian SPAN { display: none }
 		#mondrian:hover SPAN { display: inline }
 
+        .border1 {width: 90%; height: 300px; border: 2px solid blue;}
 	</style>
 
 	<!-- required: the default dijit theme: -->
@@ -60,8 +61,7 @@
 	<h2 class="testTitle">dijit.layout.BorderContainer tests</h2>
 	<p>Headline layout (default), left is constrained - min:150, max:250</p>
 
-	<div id="border1" dojoType="dijit.layout.BorderContainer"
-		style="width: 90%; height: 300px; border: 2px solid blue; ">
+	<div id="border1" class="border1" dojoType="dijit.layout.BorderContainer">
 		<div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; border: 15px black solid; height: 50px;" splitter="true">
 			top bar (resizable)
 		</div>

As you'll see, the layout (tested in FF3 and Safari 3.1 anyway) is quite different when you use a class to style the container.

Again, this appears to be a regression that has occurred sometime since 1.1.1, so it might be good to fix before 1.2 goes out since it'll catch a lot of people (like me) off guard. Maybe bill was already on top if it? If so, sorry for the clutter. Just wanted to make sure that it didn't go unmissed.

Change History (5)

comment:1 Changed 11 years ago by Adam Peller

Owner: set to Adam Peller
Status: newassigned

comment:2 Changed 11 years ago by bill

If you change the class of BorderContainer it's expected to stop working because dijit.css contains critical CSS rules for dijitBorderContainer and dijitBorderContainerNoGutter, and you are bypassing them.

I suppose you want BorderContainer? to have the same CSS as before (or at least, the same critical CSS like position:relative), but just override theme settings like border color. However, the code isn't setup to work that way. You could have a CSS rule based on id to do that, or an inline style. Not sure what to do beyond that.

comment:3 Changed 11 years ago by Adam Peller

dup of #7160?

comment:4 Changed 11 years ago by bill

Well, no, this ticket is actually claiming something different, that setting the class has no effect. It's just that I have trouble believing that's broken.

But, the code above isn't expected to work either since BorderContainer.domNode will lose important settings like position:relative.

comment:5 Changed 11 years ago by bill

Milestone: tbd1.2
Resolution: fixed
Status: assignedclosed
Summary: BorderContainer does not respect style applied from classBorderContainer: does not respect style applied from class

I fixed this by [14624].

Note: See TracTickets for help on using tickets.