CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-mobile
Baked Inhalf
Baked Inhalf

Reputation: 3735

jQuery Mobile remove top rounded corners

I have a DIV which holds an <ul> and a <li> to get a nice header. Below is a collapsibleset. Problem is that it has ui-corner-all class. If I remove the class I will no longer have rounded corners on my collapsibleset. Trying to add ui-corner-bottom instead but nothing happens.

$("#mydiv ul").append(

                "<div data-role='collapsibleset' data-theme='a' data-content-theme='a' style='margin: 0'>"
                +"<div data-role='collapsible'>"
                +"<h3>Section 1</h3>"
                +"<p>I'm the collapsible content for section 1</p>"
                +"</div>"
                +"<div data-role='collapsible'>"
                +"<h3>Section 2</h3>"
                +"<p>I'm the collapsible content for section 2</p>"
                +"</div>"
                +"<div data-role='collapsible' class='ui-last-child'>"
                +"<h3>Section 3</h3>"
                +"<p>I'm the collapsible content for section 3</p>"
                +"</div>"
                +"</div>"
        
        ).trigger("create");

// not working -> //$("#mydiv div").removeClass("ui-corner-all").addClass("ui-corner-bottom").trigger("create");

Upvotes: 1

Views: 852

Answers (2)

Omar
Omar

Reputation: 31732

Update

To remove border-radius from collapsibleset's top only.

.ui-collapsible-set > .ui-collapsible.ui-corner-all {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

Just add data-corners="false" to collapseibleset div. Also, use .enhanceWithin() instead of .trigger("create") as it is deprecated in jQM 1.4.

$("#mydiv ul").append("<div data-role='collapsibleset' data-theme='a' data-content-theme='a' style='margin: 0' data-corners='false'>"
                +"<div data-role='collapsible'>"
                +"<h3>Section 1</h3>"
                +"<p>I'm the collapsible content for section 1</p>"
                +"</div>"
                +"<div data-role='collapsible'>"
                +"<h3>Section 2</h3>"
                +"<p>I'm the collapsible content for section 2</p>"
                +"</div>"
                +"<div data-role='collapsible' class='ui-last-child'>"
                +"<h3>Section 3</h3>"
                +"<p>I'm the collapsible content for section 3</p>"
                +"</div>"
                +"</div>").enhanceWithin();

Demo

Upvotes: 2

Stefan Ticu
Stefan Ticu

Reputation: 2103

Remove the class and add round corners by css:

-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

You can use this tool for code generation: http://border-radius.com/

Upvotes: 1

Related Questions