小编moh*_*itp的帖子

标题高度和页面顶部的位置标题在wkhtmltopdf中

在我的应用程序中,允许用户定义自己的标题和页边距以进行打印.对于标题,用户可以提供以下两个字段:

(a)以mm为单位的页面上边距(从页面顶部开始)
(b)标题保证金(mm)(从页面顶部开始)

字段(a)和(b)如下图所示: 边缘描绘

例如,如果用户提供(a)为10mm而(b)为100mm,则"标题区域"的高度为90mm.

现在标题中的内容需要在标题区域的顶部对齐.

有没有办法设置标题区域高度和顶部对齐此标题区域内的内容.

目前,我正在为header-html选项执行以下操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        body 
        {
            border:0; 
            margin: 0;
            padding: 0;
            height: 90mm;  //in actual program, this is set dynamically in PHP
        }
    </style>

    <script type="text/javascript">
    function subst() 
    {
        //process the GET parameters and accordingly set the Header Region text info
    }  
    </script>
</head>

<body onload="subst()">
    <div>
        //text
    </div>
</body>  
</html>

Run Code Online (Sandbox Code Playgroud)

该边距选项被设置为100毫米.

我已经尝试为body CSS 设置vertical-align:top,但这也没有用.

我实现的最终输出似乎没有将标题区域内容垂直对齐在顶部或中间.它位于Header Region中间的某个地方.

wkhtmltopdf

moh*_*itp

lucky-day

13
推荐指数

1
解决办法

1万
查看次数

Google Charts和Twitter Bootstrap标签

我正在使用Twitter Bootstrap框架在网页中通过Google Chart Tools创建图表.显示了三种类型的图表 - 饼图,折线图和柱形图,每个图表都在单独的选项卡中.图表数据通过Ajax接收.

通过Ajax接收数据后,图表即可正常显示.但是,如果我移动到另一个选项卡,即另一个图表,然后返回到第一个选项卡,则图表中的标签会重新排列错误.

此处包括显示更改标签前后问题的图像: 标签更改前的图表标签更改后的图表

线图和柱形图也会出现此问题.

但是,如果我更改窗口然后返回,或者如果我隐藏然后重新显示图表,则不会出现问题.仅当我更改选项卡时才会发生.

标签的标记如下:

    <div class="charts-div" style="text-align: center">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-pie" data-toggle="tab">Pie</a></li>
                <li><a href="#tab-line" data-toggle="tab">Line</a></li>
                <li><a href="#tab-column" data-toggle="tab">Columns</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-pie">
                    <div class="chart pie-chart" id="pie-prt"></div>
                </div>
                <div class="tab-pane" id="tab-line">
                    <div class="chart line-chart" id="line-prt"></div>
                </div>
                <div class="tab-pane" id="tab-column">
                    <div class="chart column-chart" id="column-prt"></div>
                </div>
            </div>

    </div>

Run Code Online (Sandbox Code Playgroud)

检查Chrome 22,IE9和Firefox 12.结果是一样的.在我的末尾没有编写额外的代码/事件来进行标签更改或标签焦点事件.

google-visualization twitter-bootstrap

moh*_*itp

lucky-day

8
推荐指数

1
解决办法

1万
查看次数