Print Page - Menubutton / Splitbutton size

Title: Menubutton / Splitbutton size
Post by: iceh on December 03, 2013, 06:42:26 AM

Hi,

I'd like to make the Split/Menu Buttons bigger via style.

I add a sample image.

Two questions:

1) Any Idea how i can do that?

2) I also like to make the Menu Items bigger for this
type of button.

Title: Re: Menubutton / Splitbutton size
Post by: stworthy on December 03, 2013, 08:09:43 AM

Try adding the following code to your page.

Code:

	<style>
		a.l-btn{
			height:36px;
		}
		a.l-btn span.l-btn-left{
			padding-top:0;
			padding-bottom:0;
			height:36px;
		}
		a.l-btn span span.l-btn-text{
			height:36px;
			line-height:36px;
			font-size:16px;
			font-weight:bold;
		}
		.s-btn-downarrow,.m-btn-downarrow{
			font-size:16px;
			font-weight:bold;
		}
	</style>

Title: Re: Menubutton / Splitbutton size
Post by: iceh on December 03, 2013, 08:21:00 AM

Hi stworthy,

thank you for your quick answer!

Is there a way to do this selective just for some buttons?

Code:

$('#sb').splitbutton({
    baseStyle: 'bigSplitButtonCls'
});

Title: Re: Menubutton / Splitbutton size
Post by: stworthy on December 03, 2013, 08:22:59 PM

Assign the 'big-btn' class to a menubutton and it will become bigger.

Code:

<style>
	a.big-btn{
		height:36px;
	}
	a.big-btn span.l-btn-left{
		padding-top:0;
		padding-bottom:0;
		height:36px;
	}
	a.big-btn span span.l-btn-text{
		height:36px;
		line-height:36px;
		font-size:16px;
		font-weight:bold;
	}
	a.big-btn .s-btn-downarrow,a.big-btn .m-btn-downarrow{
		font-size:16px;
		font-weight:bold;
	}
</style>

<a href="#" class="easyui-menubutton big-btn" menu="#mm">A MenuButton</a>
<div id="mm">
	<div>Item1</div>
	<div>Item2</div>
	<div>Item3</div>
</div>

Title: Re: Menubutton / Splitbutton size
Post by: iceh on December 04, 2013, 09:00:05 AM

Groovy ;D

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: iceh on December 03, 2013, 06:42:26 AM