Box alignment

Hello,

2 boxes (1 in left column and 1 in right column) and 3 boxes in center column in 2 different sections are not aligned the same on left and right. See on sis.web.cern.ch, section ‘Literature search’ and just below ‘Analysis & data’. ‘Literature search’ looks more on the left on the right and left side than ‘Analysis & data’.

I also noticed that Portrait box cannot be set to right when you have a 5 boxes (4 Simple and 1 Portrait). It is only displayed correctly on the left.

Could this be solved somehow? Thanks for your help!

I confirm that this is an issue so I opened a ticket for that (https://gitlab.cern.ch/web-team/drupal/public/d8/modules/cern-components/-/issues/70)

can you provide a screenshot and / or link for that?

Thanks

Thank you very much for the first one!

For the second one, see sis.web.cern.ch/search-and-read. When I put the Portrait box in position 3, box 4 and 5 are displayed below and not beside the Portrait box and there are 2 white space.

Thanks for your help!

For the alignment of the boxes you have a configuration of web components in the following order:

  • Section
    • Box: Simple
    • Box: Simple
    • Box: Portrait
    • Box: Simple
    • Box: Simple
    • Box: Simple
    • Box: Simple
    • Box: Simple

Try instead this order:

  • Section
    • Box: Simple
    • Box: Simple
    • Box: Simple
    • Box: Simple
    • Box: Portrait
    • Box: Simple
    • Box: Simple
    • Box: Simple

You can change it by drag-n-drop of the Portrait lower in the section

Konstantinos

Thanks for your reply. It does not work either with Portrait box in position 5. See sis.web.cern.ch/search-and-read

Hello Salome,

I tried it in a website and apparently the portrait needs to be first, so like:

  • Section
    • Box: Portrait
    • Box: Simple
    • Box: Simple
    • Box: Simple
    • Box: Simple
    • Box: Simple
    • Box: Simple
    • Box: Simple

Konstantinos

Ok, so there is no way to set it to the right? Thanks for your confirmation.

No I dont think there is

Hello Salome,

Regarding the first issue you mentioned, I applied a fix that will be deployed with v2.7.1 of CERN Components module.

Before

After

Konstantinos

Thank you very much! The box on the left ‘CERN Document Server’ seems also a little bit more on the left (the difference is very small) that the box ‘CERN Analysis Preservation’.

To be honest I dont see it, if you can send a screenshot and mark it it would be helpful.

The only thing that I can see being a bit off is the Quick Actions overflowing on the right. However since it is a custom implementation, there is not much I can do.

Konstantinos

Here is a screenshot, see the red line:

Ok now I get it. This is a small margin that cards have but its quite small so I dont think it causes visual bugs.

Konstantinos

Hi Konstantinos,
Thank you for the central update. It is better aligned.
There is still a small difference, at least on my screen, see :

The first box is ‘Centered Content’ with an Image background but it looks like it is overflowing on the right (it is the same with a Color bakcground). Is there something I could do for that?

Thanks!

Yes the issue in this case is the background of the blue section overflowing wrapper. I will see what I can do.

I created an issue to be fixed in the next patch version of the components: https://gitlab.cern.ch/web-team/drupal/public/d8/modules/cern-components/-/issues/75

Thanks a lot!