Sencha Touch fieldset, title wrap to new line

Hello,

This is quick blog on one issue I faced recently. I was working on an application where I was having unwanted horizontal scroll bar while working with form panel and field sets. That was causing bit annoying effect for end user because when they try to scroll sometimes it scrolls horizontally sometime it scrolls vertically. After searching a lot I found that it was due to title of fieldset. When title goes beyond some characters it does not warp to next line but it increases the width of container and because of that horizontal scroll bar becomes visible. To prevent this I made following CSS changes.

If you check sencha touch debug css you will find following class in it.


.x-form-fieldset-title {
       text-shadow: white 0 1px 1px;
       color:  #333;
       margin: 1em 0.7em 0.3em;
       color:  #333;
       font-weight: bold;
       white-space: nowrap;
}


Check the last property white-space: nowrap; because of this it does not wrap to next line. So you need to override this class with following definition.


.x-form-fieldset-title {
       text-shadow: white 0 1px 1px;
       color:  #333;
       margin: 1em 0.7em 0.3em;
       color:  #333;
       font-weight: bold;
       white-space: normal;
}


You have to add this class in any CSS file which you load after sencha touch css and it will make the difference. This trick can also be applied for form panel labels.

Hope this helps you.

Align Sencha Touch Overlay in Center

Hello,

Recently I was working on a project where requirement was to show overlay panel with some controls and align it to center.  We know that sencha provide function showBy where we can pass an element to display overlay.

Something like this panel.showBy(element)

Overlay will be displayed adjacent to the element you pass with a triangle arrow displayed towards control. See the image below.

So to make it center I did some tweaks. See the code below.


myPanel.showBy(ele);

var viewPortHeight = Ext.Viewport.windowHeight;
var viewPortWidth = Ext.Viewport.windowWidth;

var windowWidth = viewPortWidth / 2.5;
var windowHeight = viewPortHeight / 3.0;

myPanel.setWidth(windowWidth);
myPanel.setHeight(windowHeight);

 myPanel.setLeft((viewPortWidth - windowWidth) / 2);
 myPanel.setTop((viewPortHeight - windowHeight) / 2);

Following code is to remove that black triangle if you want.

if (discountPanel.element.dom.childNodes[1]) {
         myPanel.element.dom.childNodes[1].parentNode.removeChild(myPanel.element.dom.childNodes[1]);
        }        

That's it and your overlay is aligned to center.