Hello. I am trying to make a header in master page with 2 columns. Column 1 has 3 buttons (to the left) and column 2 has a label about user logged in. I am trying to push this label to the right. If I specify Span 10 for first column and Span 2 for second, label is not pushed to the edge. If I specify push=1, then label appears positioned correctly on the screen, but horizontal scrollbar appears.
What am I missing?
<telerik:RadPageLayout runat="server" ID="MasterLayout" GridType="Fluid">
<Rows>
<%--Header--%>
<telerik:LayoutRow CssClass="header">
<Columns>
<%--Logo--%>
<%--Main Nav--%>
<telerik:LayoutColumn Span="10">
<telerik:RadLinkButton ID="btnInsurance" runat="server" Text="Payment Posting App" NavigateUrl="Default.aspx" Primary="true"></telerik:RadLinkButton>
<telerik:RadLinkButton ID="btnInsurances" runat="server" Text="Insurances" NavigateUrl="Insurances.aspx" Skin="WebBlue"></telerik:RadLinkButton>
<telerik:RadLinkButton ID="btnLockBox" runat="server" Text =" Lockbox Data" NavigateUrl="Lockbox.aspx"></telerik:RadLinkButton>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2" Push="1">
<asp:Label ID="name" runat="server" CssClass="userLabel" Text="Welcome: "></asp:Label>
<asp:label ID="lblUser" runat="server" CssClass="userLabel"></asp:label>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<%--Main--%>
<telerik:LayoutRow>
<Columns>
<%--Content--%>
<telerik:CompositeLayoutColumn Span="12" SpanMd="12" SpanSm="12" SpanXs="12">
<Content>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</Content>
</telerik:CompositeLayoutColumn>
</Columns>
</telerik:LayoutRow>
<%--Footer--%>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn CssClass="footer">
<hr />
© 2024 Rothman
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:RadPageLayout>
1 Answer, 1 is accepted
Hi Lev,
I tested the provided markup but was unable to replicate the horizontal scroll, e.g.
Nevertheless, to address the issue where your label is not pushed to the far right without introducing a horizontal scrollbar, you should consider adjusting your column sizing and positioning CSS, rather than solely relying on the grid span properties within the Telerik RadPageLayout control.
Here are a few steps to help you fix the issue:
Verify Grid Container Width:
Ensure that the container of your grid (the RadPageLayout or its parent element) is spanning the full width of its container. This can sometimes be restricted by container CSS, causing unexpected layout issues.
Adjusting CSS for Right Alignment:
Since you are using the Span="2" for the second column and it’s not going to the edge as expected, you might want to remove the Push="1" attribute and instead use CSS to align your label to the right. This could prevent the unnecessary horizontal scrollbar. Add a CSS rule to align the content of the second column to the right.Example:
<style>
.userLabel {
text-align: right;
display: block; /* Ensures the label takes full width of the column */
}
</style>
<div>
<telerik:RadPageLayout runat="server" ID="MasterLayout" GridType="Fluid">
<Rows>
<%--Header--%>
<telerik:LayoutRow CssClass="header">
<Columns>
<%--Logo--%>
<%--Main Nav--%>
<telerik:LayoutColumn Span="10">
<telerik:RadLinkButton ID="btnInsurance" runat="server" Text="Payment Posting App" NavigateUrl="Default.aspx" Primary="true"></telerik:RadLinkButton>
<telerik:RadLinkButton ID="btnInsurances" runat="server" Text="Insurances" NavigateUrl="Insurances.aspx" Skin="WebBlue"></telerik:RadLinkButton>
<telerik:RadLinkButton ID="btnLockBox" runat="server" Text=" Lockbox Data" NavigateUrl="Lockbox.aspx"></telerik:RadLinkButton>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2">
<asp:Label ID="name" runat="server" CssClass="userLabel" Text="Welcome: "></asp:Label>
<asp:Label ID="lblUser" runat="server" CssClass="userLabel"></asp:Label>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<%--Main--%>
<telerik:LayoutRow>
<Columns>
<%--Content--%>
<telerik:CompositeLayoutColumn Span="12" SpanMd="12" SpanSm="12" SpanXs="12">
<Content>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</Content>
</telerik:CompositeLayoutColumn>
</Columns>
</telerik:LayoutRow>
<%--Footer--%>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn CssClass="footer">
<hr />
© 2024 Rothman
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:RadPageLayout>
</div>Check for Additional Overflowing Content:
Sometimes horizontal scrollbars appear because of other overflowing content or padding/margins that push the layout width beyond the viewport. Review other elements in your layout for potential overflow issues.
Regards,
Rumen
Progress Telerik