IUI creating multiple small buttons in row?

[sblair]

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

[Remi Grumeau]

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

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

[sblair]

I'm trying to put them in the middle of the page inside one of the
rows. Right after I posted I realized the mistake with having the
multiple back buttons. I don't actually need a back button at all.
Just the 4 blueButtons as you have noted below. And using the ul/li
with the CSS should put them side by side?

thanks.
Scott

[sblair]

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 <remi.grum...@gmail.com> wrote:

[Remi Grumeau]

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

[sblair]

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

> Which results tohttp://jsfiddle.net/xTUaS/1/

[Rémi Grumeau]

My pleasure :)

[Remi Grumeau ]

well, "with CSS" could sounds like an easy answer but that's pretty much all i can say.

Just add some CSS statements to colorize this how you want.

Remi

On 28 août 2012, at 01:47 AM, nexx <nexx...@gmail.com> wrote:

I'd like to make some of those buttons gray (or red), how do I do it?

Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.