Forum Discussion

mohsenasfia's avatar
mohsenasfia
Guide
11 years ago

I need to have two rows inside the main content area, is it possible?

I need to have a full width content in the top of main content area and then below that I want to have a normal two colums layout.

 

I cannot use header here since I need to use custom component for that special content that I'd like to show on the top of the main content area.

 

I was wondering if I can have two rows inside the main-content layout or sth like that?

 

Your help would be appreciated and I'm looking forward to any helpful responses.

  • VarunGrazitti's avatar
    VarunGrazitti
    11 years ago

    mohsenasfia - You can achieve this from the Layout tab in studio. In the Layout tab, select the Layout which you want to edit, and edit it here, you can add one full row in the main content area. 

     

    The XML of this would be something like:

     

    <layout>
  <row id="header">
    <column id="common-header" width="24"/>
  </row>
  <row id="main">
   <column id="main-content-custom" width="24"/>
    <column id="main-content" width="18"/>
    <column id="empty-content" width="1"/>
    <column id="side-content" width="5"/>
  </row>
  <row id="footer">
    <column id="common-footer" width="24"/>
  </row>
</layout>

     

    In the Canvas mode, it would appear as below:

     

    Capture.PNG

     

    Save your changes, and there you go. You can add as many as you want. Maximum width can be 24 Units, so your full row must have 24 units of width, as can be seen in the XML mode. I hope this helps.

2 Replies

Sort By
  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    11 years ago

    mohsenasfia - You can achieve this from the Layout tab in studio. In the Layout tab, select the Layout which you want to edit, and edit it here, you can add one full row in the main content area. 

     

    The XML of this would be something like:

     

    <layout>
  <row id="header">
    <column id="common-header" width="24"/>
  </row>
  <row id="main">
   <column id="main-content-custom" width="24"/>
    <column id="main-content" width="18"/>
    <column id="empty-content" width="1"/>
    <column id="side-content" width="5"/>
  </row>
  <row id="footer">
    <column id="common-footer" width="24"/>
  </row>
</layout>

     

    In the Canvas mode, it would appear as below:

     

    Capture.PNG

     

    Save your changes, and there you go. You can add as many as you want. Maximum width can be 24 Units, so your full row must have 24 units of width, as can be seen in the XML mode. I hope this helps.