Javascript set button width depending on the length of Text value

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • ismailc
    New Member
    • Sep 2006
    • 200

    Javascript set button width depending on the length of Text value

    Good day,

    I have button with no width specified.
    The text value of the button differs, so i left it with no width.

    It automatically sets the width but the problem is it to wide with about 5 spaces on each side of text letting the button look stupid.

    I thought of working out the Text in a javascript function then set the length of the button.

    Code:
    <input id="{Description}" type="button" value="{Description}" onClick="{@name}.click();" style="background-color: #f9f9f9; height: 23px;"></input>
    Please help
    Last edited by Dormilich; Jan 11 '10, 02:51 PM. Reason: inserted missing " (hope that’s right)
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    The text value of the button differs, so i left it with no width.
    erm, but you explicitly set a width …

    additionally, HTML input elements should always be empty: <input … type="button">

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      Check the default padding for the button.

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        you may also use the <button> element, if you like.

        Comment

        • xNephilimx
          Recognized Expert New Member
          • Jun 2007
          • 213

          #5
          same as acoder, the problem is the padding for sure, a button will always accommodate it's with according to the text, unless you specify a fixed size. You have to be careful about the box model though, in mozila/webkit compatible browsers the padding (and border) is not taken in account in the width, so if the width is 10 and the padding (left and right) is 5 the with will still be 10px but you will see it as if it is 20px wide.

          Comment

          • ismailc
            New Member
            • Sep 2006
            • 200

            #6
            Thank You All :)

            Got it going - i'm surpirsed no javascript needed.

            Code:
            overflow: visible;padding: 2px 2px 2px 2px;

            Comment

            Working...