需求简述:
在用文档库视图呈现内容数据时,难免有那么一列类似于"详细信息""描述"等长字段内容的,又苦于自动控制样式做的不是那么满意,那设置文档库或列表库某一列的列宽就显得比较重要了...
...............
实现套路:
先看一下未进行任何设置的当前库列表: 名为"con"的列按照内容的宽度自动调整列宽度("con"列是新建的Multiple Line Textbox),但在浏览者眼里始终有些不太舒服.下面就来一步步改变它的外观样式
首先看一下当前页面的源代码(最好用网页代码编辑工具,不推荐直接将本页面用Sharepoint Designer编辑,因为打开的是AllItems.aspx文件,而这里我们主要分析的是Response到客户端的HTML代码, 进而修改它的样式表)
可以看到"con"对应的客户端代码标记为:
现在用Sharepoint Designer打开该列表库,将定位到AllItem.aspx页面找到如下代码区:
修改为
保存AllItem.aspx并Publish, 查看效果:
是不是明显改观了? :)
分析:
其实本demo并非完美解决方案,因为现在控制的是样式表中的 ms-vh2-nograd 这个类, 如果我在这个List中再新建一个Multiple Line Textbox类型的字段,那么很显然这个列也会遵从ms-vh2-nograd 这个类的样式定义......
在用文档库视图呈现内容数据时,难免有那么一列类似于"详细信息""描述"等长字段内容的,又苦于自动控制样式做的不是那么满意,那设置文档库或列表库某一列的列宽就显得比较重要了...
...............
实现套路:
先看一下未进行任何设置的当前库列表: 名为"con"的列按照内容的宽度自动调整列宽度("con"列是新建的Multiple Line Textbox),但在浏览者眼里始终有些不太舒服.下面就来一步步改变它的外观样式
首先看一下当前页面的源代码(最好用网页代码编辑工具,不推荐直接将本页面用Sharepoint Designer编辑,因为打开的是AllItems.aspx文件,而这里我们主要分析的是Response到客户端的HTML代码, 进而修改它的样式表)
可以看到"con"对应的客户端代码标记为:
<TH class="ms-vh2-nograd" scope="col" noWrap=True>
现在用Sharepoint Designer打开该列表库,将定位到AllItem.aspx页面找到如下代码区:
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
修改为
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<style type="text/css">
.ms-vh2-nograd{
width:300px;
}
</style>
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
<style type="text/css">
.ms-vh2-nograd{
width:300px;
}
</style>
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
保存AllItem.aspx并Publish, 查看效果:
是不是明显改观了? :)
分析:
其实本demo并非完美解决方案,因为现在控制的是样式表中的 ms-vh2-nograd 这个类, 如果我在这个List中再新建一个Multiple Line Textbox类型的字段,那么很显然这个列也会遵从ms-vh2-nograd 这个类的样式定义......