WebPartManager Rendering Mode (block vs inline)

lastrom · Post by **lastrom** » Fri Mar 25, 2011 9:43 am

Hi all,
I'm trying to build out a page that takes up 100% of the height, but the WebPartManager renders a div (ID ctl00_wpm_HomePage on the home page, but different on each page). Is there a way to force the WebPartManager control to render inline? Or a way to declare styles to it without using javascript?

Thanks!

Post by **mazhar** » Mon Mar 28, 2011 3:42 am

You can control styles by modifying stylesheet from your applied theme. Let's say if you are using AbleCommerce theme then you need to edit App_Themes/AbleCommerce/style.css file. You should better make use of FireBug plugin for Fire Fox. That will allow you to quickly see style names right on your page and then you can modify those styles in CSS.

lastrom · Post by **lastrom** » Mon Mar 28, 2011 9:22 am

Thanks for the input, but that's not my question. Let me try to rephrase it.

The ID of the WebPartManager cannot be changed and is different on every single page since it's an ASP.NET control. For instance on the home page the ID is "ctl00_wpm_HomePage", but on the contact page it's"ctl00_wpm_ContactPage". I can't declare every single page on the website in the stylesheet when there are several dozen of pages. I just need to make the control render:

Code: Select all

<span id="ctl00_wpm_HomePage">

instead of

Code: Select all

<div id="ctl00_wpm_HomePage">

or be able to add a class to the rendered div so that I can add the necessary property to that class:

Code: Select all

<div id="ctl00_wpm_HomePage" class="foobar">

I've tried adding inline styles as well as classes to the control, but that breaks the website so I hope there is a non-javascript work around for adding styles/classes to this ASP.NET control.

euroluxantiques · Post by **euroluxantiques** » Wed Mar 30, 2011 6:25 am

If you give me the View Source snippet showing the hierarchy of the HTML tag you're trying to get to, I might be able to help you put the CSS on it. I rendered a very complicated custom CSS theme on our website the first time I set up my AC store by adding all kinds of extra div's and classes, but you REALLY don't want to do this because it makes upgrading horrible. I am in the process of upgrading to 7.0.6 and I threw out all of my old CSS theme and re-wrote it using sibling, first-child, etc. selectors and have been able to get everything done without modifying the aspx or code-behinds at all. Some of it has been tricky, but it was do-able.

I may not be understanding your question, but you can render a div as inline like:

div {display:inline}

A div is a block element, but can be made to behave as inline, just as a span, which is normally an inline element can be made to render as a block element like this:

span {display:block}

This would keep you from having to actually change the underlying AC pages, which again, you REALLY don't want to do too much of. It is a nightmare for upgrades.

lastrom · Post by **lastrom** » Wed Mar 30, 2011 2:02 pm

Here is an example of what I'm trying to accomplish:
The simplified HTML looks like this:

Code: Select all

<html>
	<head></head>
	<body>
		<div id="ctl00_wpm_HomePage">
			<div id="outerContentWrapper">
  				<div id="innerContentWrapper">
					Content here
				</div>
			</div>
		</div>
	</body>
</html>

The CSS code:

Code: Select all

html, body{ height:100%; }
#outerContentWrapper { height:100% }

The "outerContentWrapper" cannot take up 100% height of the elements since the parent div (in this case the problematic "ctl00_wpm_HomePage") does not have "height:100%" declared so my layout doesn't flow the way I want it.

The "<div id="ctl00_wpm_HomePage">" is generated automatically from the

Code: Select all

<asp:WebPartManager ID="wpm" runat="server"></asp:WebPartManager>

control. I cannot add inline style or class to this control as the site breaks if I do that. I also cannot use parent child CSS selectors as there are several other elements added in automatically before and after the div due to the way ASP.NET renders HTML elements. I can't target the div specifically because the id changes depending on what page you're on. I'm intimately familiar with CSS, but the simple solution to this is being able to either change the render mode of the control to inline or to give it a class.

I'm trying to keep this as simple as possible because the website will be/needs to be search engine optimized and 100% working (without CSS hacks) in IE6+, Firefox 3+, Chrome 8+, Safari 5+ on both Mac and PC. If I could just add a class to the darn div element it would solve the entire issue.

I hope this clarified the issue more.

euroluxantiques · Post by **euroluxantiques** » Wed Mar 30, 2011 3:16 pm

Can you show me an actual page or 2 on your website and maybe an actual example of the design you're trying to achieve?

AbleCommerce Shopping Cart Software

WebPartManager Rendering Mode (block vs inline)

WebPartManager Rendering Mode (block vs inline)

Re: WebPartManager Rendering Mode (block vs inline)

Re: WebPartManager Rendering Mode (block vs inline)

Re: WebPartManager Rendering Mode (block vs inline)

Re: WebPartManager Rendering Mode (block vs inline)

Re: WebPartManager Rendering Mode (block vs inline)