Results 1 to 10 of 10
  1. adma84's Avatar
    Posts
    285 Posts
    Global Posts
    323 Global Posts
       #1  
    All, I am trying to put two integer pickers next to each other in a table, but they keep going on separate lines. Does anyone have any ideas?

    The important part of my html looks like

    Code:
    <div class="palm-list">
          <div class="palm-row first">
             <div class="palm-row-wrapper">
                <div x-mojo-element="IntegerPicker" id="tipPick" class="integerpickerClass" name="integerpickerName"></div>         
                <div x-mojo-element="IntegerPicker" id="splitPick" class="integerpickerClass" name="integerpickerName"></div>
             </div>
          </div>
    ...
    I tried styling it with CSS to place the pickers, but nothing seemed to work right. The widgets are much harder to control via CSS than text fields...

    Thank you SO much for any help you can offer
  2. #2  
    I'm doing something like this for a more tabular format. Not sure if it helps with widgets inside.

    Code:
    <div class="dw-main-data">
    	<div class="dw-main-row">
    		<div class="dw-main-cell dw-label">Day:</div>
    		<div class="dw-main-cell dw-value" id="game-progress"></div>
    		<div class="dw-main-cell dw-label">Loc:</div>
    		<div class="dw-main-cell dw-value" id="cur-location"></div>
    	</div>
    </div>
    Doing 25%, because I have 4 columns. dw-label and dw-value just format text, not important for the structure.
    Code:
    .dw-main-data{
    	display:table;
    	width:320px;
    }
    .dw-main-row{
    	display:table-row;
    	width:auto;
    }
    .dw-main-cell{
    	display:table-cell;
    	width:25%;
    	padding:6px;
    }
  3. #3  
    Before I spend time on this, you said dw-label and dw-value are not important, but they are declared in your CSS, aren't they?
    Your CSS has both of these, no?:
    .dw-main-cell dw-value{
    display:table-cell;
    width:25%;
    padding:6px;
    .dw-main-cell dw-label{
    display:table-cell;
    width:25%;
    padding:6px;
    }
  4. adma84's Avatar
    Posts
    285 Posts
    Global Posts
    323 Global Posts
       #4  
    I am simply trying to place the widgets as so:

    Code:
    .integerpickerClass {
    	width:50%;
    	
    }
    But receive the following mess in my tip information box :-(
    Attached Images Attached Images
  5. #5  
    Quote Originally Posted by PREvision View Post
    Before I spend time on this, you said dw-label and dw-value are not important, but they are declared in your CSS, aren't they?
    Your CSS has both of these, no?:
    .dw-main-cell dw-value{
    display:table-cell;
    width:25%;
    padding:6px;
    .dw-main-cell dw-label{
    display:table-cell;
    width:25%;
    padding:6px;
    }
    Yes, those are just the names of my classes. You may specify multiple classes. They wouldn't be defined like you have, but there would be additional .dw-value{} and .dw-label{} defs.
  6. #6  
    Quote Originally Posted by adma84 View Post
    I am simply trying to place the widgets as so:

    Code:
    .integerpickerClass {
    	width:50%;
    	
    }
    But receive the following mess in my tip information box :-(
    The divs will naturally flow to a new line. Try giving them "float:left" styles.
  7. adma84's Avatar
    Posts
    285 Posts
    Global Posts
    323 Global Posts
       #7  
    same deal, I am trying:

    Code:
    #tipPick {
    	float:right;
    }
    #splitPick {
    	float: left;
    }
    But the second picker always falls to the next line
  8. #8  
    Palm's solution for this in their apps that they provided samples for was to use a table.
    I know I know tables for layout are deprecated. But on the Pre, where there is no possibility of a blind user with a screen reader, tables actually work quite well.
  9. adma84's Avatar
    Posts
    285 Posts
    Global Posts
    323 Global Posts
       #9  
    Quote Originally Posted by rboatright View Post
    Palm's solution for this in their apps that they provided samples for was to use a table.
    I know I know tables for layout are deprecated. But on the Pre, where there is no possibility of a blind user with a screen reader, tables actually work quite well.
    How would I use a table in this case to have the horizontal components in a single row?

    I updated my css like the following:
    Code:
    #tipPick {
    	float:right;
    	
    }
    #splitPick {
    	float: left;
    	
    }
    
    #firstRow {
    	height:60px;
    }
    but their labels are now aligned at the bottom of the picker, and not centered :-( hard to win with this!
    Attached Images Attached Images
  10. #10  
    is the html table code possible <table> <tr> <td> </table> if I rrecall correctly. It's been a long time since I worked with html.

Tags for this Thread

Posting Permissions