Re: IUI creating multiple small buttons in row?

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 to
http://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.