How to reduce vertical spacing between two web part zones?
-
07-12-2019 - |
Вопрос
I've defined two Web Part Zones in the page layout, with nothing between them.
<WebPartPages:WebPartZone runat="server" Title="Zone 1" ID="Zone1" Orientation="Horizontal"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
<WebPartPages:WebPartZone runat="server" Title="Zone 2" ID="Zone2" Orientation="Horizontal"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
I've placed a CEWP in each zone. Once the page is out of edit mode, it renders like this:
How can I reduce the vertical spacing highlighted by the orange arrows?
Решение
I created /Style Library/CollapsedWebPartZones.css
...
.CollapsedWebPartZones table.s4-wpTopTable {
padding: 0px;
}
.CollapsedWebPartZones table {
width: auto;
}
... and referenced it from the top of my page layout file's PlaceHolderAdditionalPageHead
content placeholder:
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
<link id="CollapsedWebPartZonesStyleLink" href="<% $SPUrl:~SiteCollection/Style Library/CollapsedWebPartZones.css%>" runat="server" type="text/css" rel="stylesheet" />
<etc>
<etc>
<etc>
</asp:Content>
Lastly, I added a class="CollapsedWebPartZones"
attribute to the markup element in the page layout which contained the web part zones (a table row in my case -- <tr>
).
Result:
Не связан с sharepoint.stackexchange