PDA

View Full Version : Rounded panels : CSS newb question



ultraman69
30 Oct 2012, 5:36 PM
Hi !

I'm really green regarding CSS. As a matter of fact, I didn't really understand the concepts, even after reading like 3 books. What I'm trying to achieve here is create some rounded corner panels. I have a Ext.Panel. I give it a class name of "PanelBio" like this :


Ext.create('Ext.Panel', {
id: 'panelBio02',
styleHtmlContent: true,
centered:true,
cls: 'PanelBio',

html: [
'<h1>Lorem epsum.....</h1>'
].join("")
})


So far so good... Then, I had a class definition in SASS file :


.PanelBio {
-webkit-border-radius: 3em !important;
border-radius: 3em !important;
background-color: #333333;
opacity: 0.8;
}


Yet, when I run the code, it's just not working. It is embedded in a couple of layers. First a panel with a Carousel, then an item is a panel that contains this panel. So, when I inspect the element in Chrome dev tools, I get something like this :


<div class="x-container x-panel PanelBio x-floating" id="panelBio02" style="z-index: 4 !important; ">
<div class="x-inner x-panel-inner" id="ext-element-10">
<div class="x-innerhtml x-html" id="ext-element-12">
<h1>Lorem epsum.....</h1>
</div>
</div>
<div class="x-anchor" style="display: none; " id="ext-element-11">
</div>
</div>

Can anyone explain me how could I do to make this work ?

ultraman69
31 Oct 2012, 10:29 AM
It turned out to be the cls configuration. For some reason, I had to use baseCls to override the default style given to all Panels in Sencha. Works like a charm now ! Hope it'll help others.