Giter VIP home page Giter VIP logo

Comments (8)

pat-s avatar pat-s commented on July 28, 2024

Thanks. How about this

.table {
    width: 135%;
    max-width: 135%;
    margin-bottom: 21px;
    background-color: white;
    position: sticky;
}

This expands the table width and adds a white background. With this tables are now allowed to span more or less the width of the full container rather than just the body-width.
This way, the sidebar is still sticky for other sides and will be auto-covered by the table if there is one.

The important parts are

  • position: sticky;
  • width: 135%;

others are just the preserved settings from the default css table setting.

from mlr-tutorial.

jakob-r avatar jakob-r commented on July 28, 2024

I needed to add z-index so that it actually covers the sidebar. So this would have to be added to extra.css (margin-bottom will be inherited from boostrap.min.css)

.table {
    width: 135%;
    max-width: 135%;
    background-color: white;
    position: sticky;
    z-index: 1;
}

from mlr-tutorial.

pat-s avatar pat-s commented on July 28, 2024

Hm, strange. Usually higher z-index values should cover lower ones. On the other side this setting shouldn't do any harm. Let's go with this and see how the result looks like.

from mlr-tutorial.

pat-s avatar pat-s commented on July 28, 2024

I might need to adjust width later to see how it plays with not so wide tables, e.g. in mlr3.

from mlr-tutorial.

pat-s avatar pat-s commented on July 28, 2024

Fixed in mlr-org/mlr3pkgdowntemplate@86b29e0.

from mlr-tutorial.

jakob-r avatar jakob-r commented on July 28, 2024

I might need to adjust width later to see how it plays with not so wide tables, e.g. in mlr3.

This might be an issue. We can select the tables the following way:

  • measures
#classification .table, #multilabel-classification .table, ...
  • learners (because the id includes the number we have to be creative)
div[id|=classification] .table, div[id|=regression] .table, ...

Okay. This is very specific and not really nice. Unfortunately I don't find any attribute I can select on a higher level (e.g. all tables in integrated learners) because the template does not generate any specific id or whatsoever :(

We could add something like <span class="wideTable"></span> in the Rmd files in front of each table. This should be ignored for the pdf but will give us the possibility to select the following table with:

span.wideTable+.table {
    width: 135%;
    max-width: 135%;
    background-color: white;
    position: sticky;
    z-index: 1;
}

I think I like this solution beacuse we don't have to be too content specific in the css files and we can use this behavior wherever we want.

from mlr-tutorial.

pat-s avatar pat-s commented on July 28, 2024

We could add something like in the Rmd files in front of each table. This should be ignored for the pdf but will give us the possibility to select the following table with:

Sounds good. Do you wanna do a PR?

from mlr-tutorial.

pat-s avatar pat-s commented on July 28, 2024

@jakob-r I've reverted to use normal table styles again. The change caused all tables to overflow everything horizontally.

I also added a new css class .wideTable which can be used for specific tables.

It should go something like

table = <raw markdown table>

knitr::kable(table, table.attr='class="wideTable"', format = "html")

Though things are not working perfectly yet.
It might even be easier when using R objects instead of raw markdown tables.

I am not sure if the table.attr arg is silently dropped for PDF or will cause problems.

from mlr-tutorial.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.