Ionic-framework: ion-split-pane: expose max-width as CSS custom property

[simonhaenisch]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

I want to be able to adjust the max width of the ion-split-pane side menu.

Describe Preferred Solution

Have a --max-width CSS custom property on ion-split-pane. Might be as simple as changing

{ max-width: $split-pane-md-side-max-width; }

to

{ max-width: var(--max-width, $split-pane-md-side-max-width); }

Describe Alternatives

Only way to currently make it work is to set

.menu-pane-visible {
  max-width: 270px !important;
}

which applies only for the expanded version. If max-width is set on the ion-menu, it messes up the backdrop for the collapsed version.

[brandyscarney]

I agree with this. We will need to scope/shadow the split-pane component though. It seems as if the current CSS won't even work for IE since it has a CSS variable for border. It will need to be something like the following (not tested):

split-pane.md.scss

:host {
  --min-width: #{$split-pane-md-side-min-width};
  --max-width: #{$split-pane-md-side-max-width};
}

:host(.split-pane-visible) .split-pane-side {
  --border: #{$split-pane-md-side-start-border};
}

:host(.split-pane-visible) .split-pane-side[side=end] {
  --border: #{$split-pane-md-side-end-border};
}

split-pane.scss

:host(.split-pane-visible) .split-pane-side {
  min-width: var(--min-width);
  max-width: var(--max-width);

  border: var(--border);
}

Might need to change up the border implementation, but just an idea. cc @manucorporat

[troyanskiy]

Hi @brandyscarney
I'm going to create a PR for that issue if you don't mind.

I have small question.

Is there any reason to have not really optimized code (duplicated lines) in the scss?
For example split-pane.ios.scss file:
Original:

@import "./split-pane";
@import "./split-pane.ios.vars";

// Split Pane
// --------------------------------------------------

.split-pane-ios {
  --border: #{$split-pane-ios-border};
}

.split-pane-ios.split-pane-visible > .split-pane-side {
  min-width: $split-pane-ios-side-min-width;
  max-width: $split-pane-ios-side-max-width;

  border-right: var(--border);
  border-left: 0;
}

.split-pane-ios.split-pane-visible > .split-pane-side[side=end] {
  min-width: $split-pane-ios-side-min-width;
  max-width: $split-pane-ios-side-max-width;

  border-right: 0;
  border-left: var(--border);
}

I think more optimized is:

@import "./split-pane";
@import "./split-pane.ios.vars";

// Split Pane
// --------------------------------------------------

.split-pane-ios {
  --border: #{$split-pane-ios-border};

  &.split-pane-visible {

    & > .split-pane-side {
      min-width: $split-pane-ios-side-min-width;
      max-width: $split-pane-ios-side-max-width;

      border-right: var(--border);
      border-left: 0;

      &[side=end] {
        border-right: 0;
        border-left: var(--border);
      }
    }

  }
}

Which structure of scss should I use for the PR and futured PRs your or optimized one provided above?

Thanks!

[troyanskiy]

In fact, max-width can be overwritten by:
app.component.scss

:host {
  .menu-pane-visible.split-pane-side {
    max-width: 20%;
  }
  // or
  .split-pane-visible > .split-pane-side {
    max-width: 20%;
  }
}

[brandyscarney]

@troyanskiy I'm not sure why we have the side twice. I noticed that too and would like to remove it. If you can optimize it and it still works for the difference scenarios then that's fine with me. 🙂

The only thing is we don't like to use the nested ability of Sass because we want to keep it as close to CSS as possible.

[troyanskiy]

@brandyscarney PR is here.

[cjorasch]

+1 for this feature.

A fixed width menu pane is pretty common in web apps (gmail, slack, etc.)

The current percentage based sizing often does not work very well because you need to design the side bar content to fit the smallest potential size anyway. Growing the width of the pane results in a large amount of wasted white space.

[tgangso]

Any progress?
Is there any valid workarounds?

[simonhaenisch]

@brandyscarney if this needs any breaking changes, would there be any chance to get it into the upcoming v5 release?

[brandyscarney]

@simonhaenisch Yes, it needs to be updated to scoped or shadow which is breaking. It's on the list to do but no one is assigned to it yet.

[liamdebeasi]

Thanks for the feature request. This has been added via https://github.com/ionic-team/ionic/pull/19754 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.