Question

我有一个网格，哪一行包含：

LastName, FirstName
IDNumber

但是，有时姓氏和名字很长，所以它最终会出现在ID号所在的第二行，并且它覆盖了ID号。

LastName,
FirstName
IDNumber

但名字涵盖身份证号码。

我将ID号设置为margin-top:12px;以解决问题，但对于没有问题的行，两个字段之间存在较大的填充。我该如何最好地解决这个问题？

这里有一些代码：

@(Html.Kendo().Grid<HexaPod.Models.person>()
    .Name("PersonGrid")
    .ClientRowTemplate("<tr style='height:16px; vertical-align: central;'>" +
        "<td style=\"text-align:left;width:100% !important; \">" +
        "<div style='margin-bottom:5px; clear:both; height:11px;' class=\"type-style-value-emphasized\">#if(LastName != null){#" +
        "#=LastName#" +
        "#}#" +
        "#if(LastName != null && FirstName !=null){#" + 
        ", " +
        "#}#"+
        "#if(FirstName != null){#" +
        " #=FirstName#" +
        "#}#</div>" +
        "<div style='margin-bottom:5px;clear: both; margin-top:12px;' class='type-style-paragraph'>#=IdNumber#</div></td>" +
        "</tr>")

Answer 1

我所做的只是设置Max-Width：270px并且有效：

max-width: 270px;display:inherit;

内部：

@(Html.Kendo().Grid<HexaPod.Models.person>()
    .Name("PersonGrid")
    .ClientRowTemplate("<tr style='height:16px; vertical-align: central;'>" +
        "<td style=\"text-align:left;width:100% !important; \">" +
        "<div style='margin-bottom:5px; clear:both; height:11px;max-width: 270px;display:inherit;' class=\"type-style-value-emphasized\">#if(LastName != null){#" +
        "#=LastName#" +
        "#}#" +
        "#if(LastName != null && FirstName !=null){#" + 
        ", " +
        "#}#"+
        "#if(FirstName != null){#" +
        " #=FirstName#" +
        "#}#</div>" +
        "<div style='margin-bottom:5px;clear: both; margin-top:12px;' class='type-style-paragraph'>#=IdNumber#</div></td>" +
        "</tr>")

如何防止两个div之间的文本重叠？

1 个答案: