ServiceStudio not showing CSS styling on columns, how to fix this

I style the 3-column widget so that I have a narrow left and right column and a wide middle column, this works with the following CSS:

SyntaxEditor Code Snippet

.columns > .columns-item:nth-child(2) {
    -webkit-box-flex: 8;
            -ms-flex: 8;
                flex: 8;
}

I now want to add a 2-column widget to the middle wide column, but now this is a problem , the 2-column widget also is now having a narrow left and wide right (second) column, but I want these 2 equal width. 

To fix this I add Extended Class "layout" to the outer 3-column widget and change my CSS to this:

SyntaxEditor Code Snippet

.columns.layout > .columns-item:nth-child(2) {
    -webkit-box-flex: 8;
            -ms-flex: 8;
                flex: 8;
}

Now the column width change is only applied to my outer 3-column widget and the inner one is not affected. This also works, but only in the browser, in ServiceStudio this does not work. It seems the .columns.layout cannot be interpreted in ServiceStudio. This is a problem for building the layout in the middle column as it is now much narrower than it is going to be in the final browser, really bad.

Is there any other way to style this in CSS to get the same effect but still working in ServiceStudio as well?

I attach a demo.

Elize van der Riet wrote:

I style the 3-column widget so that I have a narrow left and right column and a wide middle column, this works with the following CSS:

SyntaxEditor Code Snippet

.columns > .columns-item:nth-child(2) {
    -webkit-box-flex: 8;
            -ms-flex: 8;
                flex: 8;
}

I now want to add a 2-column widget to the middle wide column, but now this is a problem , the 2-column widget also is now having a narrow left and wide right (second) column, but I want these 2 equal width. 

To fix this I add Extended Class "layout" to the outer 3-column widget and change my CSS to this:

SyntaxEditor Code Snippet

.columns.layout > .columns-item:nth-child(2) {
    -webkit-box-flex: 8;
            -ms-flex: 8;
                flex: 8;
}

Now the column width change is only applied to my outer 3-column widget and the inner one is not affected. This also works, but only in the browser, in ServiceStudio this does not work. It seems the .columns.layout cannot be interpreted in ServiceStudio. This is a problem for building the layout in the middle column as it is now much narrower than it is going to be in the final browser, really bad.

Is there any other way to style this in CSS to get the same effect but still working in ServiceStudio as well?

I attach a demo.

Hello,

I think is this wants you to want to do. 

I put 1 class before the column2 widget and with that, it seems that the flex works nice.

SyntaxEditor Code Snippet

.middle .columns-item {
    -webkit-box-flex: 8;
            -ms-flex: 8;
                flex: 8;
                
                background: lightblue; /* to delete */
}


I had attached your oml with my changes for you can see it.

I hope this helps you if does please mark as the solution for others with in the same find solution faster.





Hi Hugo,

Thank you for taking the time to reply. Yes, you are correct that is a way to solve it. However I am already doing that, I realize that I left out a crucial bit of information. The outer 3 columns are our standard page layout that all pages on the site must have(2 narrower columns for left and right bars). I wanted to style it in such a way that the developers need not create a wrapper around each column widget they want to use on the page layout.This is unfortunately a criteria I left out, my bad. But yes, otherwise your suggestion will be a solution.

In fact this is what I currently do

Where you have "middle" I have "innerColumn", but I want to make life easier for the developers using the page layout. And as I said, my original use of "layout" on the outer columns works in the browser but not in ServiceStudio, so perhaps ServiceStudio needs to be fixed, perhaps I should log a case for this?

.columns > .columns-item:nth-child(2) {
    -webkit-box-flex: 8;
            -ms-flex: 8;
                flex: 8;
}

.innerColumns .columns > .columns-item:nth-child(2) {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

Elize van der Riet wrote:

In fact this is what I currently do

Where you have "middle" I have "innerColumn", but I want to make life easier for the developers using the page layout. And as I said, my original use of "layout" on the outer columns works in the browser but not in ServiceStudio, so perhaps ServiceStudio needs to be fixed, perhaps I should log a case for this?

.columns > .columns-item:nth-child(2) {
    -webkit-box-flex: 8;
            -ms-flex: 8;
                flex: 8;
}

.innerColumns .columns > .columns-item:nth-child(2) {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

Hello,

I don't know if I understand well what you need but I think is this I made a New_layout web block. With these columns formatted as you want. So now you only need to drag that web block for one page to get that layout.

You can see one example in yours ColumnsTestScreen

Hope this helps you.



My apologies, once again I think I did not explain well, also I should adapt the example I supplied to look like my app. I already have in my app a layout with the 3 "outer" columns as it is in the example. But even if it is not on a page layout, the effect is the same, that is why I did not bother with a layout.

I want the 3 "outer" columns on the layout. Then this layout is used for all pages on the site. Then when a developer wants to add an "inner" column widget that must not be affected by the styling of the outer 3 columns and I also do not want them to have to add additional styling to correct it again. They must be able to add any of the column widgets in the wider central column of the page layout.

And as I stated, this works in the browser, but not in ServiceStudio, it is only a ServiceStudio issue, so I think I will log a case.

Thanks Hugo, although your solution is not exactly what I want, it did give me more ideas to try out. So I now have the solution I want. Thanks. I attach the example. I had to add some more CSS though to fix the "inner" columns back to what it should be.

Elize van der Riet wrote:

Thanks Hugo, although your solution is not exactly what I want, it did give me more ideas to try out. So I now have the solution I want. Thanks. I attach the example. I had to add some more CSS though to fix the "inner" columns back to what it should be.


Thanks for sharing your solution. I will take a look later. Good luck with your project.