My table is too wide for smaller screens

9 posts / 0 new
Last post
My table is too wide for smaller screens

Hello

My table is too wide for smaller screens http://isoldeop.web.cern.ch/content/user-info

A module is existing which will allow me to have a table more adaptative to the size of the screen?

Many thanks for help - Cheers. Simon

Hello Simon,

Hello Simon,

Yes it's true that the table is too wide for smaller screens and since its the periodical table you probably don't want to change the structure of the table in smaller resolution. What I propose as a solution is to encapsulate your table within a div and apply to this div overflow-x: auto; 

More specifically, your code should look like this:

<div class='responsive-table-wrapper'>
<table>
...
</table>
</div>

and then in CSS:

.responsive-table-wrapper{
overflow-x: auto;
}

This snippet will make the table responsive in smaller resolutions by enabling horizontal scrolling within the table. I hope this helps, if you want more info don't hesitate to answer.

Kostas

 

 

 

inject CSS

Hello Kostas,

Thank you for your support.
I made different trial, without success. I don't know how to modify the external stye sheets. I didn't find a module to overwrite my style sheets....

Thank you in advance for your help

Cheers

Simon
 

 

Hello Simon,

Hello Simon,

As I can see by inspecting your website's code you successfully wrapped the table in the div, but as you said you did not manage to modify the external style sheet. So, in order to override the CERN Theme and apply your own styles, you need to install the CERN Overwrite theme. You can find out how to do it in this link.

After you have installed the theme, then you can make changes to specific elements by applying stylings in selectors. In order to do this, open the overwrite.css file which is placed under the /css/ directory where you installed the theme and then paste the following code inside the file:

.responsive-table-wrapper{
overflow-x: auto;
}

Finally, save the file and clear the website's caches by visiting /admin/config/development/performance and clicking the "Clear All caches" button. I hope this solution helps!

Best Regards,

Kostas

scroll bar

Thank you Kostas. It is working. CERN Overwrite was already installed by default, it is a request from my group (BE).

But I have to tell you, I am not completly satisfy. Now you can't see the table in one glande, by dfault you have the scroll bar, because the dim of the table seem fixed.
It doesn't exist a solution which allow me to compress the table, I would like to get a result similar to http://rex-isolde.web.cern.ch/info, with obviously my data http://isoldeop.web.cern.ch/content/user-info

Thank you in advance.
Regards

Simon

 

 

 

To be honest I don't really

To be honest I don't really understand what you mean by this solution. Also I checked the website you mention and it's not responsive at all. Actually if you check it in small screen you might notice that the table is overflowing.

I proposed this solution because the table structure shouldn't change as it is the periodical table and it has a specific layout. If by compress you mean to "zoom out" the table, then the table wont be visible as all the fonts etc will become really small. As a result, either way the table cannot be visible in a glance in smaller devices.

If you could find a better solution online, let me know to see how you can implement it.

Kostas

To make it look better, you

Hello again Simon,

To make it look better, you can wrap the code I provided into a media query using:

@media only screen and (max-width: 768px) {

.responsive-table-wrapper{
overflow-x: auto;
}

}

 

You can find the media query on the bottom of overwrite.css . This way the scrollbar will appear only in mobile devices and not in normal desktops.

Kostas

 

Dynamic Periodic Table

Hello Kostas,

Yes, you are right. As you have seen, I created this periodic table in order to use it to get access to some ISOLDE report classified by element.
Few colleagues complain about  problems on the formatting of the REX/HIE-ISOLDE run summaries webpage... I will wait their feedback with the scrol bar.

By the way do you have any idea, or suggestion how it would be possible to me to make a copy of this periodic table https://www.ptable.com/ (each cell for each element are smaller and contains more informations) on my drupal site?

Thank you

Cheers

 

Simon

 

 

 

Hello Simon,

Hello Simon,

Regarding the question about the interactive periodic table, I will give you an abstract answer since it can be developed using different ways.

  • First of all, you should create a Content Type (if you haven't done it already) for your periodic elements to encapsulate the different fields. For example, characteristics like the atomic number, the melting point, whether it's a metal or not etc should be fields in your content type. This way you will have everything mapped concerning the different periodic elements.
  • Then, you should create a view that actually displays your content type in a specific way. So, choose as a Content Type the Element content type that you created, select "table" as format and finally choose the fields that you want to be rendered.
  • But how will the view render in the way you want? What you can do about that is to override the template of the view. In other words, you change the logic of the rendering (ex. if you want your elements to  render in specific row and column etc) and to do that you should create a new view template file. Having created the custom template, you can use the Views Custom Template module which provides the functionality of choosing the custom template that you created for this view. On top of that, you will for sure need Javascript to trigger the events and all the state changes of the table. This stackexchange post can help you add your custom JS files to the view.
  • Having created the View, you can either create a Block Display out of this view so that you will have the option to place your block in specific pages. You can also keep the Page Display of the view, based on your needs.
  • Note: Don't forget to place all the files (JS, templates etc) under the theme folder you are currently using, hence CERN Override folder. Furthermore, since you will mess with theming, don't forget to clear the caches when you apply new changes.

If you have any questions on the implementation or you are thinking of an alternative, don't hesitate to answer.

Kostas

You are here