DragPanelExtender och ResizableControlExtender i FireFox 3

Idag på LIAn (sista veckan nu!) fick jag ta mig an att fixa några buggar vi upptäckt i FireFox 3 (som än så länge endast är släppt som release candidate). Problemen infann sig på en sida där man som administratör ska kunna flytta runt och ändra storlek på några element (DIVar) för att ställa in var de ska visas nånstans. Detta var förstås löst med Ajax Control Toolkit, närmare bestämt med extender-kontrollerna DragPanelExtender och ResizableControlExtender.

Det första problemet var att några utav de divar som skulle gå att flytta omkring la sig under en div som i själva verket bara hade som syfte att markera upp den yta varpå man kan placera de flyttbara divarna. Detta kunde man ganska enkelt lösa genom att kasta om div-arna i aspx-filen så att det som ska vara underst kommer först och det som ska vara överst kommer sist. Om du tänker dig att följande två Panels är absolutpositionerade så kommer den Panel som står sist i filen också att hamna överst;

<asp:Panel ID="pnlBackground" runat="server">
    <!-- Jag hamnar underst -->
</asp:Panel>

<asp:Panel ID="pnlDraggable" runat="server">
    <!-- Jag hamnar överst -->      
</asp:Panel>
      
<ajaxCTK:DragPanelExtender ID="dragpanel1" runat="server"
    TargetControlID="pnlDraggable" />
<ajaxCTK:ResizableControlExtender ID="resizable1" runat="server"
    TargetControlID="pnlDraggable"
    HandleCssClass="resizeHandle" />

Här ovan ser du även ajaxkontrollerna som kommer att göra det möjligt att flytta och ändra storlek på den sista Panel-kontrollen. Notera HandleCssClass i resize-kontrollen. Det andra problemet gällde nämligen just det här med att ändra storlek. I FireFox 3 gick det helt enkelt inte att få fatt och dra i resize-handtaget i nedre högra hörnet av varje div. När jag undersökte saken med hjälp av FireBug och jämförde mellan 2:an och 3:an upptäckte jag att inte heller FireBug registrerade att jag faktiskt valde "Inspect Element" på själva resize-handtaget. Så då kändes det ju logiskt att tro att även detta på något sätt hade hamnat "under" den omslutande diven. Mycket riktigt, genom att lägga till z-index i den klass som appliceras på resize-handtaget så fungerade det utmärkt:

    .resizeHandle
    {
        /.../
        z-index:5;
    }