in-canvas-for-x width:auto instead of width:inherit

[RvWensen]

How to reproduce this bug:

inside of a cell with a width definition class for example "large-4"

so:

<div class="cell large-4">
   <div class="off-canvas in-canvas-for-large position-left" data-off-canvas>

What should happen:

The off-canvas should be full width if you ask me.
Instead it becomes also a large-4 so 33% of the width of the div it is in.
That because the widht of the class in-canvas-for-large is width:inherit.

So if i want to create what i think in most cases is desired behavior i need to do the following:

<div class="cell large-4">
    <div style="width:auto;">
       <div class="off-canvas in-canvas-for-large position-left" data-off-canvas>

idea:

Change width:inherit to width:auto for the class in-canvas-for-x

[DanielRuf]

Using grid-x container on the off-canvas does not help here?

[RvWensen]

@DanielRuf

it won't work if you make like:

<div class="grid-x">
   <div class="cell large-4">
      <div class="off-canvas in-canvas-for-large position-left" data-off-canvas>

Because the in-canvas-for-large will still take over the size of the above div which is large-4 so 33%.

it will work if you make it like this:

<div class="grid-x">
   <div class="cell large-4">
      <div class="grid-x">
         <div class="cell">
            <div class="off-canvas in-canvas-for-large position-left" data-off-canvas>

But then you make even more extra div's then my above example with:

<div style="width:auto;">

[DanielRuf]

Why not add the needed class(es) from the extra divs to the offcanvas div?

[RvWensen]

@DanielRuf

Do you mean that i write a class and overwrite the default value of width:inherit to width:auto?
Sure i can do that, but i prefer to use default functionality of Foundation.
And there is no way to edit this in the _settings.scss.

Is there a reason to use width:inherit? If so could you explain me why?

[DanielRuf]

It is basically a reset and the default behavior and default useragent styles by browser vendors, see https://github.com/zurb/foundation-sites/blob/develop/scss/components/_off-canvas.scss#L414

In my opinion this is highly project related and not a general feature that is needed. What do the others think? @SassNinja @ncoden

[RvWensen]

@DanielRuf

Width's in foundation are for is far is i know always 100%, like for example the cell default behavior.
And if you want it to be for example to be half of the size you have to add a class.

And for the in-canvas-for-x its the other why around.
For some reason it is the size form the div above and if you want it to be full width you have to create your own class for it.

Thats why i find it weird :-)

[DanielRuf]

Keep in mind that incanvas resets the styles and that breakpoint media rules have a higher specificity than normal classes and selectors.

[RvWensen]

@DanielRuf
I found the best 'solution' to the problem.

<div class="grid-x grid-padding-x">
   <div class="cell large-auto">
      <div class="off-canvas in-canvas-for-large position-left" data-off-canvas>
      </div>
   </div>
   <div class="cell large-8">
      <p>content</p>
   </div>
</div>

But i find it a little wonky.

[SassNinja]

I've created the in-canvas feature to transform the off-canvas for certain breakpoint into regular page content. So an off-canvas which has become in-canvas is supposed to behave identical to a non off-canvas element.

I just tested the setup in talk and can confirm it's not working correctly (a codepen is always appreciated btw).
You're right @RvWensen it should be width: auto instead of width: inherit. Can you make a PR to fix this or shall I?

[RvWensen]

@SassNinja next time i will make a codepen. Sorry i forgot about that, i am quite new to this.

I know how to make a pull request, but i not sure how to do it the right way here.
I would love to help so if you can show me a readme or a 'how to' the i will follow the steps.

[SassNinja]

@RvWensen great! It's quite easy:

• fork the repo
• create a feature/fix branch (starting from develop)
• commit the changes & push
• submit PR, with develop as target/base (with reference to this issue in description text)

contribution guide can be found here
https://foundation.zurb.com/get-involved/code-contributor-guide.html