HTML page with fixed header and footer in ASP.Net

ilanocf

SOLVED CLOSED ACTIVE ANSWERED
User: ilanocf
Posted: on May 14, 2023 11:20 PM
Forum: ASP.Net Web Forms
Replies: 5
Views: 3938

Hey guys,

I'm trying to enhance an HTML page that has fixed headers and footers and where the content displayed between the two does not conflict, that is, they are not overlapping. In the model I made, the header and footer are fixed but the content collides with both to the point that when there is a page break, the content overlaps the footer.

Partial Class ci_relatorios_relMeuDoc
    Inherits System.Web.UI.Page
    Private Documentos As New CENTEC.objDocumento
    Private Fn As New Funcoes.classFuncao

    Private Sub RecebeParametros()
        If Not Request("relID") Is Nothing Then
            ViewState("vlrID") = Request("relID")
        Else
            If Request("relID") Is Nothing Then
                ViewState("vlrID") = 0
            End If
        End If

        If Not Request("relTdoc") Is Nothing Then
            ViewState("vlrdoc") = Request("relTdoc")
        Else
            If Request("relTdoc") Is Nothing Then
                ViewState("vlrTdoc") = 0
            End If
        End If

    End Sub

    Private Sub PovoaDocumentos()
        Dim Ds As Data.DataSet
        Dim pSQL As String = "SET LANGUAGE BRAZILIAN " &
                            " SELECT A.ID, A.ASSUNTO, " &
                            " NUMERODOC = CONCAT(REPLICATE('0', 3 - LEN(CAST(A.NUMERO AS VARCHAR))) + CAST(A.NUMERO AS VARCHAR), '/', YEAR(A.DTCRIACAO)), " &
                            " USUORIGEM = B.NOME, SETOR_ORIGEM = H.DESCRICAO, USUDESTINO = C.NOME, SETOR_DESTINO = L.DESCRICAO, " &
                            " DATA_CRIACAO = CONVERT(VARCHAR(10), A.DTCRIACAO, 103), TIPO_DOCUMENTO = D.NOME, TEXTO = CONVERT(VARCHAR(MAX), A.TEXTO) " &
                            " FROM ZMDDOCUMENTO A(NOLOCK) " &
                            " INNER JOIN PFUNC B(NOLOCK) ON (B.CHAPA = A.CODUSUARIOORIGEM) " &
                            " INNER JOIN PFCOMPL BB(NOLOCK) ON (BB.CHAPA = B.CHAPA And BB.CODCOLIGADA = B.CODCOLIGADA) " &
                            " INNER JOIN PFUNC C(NOLOCK) ON (C.CHAPA = A.CODUSUARIOADESTINO) " &
                            " INNER JOIN PFCOMPL CC(NOLOCK) ON (CC.CHAPA = C.CHAPA And CC.CODCOLIGADA = C.CODCOLIGADA) " &
                            " INNER JOIN ZMDTIPODOCUMENTO D (NOLOCK) ON (D .ID = A.TIPODOCUMENTO) " &
                            " INNER JOIN PSECAO E(NOLOCK) ON (E.CODIGO = B.CODSECAO And E.CODCOLIGADA = B.CODCOLIGADA) " &
                            " INNER JOIN PFUNCAO F(NOLOCK) ON (F.CODIGO = B.CODFUNCAO And F.CODCOLIGADA = B.CODCOLIGADA) " &
                            " INNER JOIN GDEPTO G(NOLOCK) ON (G.CODDEPARTAMENTO = E.CODDEPTO And G.CODFILIAL = E.CODFILIAL And G.CODCOLIGADA = E.CODCOLIGADA) " &
                            " INNER JOIN GCONSIST H ON (H.CODCLIENTE = BB.SETORCENTEC And H.CODTABELA = 'SETCENTEC') " &
                            " INNER JOIN PSECAO I(NOLOCK) ON (I.CODIGO = C.CODSECAO AND I.CODCOLIGADA = C.CODCOLIGADA) " &
                            " INNER JOIN PFUNCAO J(NOLOCK) ON (J.CODIGO = C.CODFUNCAO AND J.CODCOLIGADA = C.CODCOLIGADA) " &
                            " INNER JOIN GDEPTO K(NOLOCK) ON (K.CODDEPARTAMENTO = I.CODDEPTO AND K.CODFILIAL = I.CODFILIAL AND K.CODCOLIGADA = I.CODCOLIGADA) " &
                            " INNER JOIN GCONSIST L ON (L.CODCLIENTE = CC.SETORCENTEC AND L.CODTABELA = 'SETCENTEC') " &
                            " WHERE A.ID IN (" & ViewState("vlrID") & ") " &
                            " ORDER BY A.ID "

        Ds = Documentos.ConsultaGenerica(pSQL)

        If Not Ds Is Nothing Then
            Dim pHeader As String = DBNull.Value.ToString
            Dim pConteudo As String = DBNull.Value.ToString
            Dim pFooter As String = DBNull.Value.ToString

            If Ds.Tables(0).Rows.Count > 0 Then

                pHeader = "<table width='100%' border='1' cellpadding='0' cellspacing='0'>" &
                          "<tr>" &
                          "<td colspan = '2' style='font-size:14pt; text-align:center; font-weight:bold; padding:10px; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' >" & UCase(Ds.Tables(0).Rows(0)("TIPO_DOCUMENTO")) & "</td>" &
                          "</tr>" &
                          "<tr>" &
                          "<td valign='top' width='50%' style='font-size:11pt; text-align:left; padding:0px 5px 0px 5px; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>De:</b> " & Ds.Tables(0).Rows(0)("USUORIGEM") & "<br />" & Ds.Tables(0).Rows(0)("SETOR_ORIGEM") & "</td>" &
                          "<td valign='top' width='50%' style='font-size:11pt; text-align:left; padding:0px 5px 0px 5px; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>Para:</b> " & Ds.Tables(0).Rows(0)("USUDESTINO") & "<br />" & Ds.Tables(0).Rows(0)("SETOR_DESTINO") & "</td>" &
                          "</tr>" &
                          "<tr>" &
                          "<td valign='top' colspan='2' style='font-size:11pt; text-align:left; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>Assunto:</b> " & Ds.Tables(0).Rows(0)("ASSUNTO") & "</td>" &
                          "</tr>" &
                          "</table>"

                pConteudo = "<br /><br />" & Server.HtmlDecode(Ds.Tables(0).Rows(0)("TEXTO"))

                Dim htmlContent As String = "<html>" & vbCrLf &
                             "<head>" & vbCrLf &
                             "<style>" & vbCrLf &
                             "header { height: auto; position: fixed; top: 0; left: 0; width: 100%; }" & vbCrLf &
                             "footer { height: 50px; position: fixed; bottom: 0; left: 0; width: 100%; }" & vbCrLf &
                             "footer .page:after { content: counter(page); }" & vbCrLf &
                             "</style>" & vbCrLf &
                             "</head>" & vbCrLf &
                             "<body>" & vbCrLf &
                             "<header>" & pHeader & "</header>" & vbCrLf &
                             "<div style='margin-top: 80px; margin-bottom: 50px;'>" & pConteudo & "</div>" & vbCrLf &
                             "<footer><div class='page'>Page</div></footer>" & vbCrLf &
                             "</body>" & vbCrLf &
                             "</html>"

                ' Write the HTML content to a file
                'File.WriteAllText("page.html", htmlContent)
                LbConteudo.Text += htmlContent

            End If
        End If


    End Sub

    Private Sub ci_relatorios_relMeuDoc_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            RecebeParametros()
            PovoaDocumentos()

        End If

    End Sub

