Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

data-inset option for Collapsible / Collapsible sets #3976

Closed
sjdecaires opened this Issue · 5 comments

5 participants

sjdecaires Todd Parker Alexander Jasper de Groot Mat Marquis
sjdecaires

Several components have options for curved corners using data-inset="true", but other components such as Collapsible appear to enforce inset. Can this attribute be added to components like collapsible in the future?

This will allow Collapsible components to appear more like a list view.

Todd Parker

I like this idea quite a lot. Flagging as a feature request for 1.2

Mat Marquis Wilto was assigned
Alexander

I have a working example, only 5 lines of CSS needed to be changed to create a non-inset collapsible set with collapsibles each containing a non-inset list ( in my case I was using right-aligned icon )

.ui-collapsible-set {margin:-15px}
.ui-collapsible-set .ui-listview {margin:0}
.ui-collapsible-content {padding:0; margin:0; border:0}
.ui-collapsible-heading .ui-btn-icon-right .ui-btn-inner {padding-left:18px}
.ui-collapsible-heading .ui-btn-icon-right .ui-icon {right:18px}

Jasper de Groot

+1

I will work on making inset optional for collapsibles.

Jasper de Groot

@toddparker

Collapsibles have negative margin to negate half of the padding on ui-content. Do you still want it that way if we have non-inset collapsibles as well?

Todd Parker

@uGoMobi - I'd rather use the standard margins for every element so I vote to standardize these. That would mean not negating padding for normal ones and introducing a new type that is full width (data-inset="false"). The current collapsibles are just inset by default.

It's a bit odd bending the listview inset option for the job here since they are really just normal buttons by default, not really inset but it's better than introducing a new idea.

Jasper de Groot jaspermdegroot closed this issue from a commit
Jasper de Groot jaspermdegroot Collapsible (set): Added option inset. Adjusted CSS for inset collaps…
…ible (removed -8px margin) and added CSS for non-inset collapsibles. Fixes #3976 - data-inset option for Collapsible / Collapsible sets.
5428e2a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.