More in this section

Forums / General Discussions / Suggestions for consistent layout from frontend to backend

Suggestions for consistent layout from frontend to backend

4 posts, 0 answered
  1. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    17 Jan 2011
    Link to this post
    I have a layout that I am struggling to find a solution for.  The layout itself it simple, but the behavior due to how  editable blocks are generated in the backend is making things hard to truly give a WYSIWYG to the client.  Any advice on how I should go about this is welcome.

    The site is not ready to launch so I am just going to attach a simple demonstration I mocked up in Photoshop.  I have two boxes that will contain information that will display on every page.  I currently have the html in the master page so that it will appear on every page that uses the template and the client does not need to worry about it.  I am floating these boxes right with a left margin to make room for a content block that will have the ability to wrap around these floated boxes should the content grow enough.  When looking at the site from the frontend it works as intended, but the backend is not able to render this the same unless I give the content block a width/max-width which then removes the ability for the content to wrap the floated boxes.

    I guess I could make the floated boxes an html snippet or template where the client could add them to each content block, but that is defeating my purpose of keeping the client from having to even load this information.
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    18 Jan 2011
    Link to this post
    Hello Stacey,

    I suggest that you use layout widget to achieve the expected layout. See the attached image.

    What I did:
    1. I put new classes to the wrapping DIV of the layout widget and the two columns. 
    2. Put the image in the first column and the text in the second.
    3. Dropped CSS control and added the needed CSS (you can add it in your public theme)
      .textAndImage .image
      {
      float: right;
      }
      .textAndImage .text, .textAndImage .text .sf_colsIn, .textAndImage .text .sfContentBlock
      {
      display: inline;
      }
    4. Preview the result

    This will not look the same in Page Editor and in real website but you can add some "textAndImage" specific CSS to fix it in Page Editor.

    Let us know if you need further help.


    Greetings,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    18 Jan 2011
    Link to this post
    Katia,

    Thank you for the suggestion.  It seems I will end up with the same result though.  I did try what you illustrated and am seeing the same thing that my css is doing.  You mention that I could add some ".textAndImage" specific css to fix the view in the editor, but I am not sure how I can target just the editor view without also affecting what will render on the frontend.

    Here is the code I currently have;
    <div class="ft-box right">
       <div class="small-box">
          <h2>Jobs</h2>
          <p>
        <a href="linknameinhere" target="_blank">Sample Link</a></p>
       </div>
       <div class="large-box">
          <h2>Resume</h2>
          <p>
        Already registered? <a href="anotherlinknamehere">Click here to login.</a></p>
                                 
       </div>
    </div>
    <div class="content-wrapper">
      <asp:ContentPlaceHolder ID="cphMain" runat="server" />
    </div>
    #Content .content-wrapper
    {
        width: auto;
        /*max-width: 424px;*/
    }
     
    .ft-box
    {
        margin: 0 0 5px 35px;
        width: 272px;
    }
     
    .ft-box a
    {
        color: #005b7f;
    }
     
    .small-box, .large-box
    {
        margin-bottom: 25px;
        padding: 10px;
    }
     
    .small-box p, .large-box p
    {
        padding: 0 0 15px 10px;
        font-size: 13px;
        color: #8d8f92;
    }
     
    .small-box
    {
        height: 93px;
        background: url("../images/sm-box-bg.jpg") no-repeat;
    }
     
    .large-box
    {
        height: 123px;
        background: url("../images/lrg-box-bg.jpg") no-repeat;
    }

    Just a note that ".right" is a global class that just floats right.  What I just posted and what I tried with your example both give me what we see in this new attached screenshot.

    EDIT:  I just took a look at the source view in page edit and found that I can use .sfPageWrapper to get me closer to what I am looking for.   I can at least get it to sit nicely next to the floated boxes now, but it still does not truly wrap the floated element since I am now giving it a set width.  The frontend still looks as intended with this method.

    .sfPageWrapper .content-wrapper
    {
        max-width: 424px;
    }
  4. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    18 Jan 2011
    Link to this post
    Hi Stacey,

    Unfortunately RadDock, which is used for widget drag-and-drop, uses tables for layout and it won't be possible to achieve the same layout in Page editor as in the public page.

    However, we can make it look very much like the expected layout. The only difference will be that the text will not wrap around the image (see the attached image). Also, we need to know the width of the text block (.content-wrapper).

    Best wishes,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
4 posts, 0 answered