Re: IUI creating multiple small buttons in row?

Remi,

That was AWESOME!  Thanks so much.  I'm a C language guy, so
javascript and especially CSS are still completely foreign to me.
That worked beautifully.

Thanks!
Scott



On Apr 4, 1:15 am, Remi Grumeau <[EMAIL PROTECTED]> wrote:
> Note that this is a custom need, so you have to code some custom CSS for it.
>
> See this example here:http://jsfiddle.net/BRNBn/
>
>         <fieldset>
>             <div class="row">
>                 <ul class="inlinebuttons">
>                     <li><a href="javascript:;" class="button">--</a></li>
>                     <li><a href="javascript:;" class="button">-</a></li>
>                     <li><a href="javascript:;" class="button">+</a></li>
>                     <li><a href="javascript:;" class="button">++</a></li>
>                 </ul>
>             </div>
>         </fieldset>
>
> Using this CSS
>
>     ul.inlinebuttons li {
>         display:    inline-block;
>     }
>     ul.inlinebuttons li a {
>         position:     relative;
>         height:       auto;
>         padding:      0.7em 0.5em;
>         top:          auto;
>         right:        auto;
>     }
>
> See? 10 lines of CSS :)
>
> Also, default theme buttons comes with the blue of the toolbar as a
> background (since it's normally to use only there). For a clearer look,
> you'd better use the gradient-based theme
>
> In the header, just replace
> iui/t/default/default-theme.css
> by
> iui/t/defaultgrad/defaultgrad-theme.css
>
> Which results tohttp://jsfiddle.net/xTUaS/1/
>
> Remi
>
>
>
> On Wed, Apr 4, 2012 at 12:03 AM, sblair <[EMAIL PROTECTED]> wrote:
> > So I tried dropping this in the ul/li format with the CSS and I still
> > end up with it just drawing the buttons on top of each other it
> > appears.  I only see the ++ button being visible.
>
> > What I'm trying to achieve is:
>
> > Row Label
> >     [--]    [ - ]   [ + ]  [++]
>
> > Where the buttons are side by side on the same row.  Any help is
> > greatly appreciated!
>
> > Thanks
> > Scott
>
> > On Apr 3, 11:27 am, Remi Grumeau <[EMAIL PROTECTED]> wrote:
> > > Using a ul/li combinaison?
>
> > > <div class="row">
> > >   <ul class="inlinebuttons">
> > >     <li><a id="backButton" class="button" href="#"></a></li>
> > >     <li><a class="button blueButton" href="#">--</a></li>
> > >     <li><a class="button blueButton" href="#">-</a></li>
> > >     <li><a class="button blueButton" href="#">+</a></li>
> > >     <li><a class="button blueButton" href="#">++</a></li>
> > >   </ul>
> > > </div>
>
> > > then with some CSS
> > > ul.inlinebuttons {
> > >   width: 100%;}
>
> > > ul.inlinebuttons li {
> > >   display: inline;
>
> > > }
>
> > > But where do you want those buttons to be? In the page or in the
> > toolbar? i
> > > see backButton... you know you can only have one element with the same
> > ID ?
>
> > > Remi
>
> > > On Tue, Apr 3, 2012 at 8:11 PM, sblair <[EMAIL PROTECTED]> wrote:
> > > > I'm trying to figure out how to create multiple small buttons within a
> > > > single row all side by side.
>
> > > > Basicallly I'm looking to have 4 buttons ( --, -,  +,  ++ ) in a
> > > > single row in IUI.
>
> > > > I've tried doing this as these buttons are the perfect size, but it
> > > > just ignored the row I was putting them at and put them in the first
> > > > row at the top with them all piled on top of each other and not
> > > > positioned next to each other.
>
> > > > <div class="row>
> > > >    <a id="backButton" class="button" href="#"></a>
> > > >    <a class="button blueButton" href="#">--</a>
> > > >    <a id="backButton" class="button" href="#"></a>
> > > >    <a class="button blueButton" href="#">-</a>
> > > >    <a id="backButton" class="button" href="#"></a>
> > > >    <a class="button blueButton" href="#">+</a>
> > > >    <a id="backButton" class="button" href="#"></a>
> > > >    <a class="button blueButton" href="#">++</a>
> > > >      </div>
>
> > > > Suggestions?
>
> > > > Thanks.
> > > > Scott
>
> > > > --
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "iPhoneWebDev" group.
> > > > To post to this group, send email to [EMAIL PROTECTED]
> > > > To unsubscribe from this group, send email to
> > > > [EMAIL PROTECTED]
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/iphonewebdev?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "iPhoneWebDev" group.
> > To post to this group, send email to [EMAIL PROTECTED]
> > To unsubscribe from this group, send email to
> > [EMAIL PROTECTED]
> > For more options, visit this group at
> >http://groups.google.com/group/iphonewebdev?hl=en.

-- 
You received this message because you are subscribed to the Google Groups 
"iPhoneWebDev" group.
To post to this group, send email to [EMAIL PROTECTED]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/iphonewebdev?hl=en.