End Class

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="relMeuDoc.aspx.vb" Inherits="ci_relatorios_relMeuDoc" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <form id="form1" runat="server">

        <asp:Label ID="LbConteudo" runat="server" ></asp:Label>

    </form>
</body>
</html>

Can someone help me?

Grateful.

dharmend...

0 1

Reply
User: dharmendr
Replied: on May 14, 2023 11:21 PM
Report

Hi ilanocf,

Please share screenshot of the issue.

ilanocf

0 2

Reply
User: ilanocf
Replied: on May 16, 2023 12:22 PM
Modified: on May 16, 2023 12:24 PM
Report

Hi dharmendr,

The problems are exactly these:

1. Only start the text on the first page 2. The header and footer overlap the content that should follow on the next page.

Here is the image link:

https://drive.google.com/file/d/1SCWVMjY50jFHvJ_uAojNvSgJu-Gvxoh6/view?usp=sharing

dharmend...

0 3

Reply
User: dharmendr
Replied: on May 17, 2023 09:07 AM
Report

Are you applying any other css or style sheet.

ilanocf

0 4

Reply
User: ilanocf
Replied: on May 17, 2023 10:07 AM
Report

No, none other.

dharmend...

0 5

Reply
User: dharmendr
Replied: on May 18, 2023 03:11 AM
Modified: on May 18, 2023 03:12 AM
Report

