Results 1 to 7 of 7
  1.    #1  
    I'm trying to create a radio button with 2 choices that does not span the entire width of the screen. I noticed in the Homebrew app called "API Demo", the radio button demo only seems to go about 3/4 of the width of the screen but I can't seem to make it do the same thing.

    My scene HTML is:
    Code:
    <table width="100%">
    	<tr>
    		<td width="30%"><div id="MyButton" name="MyButton1" x-mojo-element="Button"></div></td>
    		<td width="70%">
    			<div id="radioButton" x-mojo-element="RadioButton"></div>
    		</td>
    	</tr>
    </table>
    As you can see, I'm trying to use 30% on the left side for a button (working fine), and 70% on the right side for the radio buttons. However, it goes off the screen on the right.

    My code is:
    Code:
    // setup radio button
    	this.radioAttributes = {
    		choices: [
    			{label: 'Alpha', value: 1},
    			{label: 'Time', value: 2},
    		]
    	}
    	
    	this.radioModel = {
    		value: 1,
    		disabled: false
    	}
    	this.controller.setupWidget('radioButton', this.radioAttributes,this.radioModel );
    	this.radioCallback = this.radioCallback.bindAsEventListener(this);
    	Mojo.Event.listen(this.controller.get('radioButton'),Mojo.Event.propertyChange,this.radioCallback);
    The API demo's HTML is:
    Code:
    <div id='radioButtonScene'>
    	<div class="palm-page-header multi-line">
    		<div class="palm-page-header-wrapper">
    			<div id="radioButtonTitle" class="title left">Radio Button</div>
    		</div>
    	</div>
    
    	<div x-mojo-element="RadioButton" id="radiobutton"></div>
    	Value: <span id="valueSpan"></span>
    
    </div>
    I don't see anything strange going on but I must be missing something. But what is it? Help?
  2. #2  
    I haven't messed with the radio buttons, but I bet you need to deal with the CSS classes of the DIV element for Widget. Just wrapping a table around it won't do anything. A table's width properties are only valid if the contents of the cells don't push further than the with set.
    Your Pre wants Word Whirl from the App Catalog.

    It told me.
  3.    #3  
    I haven't messed with the radio buttons, but I bet you need to deal with the CSS classes of the DIV element for Widget. Just wrapping a table around it won't do anything. A table's width properties are only valid if the contents of the cells don't push further than the with set.
    Yup. I played with the table and it does not affect the width of the radio button in any way that I can tell. I tried using CSS DIV width with the same results. However, I discovered something very strange.

    Original code:
    Code:
    this.radioModel = {
    	value: 1,
    	disabled: false
    }
    Original image:


    New code (without value):
    Code:
    this.radioModel = {
    	disabled: false
    }
    New image:


    As you can see, the small change made the width became correct but there is no radio button pressed by default (e.g. both buttons are NOT pressed).

    This seems like a bug to me. Why would the value not being there have anything to do with the width?
    Last edited by djpushplay; 09/08/2009 at 04:34 PM. Reason: Added images
  4. #4  
    Interesting. I've seen similar strangeness with the buttons. Most of my non-full width buttons aren't Mojo type, just Mojo style button elements, for this reason.
    Your Pre wants Word Whirl from the App Catalog.

    It told me.
  5. hj00000001's Avatar
    Posts
    1 Posts
    Global Posts
    3 Global Posts
    #5  
    I was able to stop radio buttons from spaning the entire page by adding the following classes to my application's stylesheet.

    .palm-radiobutton.two div {
    width: auto;
    }
    .palm-radiobutton.three div {
    width: auto;
    }
  6.    #6  
    I've confirmed that this indeed does fix the problem. Thanks hj!
  7. krid's Avatar
    Posts
    117 Posts
    Global Posts
    135 Global Posts
    #7  
    Thanks, this was the inspiration I needed to figure out how to put multiple checkboxes in one list row. Turns out all I needed was this:

    .multi-checkbox.checkbox {
    float: none;
    }

    And then I set the class "multi-checkbox" on the row holding the checkboxes.
    Author of Keyring for webOS - Easy password management on your phone

    Get Keyring :: Keyring website :: Keyring desktop client :: Keyring bugs :: Desktop client bugs

    Like what I've done with Keyring? Hire me!

Posting Permissions