Dock Container - 2 Columns, two columns??

I am trying to develop a new home page that will be mobile friendly. I am working in our dev site on 2100.3.100. I tried the Dock Container 3 Columns and found that the 3rd column is not viewable on a phone. Sam and Martin from Support confirmed that my experience was actual. So, I am trying the Dock Container 2 Columns module.

How do you get the modules (I have 2 Web Control HTML text modules and one Report Grid from SPROC to practice with) to go to two columns? When more than one are added they sit on top of each other and fill the whole screen width. All 3 are set as Available Content and Movable. They move up and down but not side to side.

I tried making the width 50% instead of 100% but still couldn't get 2 columns.

If anyone has ideas for a pleasing, mobile friendly home page I am open to ideas. Thanks!

Parents
No Data
Reply
  • I had the pleasure of visiting with Alex Nicoletti and was given time to show him how we use the Dock Container 2 Columns module. We prefer how it looks on small screens over the 3 column module. I also asked about making it responsive and learned they are working on that for an upcoming release.

    For now, Alex made the module responsive using the User Control module (no additional css). Here is the working module.

    <%@ control language="C#" autoeventwireup="true" inherits="ArenaWeb.UserControls.Content.DockContainerTwoColumns, Arena" %>

    <asp:LinkButton ID="lbCustomizeModules" runat="server" Text="Customize..." CssClass="dockCustomizeLink" />

    <table border="0" cellpadding="0" cellspacing="0" id="tbl" runat="server" class="dockContainer">
        <tr class="row">
            <td valign="top" class="dockCell top left col-md-4" id="TopLeftColumn" runat="server"></td>
            <td valign="top" class="dockCell top right col-md-8" id="TopRightColumn" runat="server"></td>
        </tr>
        <tr class="row">
            <td valign="top" height="100%" class="dockCell left col-md-4" id="LeftColumn" runat="server" dockable="true">&nbsp;</td>
            <td valign="top" height="100%" class="dockCell right col-md-8" id="RightColumn" runat="server" dockable="true">&nbsp;</td>
        </tr>
    </table>

    <Arena:KeepAlive ID="keepAlive" runat="server" IntervalMilliseconds="300000" />

    We choose to have the right side larger than the left so use column sizes 4 and 8. To have an equal split use 6 and 6. Internet Explorer reacts as if it was a small screen device and only shows one column no matter what size screen you are using. Other browsers work correctly.

Children
No Data
More Content