locked
Set Master Page width based on the width of the rendered contentplaceholder RRS feed

  • Question

  • User-1668014665 posted

    asp.net 2.0, WebForms, Master Pages

    I have content within my contentplaceholder which is wider than the desktop screen (1078 pixels).

    When the page renders the Master page width equals the 1078 (screen pixel size), but the content width the contentplaceholder is 1500 pixels, so the content extends beyond the master page visually.

    QUESTION: How can I force my master page (and menus etc) to expand to equal the content width of the contentplaceholder at 1500 pixels?

    Any ideas

    Tuesday, September 4, 2018 9:24 PM

Answers

  • User409696431 posted

    You haven't told us what your Master page looks like.  <g class="gr_ gr_10 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="10" data-gr-id="10">Apparently</g> you have a width assigned to an outer containing element somewhere.

    The basic idea would be to remove that width, and set that element to display:inline-block; if it doesn't already display inline, and let it "shrink-wrap" around the content.  You may want to add a min-width to it to prevent it from getting too narrow, depending on what the content in your other pages looks like.

    I'll leave it to you <g class="gr_ gr_9 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="9" data-gr-id="9">do</g> deal with any side effects, depending on how you've styled your other elements.

    Here is a trivial example, with a Master page and two content pages.  Click the links from one to the other to see the effect:

    <!DOCTYPE html>
    <%@ Master Language="C#" %>
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    </head>
    <body>
    <div style="border-color:red;border-width:2px;border-style:solid;display:inline-block;min-width: 600px;">
    <form id="form1" runat="server">
    	<div style="margin:auto;width: 470px;">
    		<h1>Hello, I am in the Master Page</h1>
    		<p><a href="hello.aspx">Hello</a> <a href="Goodbye.aspx">Goodbye</a></p>
    	</div>
    	<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    	</asp:ContentPlaceHolder>
    </form>
    </div>
    </body>
    </html>
    
    
    <%@ Page language="C#" masterpagefile="My.master" title="Hello" %>
    <asp:Content id="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">
    	<p style="width:500px;border-color:black;border-width:2px;border-style:solid; margin:auto;">This is 500px wide.</p>
    </asp:Content>
    
    <%@ Page language="C#" masterpagefile="My.master" title="Hello" %>
    <asp:Content id="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">
    	<p style="width:1500px;border-color:black;border-width:2px;border-style:solid;margin:auto;">This is 1500px wide.</p>
    </asp:Content>
    
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 5, 2018 4:10 AM

All replies

  • User-943250815 posted

    Since there is no sample of Master Page I can only guess you have a fixed width by attribute ou by CSS.

    I would check parent element that holds contentplaceholder on Master Page
    As an example, parent will limit your width to 50%
    <table width= 50%>
    <tr><td>
    <asp:ContentPlaceHolder ID="cphPrincipal" runat="server">
    </td></tr>
    </table>

    Wednesday, September 5, 2018 1:01 AM
  • User-1668014665 posted

    You have used the master page to control the width of the ContentPlaceHolder 

    I want the other way around, the ContentPlaceHolder  controlling the width of the master page

    thanks

    Wednesday, September 5, 2018 2:46 AM
  • User409696431 posted

    You haven't told us what your Master page looks like.  <g class="gr_ gr_10 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="10" data-gr-id="10">Apparently</g> you have a width assigned to an outer containing element somewhere.

    The basic idea would be to remove that width, and set that element to display:inline-block; if it doesn't already display inline, and let it "shrink-wrap" around the content.  You may want to add a min-width to it to prevent it from getting too narrow, depending on what the content in your other pages looks like.

    I'll leave it to you <g class="gr_ gr_9 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="9" data-gr-id="9">do</g> deal with any side effects, depending on how you've styled your other elements.

    Here is a trivial example, with a Master page and two content pages.  Click the links from one to the other to see the effect:

    <!DOCTYPE html>
    <%@ Master Language="C#" %>
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    </head>
    <body>
    <div style="border-color:red;border-width:2px;border-style:solid;display:inline-block;min-width: 600px;">
    <form id="form1" runat="server">
    	<div style="margin:auto;width: 470px;">
    		<h1>Hello, I am in the Master Page</h1>
    		<p><a href="hello.aspx">Hello</a> <a href="Goodbye.aspx">Goodbye</a></p>
    	</div>
    	<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    	</asp:ContentPlaceHolder>
    </form>
    </div>
    </body>
    </html>
    
    
    <%@ Page language="C#" masterpagefile="My.master" title="Hello" %>
    <asp:Content id="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">
    	<p style="width:500px;border-color:black;border-width:2px;border-style:solid; margin:auto;">This is 500px wide.</p>
    </asp:Content>
    
    <%@ Page language="C#" masterpagefile="My.master" title="Hello" %>
    <asp:Content id="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">
    	<p style="width:1500px;border-color:black;border-width:2px;border-style:solid;margin:auto;">This is 1500px wide.</p>
    </asp:Content>
    
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 5, 2018 4:10 AM