ilanocf says:

"header { height: auto; position: fixed; top: 0; left: 0; width: 100%; }" & vbCrLf &

Remove position: fixed and place content inside section tag.

Refer below example.

HTML

<asp:Label ID="LbConteudo" runat="server"></asp:Label>

Code

protected void Page_Load(object sender, EventArgs e)
{
    PovoaDocumentos();
}

private void PovoaDocumentos()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] {
        new DataColumn("TIPO_DOCUMENTO"),
        new DataColumn("USUORIGEM"),
        new DataColumn("SETOR_ORIGEM"),
        new DataColumn("USUDESTINO"),
        new DataColumn("SETOR_DESTINO"),
        new DataColumn("ASSUNTO"),
        new DataColumn("TEXTO")
    });
    dt.Rows.Add("COMUNICACAO INTERNA", "Fulano de Tal", "ASTIC - Assesoria em Technologia da Informacao e comunicacao", "Beltrano de Tal", "PR - Presidencia", "Teste", "Redigir textos longos");

    DataSet Ds = new DataSet();
    Ds.Tables.Add(dt);
    string pHeader = "";
    string pConteudo = "";

    if (Ds.Tables[0].Rows.Count > 0)
    {
        pHeader = "<table width='100%' border='1' cellpadding='0' cellspacing='0'>"
            + "  <tr>"
            + "      <td colspan = '2' style='font-size:14pt; text-align:center; font-weight:bold; padding:10px; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' >" + Ds.Tables[0].Rows[0]["TIPO_DOCUMENTO"].ToString().ToUpper() + "</td>"
            + "  </tr>"
            + "  <tr>"
            + "      <td valign='top' width='50%' style='font-size:11pt; text-align:left; padding:0px 5px 0px 5px; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>De:</b> " + Ds.Tables[0].Rows[0]["USUORIGEM"] + "<br />" + Ds.Tables[0].Rows[0]["SETOR_ORIGEM"] + "</td>"
            + "      <td valign='top' width='50%' style='font-size:11pt; text-align:left; padding:0px 5px 0px 5px; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>Para:</b> " + Ds.Tables[0].Rows[0]["USUDESTINO"] + "<br />" + Ds.Tables[0].Rows[0]["SETOR_DESTINO"] + "</td>"
            + "  </tr>"
            + "  <tr>"
            + "      <td valign='top' colspan='2' style='font-size:11pt; text-align:left; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>Assunto:</b> " + Ds.Tables[0].Rows[0]["ASSUNTO"] + "</td>"
            + "  </tr>"
            + "</table>";

        pConteudo = "<br /><br />" + Server.HtmlDecode(Ds.Tables[0].Rows[0]["TEXTO"].ToString());

        string htmlContent = "<html>"
            + "<head>"
            + "  <style>"
            + "    header { height: auto; top: 0; left: 0; width: 100%; }"
            + "    footer { height: 50px; position: fixed; bottom: 0; left: 0; width: 100%; }"
            + "    footer .page:after { content: counter(page); }"
            + "  </style>"
            + "</head>"
            + "<body>"
            + "  <header>" + pHeader + "</header>"
            + "  <section>"
            + "    <div>" + pConteudo + "</div>"
            + "  </section>"
            + "  <footer><div class='page'>Page</div></footer>"
            + "</body>"
            + "</html>";
        LbConteudo.Text += htmlContent;
    }
}

