Loading ...
Sorry, an error occurred while loading the content.

Icon on Splitbutton?

Expand Messages
  • Stuart Grimshaw
    Nice easy question for a Friday afternoon, how do put an icon on a splitbutton? I ve got them on my normal button by applying a style to the surrounding
    Message 1 of 5 , Jun 1, 2007
    • 0 Attachment
      Nice easy question for a Friday afternoon, how do put an icon on a
      splitbutton?

      I've got them on my normal button by applying a style to the
      surrounding <span> tag, but when you set up splitbuttons via html, you
      don't use any of those.

      -S
    • Stuart Grimshaw
      ... Ok, maybe it wasn t so simple for a Friday afternoon, too much time in the pub perhaps, what about after a lovely relaxing weekend? I m trying to get an
      Message 2 of 5 , Jun 4, 2007
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "Stuart Grimshaw"
        <stuart.grimshaw@...> wrote:
        >
        > Nice easy question for a Friday afternoon, how do put an icon on a
        > splitbutton?
        >
        > I've got them on my normal button by applying a style to the
        > surrounding <span> tag, but when you set up splitbuttons via html, you
        > don't use any of those.

        Ok, maybe it wasn't so simple for a Friday afternoon, too much time in
        the pub perhaps, what about after a lovely relaxing weekend?

        I'm trying to get an icon onto a splitbutton, I've applied a style to
        the inital <input> tag & all the following <option> tags too, but no luck.

        Any ideas?
      • Mike Lee
        Hi Stuart, After some time in the pub and a relaxing weekend, here s an idea. Have you tried this: .yuibutton { background-image:url(someimage.gif); } You may
        Message 3 of 5 , Jun 4, 2007
        • 0 Attachment
          Hi Stuart,

          After some time in the pub and a relaxing weekend, here's an idea.
          Have you tried this:
          .yuibutton { background-image:url(someimage.gif); }

          You may have to apply some left padding so the button text sits next
          to your icon. I hope this helps!



          --- In ydn-javascript@yahoogroups.com, "Stuart Grimshaw"
          <stuart.grimshaw@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "Stuart Grimshaw"
          > <stuart.grimshaw@> wrote:
          > >
          > > Nice easy question for a Friday afternoon, how do put an icon on a
          > > splitbutton?
          > >
          > > I've got them on my normal button by applying a style to the
          > > surrounding <span> tag, but when you set up splitbuttons via html, you
          > > don't use any of those.
          >
          > Ok, maybe it wasn't so simple for a Friday afternoon, too much time in
          > the pub perhaps, what about after a lovely relaxing weekend?
          >
          > I'm trying to get an icon onto a splitbutton, I've applied a style to
          > the inital <input> tag & all the following <option> tags too, but no
          luck.
          >
          > Any ideas?
          >
        • Stuart Grimshaw
          ... While that might work, it d apply the same image to all buttons, and I have several ... Glad you had a relaxing weekend though.
          Message 4 of 5 , Jun 4, 2007
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "Mike Lee" <mikelee@...> wrote:
            >
            > Hi Stuart,
            >
            > After some time in the pub and a relaxing weekend, here's an idea.
            > Have you tried this:
            > .yuibutton { background-image:url(someimage.gif); }
            >
            > You may have to apply some left padding so the button text sits next
            > to your icon. I hope this helps!

            While that might work, it'd apply the same image to all buttons, and I
            have several ...

            Glad you had a relaxing weekend though.
          • Mike Lee
            Oh, oops. Here s another solution. It s CSS-based and doesn t require any changes in JavaScript, so you can keep all of your UI revisions to CSS. It does
            Message 5 of 5 , Jun 5, 2007
            • 0 Attachment
              Oh, oops. Here's another solution. It's CSS-based and doesn't require any
              changes in JavaScript, so you can keep all of your UI revisions to CSS. It
              does require extra markup, unfortunately.

              <style>
              /* You may want to put a float:left in here too, depending on your layout */
              .button1 .yuibutton { background-image:url(someimage.gif); float:left; }
              .button1 .yuibutton { background-image:url(anotherimage.gif); float:left; }
              </style>

              <div class="button1">
              <input type="submit" id="splitbutton1" name="splitbutton1" value="Split
              Button 1">
              </div>

              <div class="button2">
              <input type="submit" id="splitbutton2" name="splitbutton2" value="Split
              Button 2">
              </div>


              Not a super-elegant solution, but at least you keep the display issues in
              CSS and HTML. I hope this helps! And I hope your next weekend is relaxing!




              Stuart Grimshaw wrote:
              >
              > --- In ydn-javascript@yahoogroups.com, "Mike Lee" <mikelee@...> wrote:
              >>
              >> Hi Stuart,
              >>
              >> After some time in the pub and a relaxing weekend, here's an idea.
              >> Have you tried this:
              >> .yuibutton { background-image:url(someimage.gif); }
              >>
              >> You may have to apply some left padding so the button text sits next
              >> to your icon. I hope this helps!
              >
              > While that might work, it'd apply the same image to all buttons, and I
              > have several ...
              >
              > Glad you had a relaxing weekend though.
              >
              >
              >

              --
              View this message in context: http://www.nabble.com/Icon-on-Splitbutton--tf3852485.html#a10979440
              Sent from the ydn-javascript mailing list archive at Nabble.com.
            Your message has been successfully submitted and would be delivered to recipients shortly.