none
DIV DINÂMICA; IFRAME; PDF - Incompatibilidade de navegadores (Explorer X Firefox) RRS feed

  • Pergunta

  • Pessoal,

    Estou há semana tentando encontrar uma solução que seja viável para os navegadores Explorer e Firefox. No final da página, há uma div principal e dentro desta div principal, há 2 div's: a esquerda e a direita. Na div esquerda há uma árvore com os links para a exibição de documentos do formato PDF. A exibição dos documentos ocorre na div direita. A div esquerda possui tamanho por volta 300px e o tamanho da div direita é100%. No meio das duas divs, há um botão "CSS" que serve para ocultar e mostrar documentos. Quando é pressionado, a div esquerda é ocultada e a div direita é expandida. Quando é pressionado novamente, a div esquerda retorna para o seu lugar e a div direita também. No Internet Explorer, funciona perfeitamente. Porém no Firefox, o PDF mostra um tamanho reduzido em relação ao Explorer e quando é pressionado o botão para ocultar ou mostrar a div esquerda, a div direita não expande. 

    De acordo com o código abaixo, no item em negrito, onde ocorre o problema no Firefox:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DocumentViewer.ascx.cs"
    
        Inherits="MPS.GED.WebSite.Controles.DocumentViewer" %>
    
    <style type="text/css">
    
        div.treeView
    
        {
    
            float: left;
    
            display: block;
    
            width: 300px;
    
        }
    
        div.visualizar
    
        {
    
        }
    
        div.frame
    
        {
    
            float: right;
    
        }
    
        .iframe
    
        {
    
            padding-left: 0;
    
            width: 100%;
    
            height: 400px;
    
        }
    
        div.verticaltext
    
        {
    
            float: left;
    
            writing-mode: tb-rl;
    
            filter: flipv fliph;
    
            width: 20px;
    
            direction: rtl;
    
            cursor: hand;
    
            background-color: Black;
    
            color: White;
    
            padding: 5px 0px 5px 0px;
    
        }
    
        .topo
    
        {
    
            vertical-align: top;
    
        }
    
    </style>
    
    <asp:ObjectDataSource ID="ObjectDataSourceTipoPeca" runat="server" SelectMethod="SelecionarTodos"
    
        TypeName="MPS.GED.Servicos.TipoPecaServico"></asp:ObjectDataSource>
    
    <asp:Literal runat="server" ID="TituloLiteral">    
    
    </asp:Literal>
    
    <asp:Panel ID="PanelAviso" runat="server" CssClass="warning" Visible="false">
    
        <asp:Label ID="LabelAviso" runat="server" Visible="false" Text="Nenhum documento encontrado no volume."></asp:Label>
    
    </asp:Panel>
    
    <asp:Panel ID="PanelPrincipal" runat="server" Visible="true">
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    
            <ContentTemplate>
    
                <div class="treeView">
    
                    <asp:Panel runat="server" ID="TreeViewPanel" class="treeView">
    
                        <asp:Label ID="lblTipoPeca" runat="server" Text="Tipo de peça: " />
    
                        <asp:HiddenField ID="idVolumeHF" runat="server" />
    
                        <mps:DropDownListCustom ID="TipoPecaDropDownList" runat="server" OnSelectedIndexChanged="TipoPecaDropDownList_SelectedIndexChanged"
    
                            DataSourceID="ObjectDataSourceTipoPeca" AutoPostBack="true" AppendDataBoundItems="true"
    
                            DataTextField="Descricao" DataValueField="Id" Width="180px">
    
                            <asp:ListItem Text="Todos" Value="" />
    
                        </mps:DropDownListCustom>
    
                        <br />
    
                        <br />
    
                        <asp:HyperLink ID="ImprimirTodosHyperLink" runat="server" Visible="false" Text="Imprimir todos"
    
                            ForeColor="Black" ToolTip="Materializar processo" Target="_blank" />
    
                        <br />
    
                        <br />
    
                        <asp:TreeView ID="TreeView1" runat="server" ForeColor="Black" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
    
                            <RootNodeStyle Font-Bold="true" Font-Size="Smaller" />
    
                            <NodeStyle Font-Size="X-Small" Width="300px" />
    
                        </asp:TreeView>
    
                    </asp:Panel>
    
                </div>
    
                <asp:Panel runat="server" ID="FramePanel" class="visualizar">
    
                    <asp:Panel ID="TreeViewHeaderPanel" runat="server" class="verticaltext">
    
                    </asp:Panel>
    
                    <asp:Panel runat="server" ID="PDF" class="frame">
    
                        <iframe id="pdfFrame" runat="server" src="" class="iframe" onclick="return pdfFrame_onclick()"></iframe>
    
                    </asp:Panel>
    
                </asp:Panel>
    
                <ajax:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="TreeViewPanel"
    
                    CollapsedSize="0" ExpandedSize="300" Collapsed="False" ExpandControlID="TreeViewHeaderPanel"
    
                    CollapseControlID="TreeViewHeaderPanel" AutoCollapse="False" AutoExpand="False"
    
                    ScrollContents="False" TextLabelID="TreeViewHeaderPanel" CollapsedText="Exibir Documentos"
    
                    ExpandedText="Ocultar Documentos" ExpandDirection="Horizontal" />
    
            </ContentTemplate>
    
        </asp:UpdatePanel>
    
    </asp:Panel>


    Me ajudem, por favor.

    Grato.


    sexta-feira, 27 de abril de 2012 09:12