我必须在某些CSS
和Javascript文件中进行更改。我有一个标题行和一些列,当我缩放对象时,标题不再与列对齐。所以我必须用列修复标题,它们在CSS
的不同类中.这是图片的链接。这些是Qlikview的代码。
.c6graph {
margin-left: 7px;
margin-top: 5px;
width:100%;
height:100%;
}
/* Start of "Micro clearfix" */
.cf { zoom: 0; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* End of "Micro clearfix" */
.e6headerrow {
font-size:8pt;
font-family:Tahoma;
font-weight:bold;
padding: 5px;}
.e6firstcolumn {
text-align: left;
width: 14% !Important;
max-width: 14%;
min-width: 14%;}
.e6thirdforthcolumn {display:inline-block;
text-align: center;
width: 43% !Important;
max-width: 43%;
min-width: 43%;}
'这是调用这个CSS类的JavaScript部分
。 var html = "<table class='c6graph cf' cellpadding=0 cellspacing=0><colgroup ><col class='e6headerrow e6firstcolumn''/><col class='e6headerrow e6thirdforthcolumn'/><col class='e6headerrow e6thirdforthcolumn'/></colgroup>";
html += "<tr>" + firstColumnHeader + "<td class='e6headerrow e6thirdforthcolumn' >" + thirdColumnValue + "</td><td class='e6headerrow e6thirdforthcolumn' >" + fourthColumnValue + "</td></tr>";
htmlFirstColumn = "<td class='e6thirdforthcolumn' ><div class='ext neg'><div style='width: "
+ widthValue1 + ";' class='bar " + (isSwitchBorder == 1 ? "border-neg" : "") + "'></div><div class='progressneg " + progressRounded + "'>" + row[1].text + "</div></div></td>";
}
else {
htmlFirstColumn = "<td class='e6thirdforthcolumn' ><div class='ext pos'><div style='width: "
+ widthValue1 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-pos" : "") + "'></div><div class='progresspos " + progressRounded + "'>" + row[1].text + "</div></div></td>";
}
var widthValue2 = Math.abs(parseInt(row[2].text))*factorTotvar + "%";
var htmlSecondColumn = "";
if(row[2].text.substring(0,1) == "-") {
htmlSecondColumn = "<td class='e6thirdforthcolumn' ><div class='ext neg'><div style='width: "
+ widthValue2 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-neg" : "") + "'></div><div class='progressneg " + progressRounded3 + "'>" + row[2].text + "</div></div></td>";
}
else {
htmlSecondColumn = "<td class='e6thirdforthcolumn' ><div class='ext pos'><div style='width: "
+ widthValue2 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-pos" : "") + "'></div><div class='progresspos " + progressRounded3 + "'>" + row[2].text + "</div></div></td>";
}
var firstColumnRow = (isDimensionEnabled != 1 ? "<td class='e6firstcolumn'>" + dimensionBolded + "</td>" : "");
html += "<tr>" + firstColumnRow;
html +=htmlFirstColumn;
html +=htmlSecondColumn;
html +="</tr>";
我是能够发表评论的一点,所以我会把它作为答案发布。
你的javascript部分缺少代码片段,变量firstColumnHeader的定义以及htmlFirstColumn周围的if的前半部分。 我假设它因剪切和粘贴错误而丢失,并且代码不错,因为您有一些输出。
如果您执行视图源代码并粘贴由 javascript 生成的 html 代码,而不是发布构建 html 的 javascript,这将有所帮助。
从我所看到的,看起来您没有以相同的方式格式化列标题和表格列,这就是它们呈现不完全相同的原因。