[CLOSED] alignTo not working when doing custom theming

[randy85253]

I was trying to figure out how to center a control in a panel, and having no luck until I ran across this example which worked as written.

http://forums.ext.net/showthread.php...6496-16-1.aspx

However, when I tried to incorporated this in my project it failed. I traced this down to the fact that we are using custom ASP.NET Themes, and in my ScriptManager we are setting RenderStyles=None because we are providing the styles ourselved and we don't want them provided from the resources resources.

To duplicate this problem, simply set RenderSyles=None in this example.

It appears that the ...applyTo(this.body,'c-c') command in this example is dependent on some sytyle sheets you are providing that we are not. We are including the ext-all.css file in our App_Themes/{CurrentTheme} folder.

What am I missing? How can I get this example working with a custom Theme scenario?

[randy85253]

Oops, Nevermind.

My TestPage was not derived from my BasePage, where the theme was being set. So the Theme was not being set, so it wasn't getting the ext-all.css file there.

Works fine now.

[Vladimir]

Hi,

I tested that example with RenderStyles="None" and label centering correctly still. I don't think that styles can affect on it because uses absolute coordinates when element is centering (but may be I am wrong and styles can affect).


Can you post your custom css file? If you remove RenderStyles="None" then does it solve the problem?

[randy85253]

Vladimir;

Even after I got the example working, when I changed the center control to a CheckBox it failed. So there may be something else going on here.

I'll post a project in a few minutes

[randy85253]

Vladimir;

Here is an example of the problem I'm seeing centering a CheckBox, note that the label is centered fine.

If this doesn't shed light on the RenderStyles=None issue with lables, I can send a whole project with my CSS files off line.

using Coolite.Ext.Web;
using Cool=Coolite.Ext.Web;


namespace Test
{
  public class CooliteUpload : System.Web.UI.Page
  {
    protected HtmlForm form1;
    private Cool.ScriptManager  _scriptManager  = new Cool.ScriptManager();
    private Cool.ViewPort         _viewPort         = new Cool.ViewPort();
    private Cool.BorderLayout   _borderLayout   = new Cool.BorderLayout();
    private Cool.TabPanel         _tabPanel        = new Cool.TabPanel();
  
    protected void Page_Init(object sender, EventArgs e)
    {
      form1.Controls.Add(_scriptManager);
      form1.Controls.Add(_viewPort);
      
      _viewPort.BodyControls.Add(_borderLayout);
      _borderLayout.Center.Items.Add(_tabPanel);
      
      AddTab_Label();
      AddTab_Checkbox();
    }
    private void AddTab_Label()
    {
      Cool.AbsoluteLayout layout  = new Cool.AbsoluteLayout();
      Cool.Anchor             anchor  = new Cool.Anchor();
      Cool.Label              label     = new Cool.Label();
      Cool.Tab                tab       = new Cool.Tab("Centered Label");
      
      _tabPanel.Tabs.Add(tab);
      tab.BodyControls.Add(layout);
      layout.Anchors.Add(anchor);
      anchor.Items.Add(label);
      
      label.ID    = "label1";
      label.Text  = "Howdy Doody";
      
      tab.Listeners.AfterLayout.Handler = "label1.el.alignTo(this.body, 'c-c');";
    }
    private void AddTab_Checkbox()
    {
      Cool.AbsoluteLayout layout     = new Cool.AbsoluteLayout();
      Cool.Anchor             anchor     = new Cool.Anchor();
      Cool.Checkbox         checkbox  = new Cool.Checkbox();
      Cool.Tab                 tab          = new Cool.Tab("Centered Checkbox");
      
      _tabPanel.Tabs.Add(tab);
      tab.BodyControls.Add(layout);
      layout.Anchors.Add(anchor);
      anchor.Items.Add(checkbox);
      
      checkbox.ID       = "checkbox1";
      checkbox.BoxLabel = "Howdy Doody";
      
      tab.Listeners.AfterLayout.Handler = "checkbox1.el.alignTo(this.body, 'c-c');";
    }
  }
}

[Vladimir]

Hi,

For checkbox need align the 'wrap' element instead 'el'

tab.Listeners.AfterLayout.Handler = "checkbox1.wrap.alignTo(this.body, 'c-c');";