Control Layout

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
3/7/2012 2:20:21 PM
Gravatar
Total Posts 148

Control Layout

Hi:

I was wondering if there was a way to place a control, in the center pane for example, that spans the entire width of the page and then put another control underneath it, and in the left pane, without them occupying the same vertical position.  Because, right now, if I place a control in the center pane that spans the entire page and place another control in the left pane, both controls populate the same vertical position.

3/7/2012 3:24:07 PM
Gravatar
Total Posts 2253

Re: Control Layout

Hi,

You have a couple options here. The first requires using the altContent panes as discussed in the "More than 3 Content Panels" documentation. Review that documentation to see if that's what you want to do.

The second is to use a combination of css classes on the modules to make them float to different postions of the page. For instance, if you would like to setup the following on your page:

###Really cool content that spans the entire width of the page###
###Content in Left Column###  || ###Content in Right Column###
###Really cool content that spans the entire width of the page###

You would use the "Custom CSS Class" setting on the content modules in Left and Right columns to float those modules so that they sit next to each other instead of on top of each other. The CSS could look like this:

.floatmodule {
/*This CSS makes the module 300px wide with 25px of padding*/
  float: left;
  width: 300px;
  padding-right: 25px;
}

.floatmodule + .floatmodule {
/*This selector removes the padding from the second (right column) div with the floatmodule class */
  padding-right: 0;
}

.floatmodule + .floatmodule + div {
/*This selector clears the float for the div that immediately follows the second div with the floatmodule class*/
  clear: left;
}

The CSS above assumes your total width of the center-nomargins div is 625px. You'll have to figure out your dimensions.

The only caveat to this method is that you can't use the Left or Right columns on the page because that would break the layout. You could (and I have) used a combination of this method and the altContent panes. Using them together really gives you a lot of flexibility.

I should warn you that you shouldn't use either of these methods if the only content that you are trying to position is HTML. In that case, you should just setup the HTML inside of a single HTML content module and use CSS to position it in "columns." This is because mojoPortal must look up the settings and content for each module on a page. If you have a bunch of HTML content modules on a single page, you are going to be making database calls for each one when you could just be making a few calls for one module.

HTH,
Joe D.

3/8/2012 7:43:43 AM
Gravatar
Total Posts 18439

Re: Control Layout

Since you asked this in the devleoper forum I'm going to answer from another angle though all the things Joe D said are also true.

If you are developing custom features for mojoPortal they should be self contained. That is don't think in terms of composing a feature or an application by using the content system to put various controls on the page. A given feature should have one and only one module control that plugs into the cms page and it should not depend on something else to be added to the page.

But within your control you can embed other controls and do you own layout such that the outer control is in the center of the page and uses the whole width but internally it has layout to make columns or organize things as you would like.

Consider the Blog for example when you put it on a page it is just one control but it has a side column navigation with the calendar, category and archive links etc. But  that layout is done internally to the blog control, it does not put other controls in the side column of the cms page, it is designed to be in the center and generally works best with nothing else in the side column of the cms page so it can have the entire width for its own layout.

Hope that helps,

Joe

You must sign in to post in the forums. This thread is closed to new posts.