LondonFixed theme stretching

LondonFixed theme stretching

  
I am experiencing a strange issue with London theme.

One of my applications looks different on different pages - in home page, the content is in the center with large margins to the left and right (which is correct according to what I saw before), but when I go to the other page - there are no margins at all, everything is stretched.
First I thought that this was broken by somebody. My another application was referencing the theme of this one, and was stretched the same way on all the pages that I've checked. So I temporarily removed the referencing, made it based on London directly and copied customization CSS there from one of the older versions - and it started looking good.

Later, I compared the 2 CSS and found that they are identical! I started looking into the strectching effect deeper and found something: the page that looked fine, had .ThemeGrid_Container width coming from CSS named like 'LondonFixed.extra.css'. The page that was stretched didn't have this CSS included and so no width set to the container. All flows in the app have theme set to eSpace default, I don't have any other theme. They also use the same Layout, so I can't understand where this difference could come from.

Than I have noticed, that the first application theme is based on LondonFixed, not on London directly. When I switched it to be based on London - the stretching effect disappeared. Now width of .ThemeGrid_Container is coming from CSS named 'Theme.<Application>.extra.css', but this one is always included. Changing base theme (and re-setting lost GridType setting) is the only thing I changed.

The only bad effect I have noticed is that when using London directly, layout is too wide in tablet mode (I don't have real tablet, checking in preview mode). I have fixed this with the following CSS:

@media screen and (max-width: 1023px) { 
    .Responsive .ThemeGrid_Container {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .Responsive.ThemeGrid_Wrapper {
        min-width: 100%;
    }
}
I'm wondering, if I'm losing something important after the change I did? If there is a fix for that stretching - I would go with LondonFixed, but the stretching looks awfull.
Hi Igor,

When I create a new application, and then created a new module that uses the theme of the 'Home' module, everything seems to be working correctly.

You should not reference London theme directly, or you'll loose all responsive behaviors for smartphone and tablets. That's why Service Studio 9 will upgrade old eSpaces that were using London to use LondonFixed.

Maybe you hadn't published the eSpace with the problem page after upgrade?

Cheers,
Tiago Simões


Hi Tiago,

I have switched back to use LondonFixed as a base - and now I see no problem any more. I thought that maybe this was caused by a bug in Service Center version used at that time when it happened - but I have republished on 9.0.0.3 and 9.0.0.6 - both are fine. At least by now. :)

As for responsiveness - it was fine with London, except the issue in tablet mode that I have described. As I can see from LondonFixed CSS, it is mostly about tablet mode fixes.

Both eSpaces were created in version 9 (actually, cloned from the older ones, those were upgraded before).
What if I want to stretch the London fixed theme? Just make it wider throughout. What do I need to change? I don't seem to see anything that works.

Thanks
Hi Andrei,

In that case you could base your theme on the LondonFluid. LondonFixed like the name says is fixed to a specific width (by default 940px but configurable by you) and LondonFluid will use 90% of the screen regardless the resolution.

Hope this helps
Guilherme
Thanks. Where do I adjust it? I don't see anything structural to have a width of 940px. The only thing I have with 940 in it is this:

div.Feedback_Message_Error,
div.Feedback_Message_Success,
div.Feedback_Message_Warning, 
div.Feedback_Message_Info {
    color: white;    
    max-width: 940px;
    min-width: 400px;
    padding: 20px 50px 20px 20px;    
    line-height: normal;
    word-break: break-word;
    border-radius: 0px;
    border: none;
    box-shadow: 0px 1px 3px #111;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    border-radius: 3px;
}

Thanks
Hi Andrei,

You can change that without touching the css just by using the grid configuration. Select your them and change the grid type from Fixed (from LondonFixed) to Fixed. It should open the grid customization options and the platform will calculate everything for you.



Cheers,
LGP