data-inset option for Collapsible / Collapsible sets #3976

Closed
sjdecaires opened this Issue Apr 6, 2012 · 5 comments

Comments

Projects
None yet
5 participants
@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.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 6, 2012

Contributor

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

Contributor

toddparker commented Apr 6, 2012

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

@ghost ghost assigned Wilto Apr 6, 2012

@istrasoft

This comment has been minimized.

Show comment
Hide comment
@istrasoft

istrasoft Jul 13, 2012

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}

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}

@ghost ghost assigned jaspermdegroot Jul 14, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 15, 2012

Member

+1

I will work on making inset optional for collapsibles.

Member

jaspermdegroot commented Jul 15, 2012

+1

I will work on making inset optional for collapsibles.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 15, 2012

Member

@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?

Member

jaspermdegroot commented Jul 15, 2012

@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?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jul 16, 2012

Contributor

@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.

Contributor

toddparker commented Jul 16, 2012

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment