Print Page - Remove textbox Border

Title: Remove textbox Border
Post by: arma on November 08, 2015, 04:26:26 AM

Hi,

1. How can i remove border in textbox ? If i set multiline textbox width and height 100% to its panel container it shows rounded corner which make it does not look nice.

2. Is there a feature to just show/hide border from certain side just like in plain css: border-left, border-right etc for any easyui component. For example nested layout without padding can show double border from 2 component. Grid inside a Panel inside layout. Setting border to false still not perfect.

Thanks.

Title: Re: Remove textbox Border
Post by: stworthy on November 08, 2015, 07:19:47 PM

You can extend the 'setBorder' method to display or hide the border dynamically.

Code:

$.extend($.fn.textbox.methods, {
	setBorder: function(jq, border){
		var style = $('#easyui-textbox-border');
		if (!style.length){
			$('head').append(
					'<style id="easyui-textbox-border">' +
					'.textbox-noborder{border-color:transparent;border-radius:0}' +
					'</style>'
			);
		}
		return jq.each(function(){
			var span = $(this).next();
			if (border) {
				span.removeClass('textbox-noborder');
			} else {
				span.addClass('textbox-noborder');
			}
		});
	}
})

Usage example:

Code:

$('#tt').textbox('setBorder', false);  // hide the border
$('#tt').textbox('setBorder', true);   // display the border

Title: Re: Remove textbox Border
Post by: arma on November 09, 2015, 06:47:12 PM

Thank you so much stworthy ;D

Title: Re: Remove textbox Border
Post by: karogel on October 23, 2016, 07:44:50 PM

Thank you also. i need the same code

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: arma on November 08, 2015, 04:26:26 AM