css Calc() problem

css Calc() problem

by Benoît Rousseau -
Number of replies: 6

Hi, I have a problem with my css theme, 


In my css code i put : 

.p-a-1 {

     margin-left: -315px;

width : calc(100% + 345px);

}

But when I load the page, if I check the source code, the second line are not showing.


Developper tool : 

.p-a-1 {
  1. margin-left: -315px;
}

What is the problem ?

Average of ratings: -
In reply to Benoît Rousseau

Re: css Calc() problem

by Benoît Rousseau -
I found a solution : 


.p-a-1 {

    margin-left: -315px;

    margin-right: -30px;

    width: -webkit-fill-available;

    right: 0;

    left: 0;

}


Average of ratings: -
In reply to Benoît Rousseau

Re: css Calc() problem

by Fábio Rocha -

Hi, got exactly the same problem overhere.

But I don't want to use your solution.

Does anyone have any idea how to solve this bug? Or why is this happening?

Average of ratings: -
In reply to Benoît Rousseau

Re: css Calc() problem

by Rebecca Trynes -

Could it be as simple as the fact that you have a space next to width?

width : calc(100% + 345px);  

As opposed to:

width: calc(100% + 345px);

?????


Average of ratings: -
In reply to Rebecca Trynes

Re: css Calc() problem

by Rune Jensen -

Hi there,

I know I'm reviving a very old thread, but I've also run into this issue. Changing the syntax to what you suggest doesn't work either. It seems Moodle simply strips out the calc function.

Has anyone else found a work-around for this problem?

Average of ratings: -
In reply to Rune Jensen

Re: css Calc() problem

by David Scotson -

There's some workarounds listed in the bug tracker commemts for MDL-61879 and it seems the issue is now fixed in the CSS parser library that Moodle uses, so upgrading that is probably a solution if you have that kind of server access.



Average of ratings: -