General developer forum

css Calc() problem

 
Picture of Benoît Rousseau
css Calc() problem
 

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: -
Picture of Benoît Rousseau
Re: css Calc() problem
 
I found a solution : 


.p-a-1 {

    margin-left: -315px;

    margin-right: -30px;

    width: -webkit-fill-available;

    right: 0;

    left: 0;

}


 
Average of ratings: -
Picture of Fábio Rocha
Re: css Calc() problem
 

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: -
Me
Re: css Calc() problem
 

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: -
Picture of Rune Jensen
Re: css Calc() problem
 

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: -
Me
Re: css Calc() problem
 
What version of Moodle are you on, and what theme are you using?
 
Average of ratings: -
Picture of David Scotson
Re: css Calc() problem
Core developersDocumentation writersPlugin developers

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: -