Views page: table layout has messed up css?

Online Support Service
1

Hi all,

I have found in the CERN theme that when creating a view page, with format table, the formatting is quite odd.

  • Firstly, the node titles in the table are displayed as h2 (or similar). There is no formatting setup in the view field styling that I can see that is doing this, so it looks like a bug somewhere in the theme.

If you do the same display as a view block, the issue with the node titles isn’t there - they are displayed as normal size.

  • Second, the table only goes to one half (~ish) page width. It’s as if there is a hidden block in the right-hand column, but there is nothing there. Why won’t this go full width by default?

Screenshot attached, page is http://test-cixp-d8.web.cern.ch/news

Any tips?

Thanks
-c
22

1 Like
2

Hello Cath,

Thanks for reporting the issue. The issue exists with links under page views, since they have a specific font-size.

I will provide a fix and let you know.

Kostas

1 Like
3

In the meantime, a quick fix for both problems on your theme’s CSS could be to add these rules:

.cern-view-display-page .view-content a {
    font-size: unset;
}

table {
    width: 100%;
}

In my opinion the tables should be made by default full-width on the CERN Theme, since that covers 90% of the use cases for tables.

In any case, I leave that up for the Web Team!

Regards,

Óscar

4

Hey Oscar,

Thanks - definitely a useful snippet I’ll be using on my non CERN-theme sites!

I’ll wait for the Web Team to do the fix for the CERN theme though, as I currently don’t have any CERN overwrite theme installed on this CIXP site (am trying to avoid doing anything bespoke in the css). So if they can fix that, it will solve this problem for everyone (not just me).

Keep those snippets coming though - this always helps increase my knowledge of css :slight_smile: :slight_smile: :slight_smile:

1 Like
5

Excuse me but I am a beginner, how to add this?

Thanks!

Best regards,
Baosong

6

Hi Baosong,

This could also be solved with a responsive table. We will write a How To article about this on webtools website.

We will let you know when is done.

7

Thanks! I will wait for your message. I assume this will also resolve the issue about the invisible text in the table header.

Cheers, Baosong

8

Hello Sotirios,

Do we have any update about the article? It would be useful

Ioannis

9

Hello everyone,

In addition to @ogomezal css rules, it might be useful to solve the problem with the first row’s titles that aren’t visible because they have the same colour with the background.

A quick fix for first row’s titles problem could be this:

.cern-view-display-page .view-content * {
    color: #fff !important; }

Once you have installed the cernoverride theme, you just need to navigate to cernoverride/css/theme.css and add the respective code snippets. @bshan

I hope it will help someone,
Ioannis

10

Hello Ioanni,

I will write the article as soon as possible.

Regards,

Kostas

11

Hello @ibatas

I took the time to write the how-to article today.

Kostas

1 Like
12

Thank you Kosta

Ioannis