VB.Net

Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    PovoaDocumentos()
End Sub

Private Sub PovoaDocumentos()
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {
                        New DataColumn("TIPO_DOCUMENTO"),
                        New DataColumn("USUORIGEM"),
                        New DataColumn("SETOR_ORIGEM"),
                        New DataColumn("USUDESTINO"),
                        New DataColumn("SETOR_DESTINO"),
                        New DataColumn("ASSUNTO"),
                        New DataColumn("TEXTO")})
    dt.Rows.Add("COMUNICACAO INTERNA", "Fulano de Tal", "ASTIC - Assesoria em Technologia da Informacao e comunicacao", "Beltrano de Tal", "PR - Presidencia", "Teste", "Redigir textos longos")
    Dim Ds As DataSet = New DataSet()
    Ds.Tables.Add(dt)
    Dim pHeader As String = ""
    Dim pConteudo As String = ""
    If Ds.Tables(0).Rows.Count > 0 Then
        pHeader = "<table width='100%' border='1' cellpadding='0' cellspacing='0'>" & "  <tr>" & "      <td colspan = '2' style='font-size:14pt; text-align:center; font-weight:bold; padding:10px; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' >" & Ds.Tables(0).Rows(0)("TIPO_DOCUMENTO").ToString().ToUpper() & "</td>" & "  </tr>" & "  <tr>" & "      <td valign='top' width='50%' style='font-size:11pt; text-align:left; padding:0px 5px 0px 5px; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>De:</b> " + Ds.Tables(0).Rows(0)("USUORIGEM") & "<br />" + Ds.Tables(0).Rows(0)("SETOR_ORIGEM") & "</td>" & "      <td valign='top' width='50%' style='font-size:11pt; text-align:left; padding:0px 5px 0px 5px; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>Para:</b> " + Ds.Tables(0).Rows(0)("USUDESTINO") & "<br />" + Ds.Tables(0).Rows(0)("SETOR_DESTINO") & "</td>" & "  </tr>" & "  <tr>" & "      <td valign='top' colspan='2' style='font-size:11pt; text-align:left; border:1px solid #000; font-family:  Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;' ><b>Assunto:</b> " + Ds.Tables(0).Rows(0)("ASSUNTO") & "</td>" & "  </tr>" & "</table>"
        pConteudo = "<br /><br />" & Server.HtmlDecode(Ds.Tables(0).Rows(0)("TEXTO").ToString())
        Dim htmlContent As String = "<html>" & "<head>" & "  <style>" & "    header { height: auto; top: 0; left: 0; width: 100%; }" & "    footer { height: 50px; position: fixed; bottom: 0; left: 0; width: 100%; }" & "    footer .page:after { content: counter(page); }" & "  </style>" & "</head>" & "<body>" & "  <header>" & pHeader & "</header>" & "  <section>" & "    <div>" & pConteudo & "</div>" & "  </section>" & "  <footer><div class='page'>Page</div></footer>" & "</body>" & "</html>"
        LbConteudo.Text += htmlContent
    End If
End Sub

Screenshot

HTML page with fixed header and footer in ASP.Net

Company

Explore

Follow us

Contact Us