Semantic-ui: [Divider] - Vertical dividers broken on documentation site

[1vasari]

The vertical dividers appear to just stick to the left side. See this fiddle and screenshot below.

[ecehanece]

I am getting the same problem on my web projects. I think this code is occuring the error:

.ui.grid > .column + .divider, .ui.grid > .row > .column + .divider {
    left: auto;
} 

I suppose if you disable this code sample, the error is going to be removed.

the code is in semantic-ui->dist->semantic.css line: 4679

[llturro]

Happens since last update from Chrome. Firefox renders correct.

[jlukic]

Can confirm Chrome 51 looks fine and Chrome 52 looks bugged.

This seems like a chrome bug, as left: auto should be correct for positioning between flex items. Perhaps I should open a bug report with Chromium.

[jlukic]

@ecehanece @1vasari

I've posted a bug with Chromium. There does not appear to be a workaround from a framework level. Hopefully Chrome team can fix this soon.

View Chrome Issue 633011

https://github.com/w3c/csswg-drafts/issues/401

[Sarke]

A simple workaround if anyone is having problems: http://jsfiddle.net/xox5kt31/2/

[source-creator]

This worked for me:

.ui.grid>.column+.divider, .ui.grid>.row>.column+.divider {
    left: 50%;
}

[Sarke]

That only works if you have exactly 2 columns.

[indiealexh]

Please note. This behaviour is correct to the spec and Edge works the same way. This will not be fixed by browsers.

[jlukic]

@indiealexh This is why the conversation is with spec makers at W3C CSSWG.

[ciajulius]

I'm using Firefox developer edition (52.0a2, 64bit) on ubuntu and having the same problem with vertical divider

[allthesignals]

Updated @Sarke's fiddle to use https when pulling the css in his solution (not sure how to propose changes to your fiddle): http://jsfiddle.net/allthesignals/xox5kt31/7/

[madela]

In older versions of Semantic this problem doesn't exist even with the latest Chrome versions. I think on version 2.2.2 it's rendered correctly

[samdoidge]

This issue is still happening, and all the fixes currently seem to render this as a horizontal divider - not vertical.

[Sarke]

@samdoidge The fix I posted above works.

[samdoidge]

@Sarke Apologies, it looks like it does. I was viewing in a smaller window where it defaults as a horizontal divider.

[amingilani]

Hey @jlukic

I appreciate all the work you've done with this framework. It's a joy to use and I'm sorry https://github.com/w3c/csswg-drafts/issues/401 rejected your proposal.

However, the behavior remains broken in the latest release and it's been so for almost 10 months now. Would it be possible to implement a workaround for the time being while the upstream bureaucracy plays out their drama?

[Bodacious]

Any update on this issue? We're using Semantic UI on a project that's about to go live and still seeing this issue on all browsers except Safari

[bubach]

The proposed fix is only for one divider, or two columns. The documentation page uses more. Looks like wrapping with relative position & padding/margin 0 solves it, like:
<div style="position:relative; margin:0; padding:0;"><div class="ui vertical divider">Or</div></div>

But it would look way nicer if the final solution could be structured as:
<div class="ui vertical"><span class="divider">Or</span></div> or similar.

[qicai21]

How about manually set style attr to the div, like:

<div class="ui vertical divider" style="left:50%"> Or</div>

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[amingilani]

Generating activity

On Tue, Jun 5, 2018, 9:55 PM stale[bot] [e-mail] wrote:

There has been no activity in this thread for 90 days. While we care about
every issue and we’d love to see this fixed, the core team’s time is
limited so we have to focus our attention on the issues that are most
pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be
closed automatically for housekeeping. To prevent this, simply leave a
reply here. Thanks!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Semantic-Org/Semantic-UI/issues/4342#issuecomment-394783040,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABIiyMShHUlCj7Bbi8ewuA_2N7ehFfhxks5t5rfxgaJpZM4JVt_A
.

>

—Gilani

[kariyngva]

This workaround might be useful to someone, so long as they don't need dividers for more than five columns. It's not pretty but seems to work but I'm new to Semantic UI so this might not work as well as I think.

The .column selector can be replaced by the * selector. For more columns just repeat the pattern.

.two .ui.vertical.divider {
  left: 50%;
}


.three {
  .ui.vertical.divider {
    left: 33%;
  }

  .ui.vertical.divider + .column + .ui.vertical.divider {
    left: 66%;
  }
}

.four {
  .ui.vertical.divider {
    left: 25%;
  }

  .ui.vertical.divider + .column + .ui.vertical.divider {
    left: 50%;
  }

  .ui.vertical.divider + .column + .ui.vertical.divider + .column + .ui.vertical.divider {
    left: 75%;
  }

  .ui.vertical.divider + .column + .ui.vertical.divider + .column + .ui.vertical.divider + .column + .ui.vertical.divider {
    left: 100%;
  }
}

.five {
  .ui.vertical.divider {
    left: 20%;
  }

  .ui.vertical.divider + .column + .ui.vertical.divider {
    left: 40%;
  }

  .ui.vertical.divider + .column + .ui.vertical.divider + .column + .ui.vertical.divider {
    left: 60%;
  }

  .ui.vertical.divider + .column + .ui.vertical.divider + .column + .ui.vertical.divider + .column + .ui.vertical.divider {
    left: 80%;
  }
}


@media screen and (min-width: (@tabletBreakpoint - 1px)) and (max-width : (@computerBreakpoint - 1px)) {
  .stackable.four,
  .stackable.three {
    .ui.vertical.divider {
      left: 50% !important;
    }
  }

  .stackable.five {
    .ui.vertical.divider {
      left: 34% !important;
    }

    .ui.vertical.divider + .column + .ui.vertical.divider + .column + .ui.vertical.divider + .column + .ui.vertical.divider {
      left: 67% !important;
    }
  }
}

[bubach]

@kariyngva Did you read/try any of the already suggested solutions before you wrote ~500 lines of CSS...?

It's very simple

div.divider-wrap {
  position: relative;
  padding: 0;
  margin: 0;
}

And replace:
<div class="ui vertical divider">Or</div>
With
<div class="divider-wrap"><div class="ui vertical divider">Or</div></div>

[kariyngva]

@bubach I somehow managed to miss your comment. Thanks for pointing that out that solution works better. 🤦‍♂️

[Melmoth-the-Wanderer]

So I have read the discussion here https://github.com/w3c/csswg-drafts/issues/401 which indicates that CSSWG is not going to change the behavior. This makes me sad as it's weird, however the show must go on - are there going to be any changes from Semantic-UI's side, @jlukic? Are you open for PR's on this?

[jlukic]

I've updated the docs in next version to remove usage that is no longer supported (three column grids).

I'm open to PRs on this generally, but i'm not sure a reasonable solve since position: auto no longer works inside flex containers.