0

Combobox width = 100% not as expected

asked 2009-09-28 20:31:55 +0800

dastultz gravatar image dastultz
797 8

Hello, I'd like my combobox to expand to fill the window:

	<window border="normal" width="100px" style="overflow:visible" contentStyle="overflow:visible">
		<combobox width="100%">
			<comboitem value="1" label="One" />
			<comboitem value="2" label="Two" />
			<comboitem value="3" label="Three" />
		</combobox>
		<div style="background-color: Orange">Test</div>
	</window>

As you can see, it extends past the window. It appears the overall width calculation doesn't include the button. Anyone know how to fix this?

/Daryl

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2009-09-29 12:33:15 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2009-09-29 12:43:19 +0800

I have played a little with it. Seems there's not 'width' attribut for the drop down piece in the css.

Not fine but hope this helps:

	
        <window border="normal" width="100px" style="overflow:visible"
		contentStyle="overflow:visible">

		<combobox width="80%">
			<comboitem value="1" label="One" />
			<comboitem value="2" label="Two" />
			<comboitem value="3" label="Three" />
		</combobox>
		<div style="background-color: Orange">Test</div>

	</window>

	<window border="normal" width="200px" style="overflow:visible"
		contentStyle="overflow:visible">

		<combobox width="80%">
			<comboitem value="1" label="One" />
			<comboitem value="2" label="Two" />
			<comboitem value="3" label="Three" />
		</combobox>
		<div style="background-color: Orange">Test</div>

	</window>

best
Stephan

link publish delete flag offensive edit

answered 2009-09-29 12:34:12 +0800

martin79 gravatar image martin79
96

Hi.
width 100% means: "same width as the parent-tag", but if do this with the combobox, the combobox-inp will get the same width. A solution is a bit more complex, since the design of ZK comboboxes are a HTML/CSS nightmare.

	<div zclass="variableBandbox">
		<bandbox value="Liste Suchen" />
	</div>

and

body .variableBandbox {
	position: relative;
	overflow: hidden;
}

body .variableBandbox .z-bandbox {
	display: block;
	font-size: 0;
	/* this is the space for the button (clickable image) */
	margin-right: 20px;
}

body .variableBandbox .z-bandbox-inp {
	width: 100%;
	font-size: 12px;
}

body .variableBandbox .z-bandbox-btn {
	position: relative; 
	top: 0;
	vertical-align: top;
	font-size: 0; 
}

body .variableBandbox .z-bandbox-btn .z-bandbox-img {
	height: 20px !important;
	width: 20px;

This is my code, but I use my own images. So you have to modify width, margin, height values.

link publish delete flag offensive edit

answered 2009-09-29 14:31:17 +0800

dastultz gravatar image dastultz
797 8

Thanks, Martin, that did the trick.

/Daryl

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2009-09-28 20:31:55 +0800

Seen: 499 times

Last updated: Sep 29 '09

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More