PDA

View Full Version : Button Alignment v0.5beta



m4chine
Jun 05, 2008, 6:54 PM
I think I'm missing something, I've been trying to change the default center align behavior of the ext:Button. I cannot get an Icon/Text to align left inside the button, or right for that matter.

What I'm trying to accomplish is to have button within the accordion. I'd like the button to appear just as a panel header, but panel has no onclick event, so I'm stuck with buttons (right?). I'd like them to fill the width of the accordion. So I set the minwidth to the default width. It seems the button element is missing some serious css support. Sure assign it a class with text-align left, but that totally borks the look.

Suggestions?

thanks,
Brandon

geoffrey.mcgill
Jun 05, 2008, 7:08 PM
Hi Brandon,

Can you post some code? There will be support for Toolbar (http://extjs.com/deploy/dev/docs/?class=Ext.Toolbar) (tbar & bbar) soon, which might be closer to the functionality you require.

m4chine
Jun 06, 2008, 1:26 PM
<ext:Button ID="btnCourseAdd" runat="server" style="text-align: left" Icon="ApplicationFormAdd" IconCls="icon-applicationformadd" MinWidth="172px" Text="Add" />


This code will produce a button 172px wide and although I have specified text-align left, the text and icon image remain centered within the button. I would like alignment option, left, right and center.

Thoughts?

Thanks,
Brandon

m4chine
Jun 09, 2008, 4:03 PM
bump.

geoffrey.mcgill
Jun 09, 2008, 7:39 PM
Hi Brandon,

I was able to create a right aligned (text + icon) Button with a bit of custom css.

I posted a sample to the sandbox, see http://sandbox.ext.net/Form/Button/RightWithIcon.aspx

There was also another clever solution posted by Vlad (see http://forums.ext.net/showthread.php?postid=247.aspx) which might provide a few more css options/hacks.

Hope this helps.

haltenberg
Jun 09, 2008, 9:32 PM
<ext:Panel ID="Panel1" runat="server">
<Buttons>
<ext:Button ID="Button1" runat="server"/>
</Buttons>
<Content>
Content here
</Content>
</ext:Panel>


Buttons are always rendered below Content in the bottom right corner. Is it possible to render them above Content? MenuAlign attribute doesn't seem to be working at all.

Buttons appear to be block elements? Text always starts with a new line. I didn't find any way to put two buttons together in one line without a table. Any hints?
Thanks!

geoffrey.mcgill
Jun 09, 2008, 11:21 PM
With an upcoming (v0.7.0?) release, it will be possible to add a tbar (Top Toolbar) to any Panel, which can then contain buttons. The following sample demonstrates, see http://extjs.com/deploy/dev/examples/menu/menus.html

Of course this is possible to create now, but you would have to hand roll the .js.

Adding "display:inline;" to the StyleSpec property forces the Buttons inline.

Example


<ext:Button runat="server" Text="Submit" StyleSpec="display:inline;" />

Hope this helps.

haltenberg
Jun 09, 2008, 11:52 PM
Thanks for the "display:inline" hint, Geoffrey!
And thank you for your awesome work!

m4chine
Jun 10, 2008, 2:10 PM
Yes Geoffrey, thanks as always.

-brandon