Announcement

Collapse
No announcement yet.

Form Input Field Height

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Form Input Field Height

    I want to vary the height of Form Input Fields - specifically in this instance the standard Quick Search box such as seen here:
    http://www.sargentcycle.co.uk

    I've tried using height="xx" but it doesn't appear to have an effect.

    Can anyone tell me how to do this or what governs the height of these fields?

    I really hope the answer isn't too blindingly obvious as today has been a good day so far

    Thanks
    Kind Regards
    Sean Williams

    Calamander Ltd

    #2
    If i wanted to edit the height i would do style="height:60px;" Or what ever you want, if for some reason that doesn't work, add this after the semicolon: overflow:hidden;

    it should work, but I'm no expert.

    Comment


      #3
      You need to declare either / or the font-size and padding (if you want to keep a smaller font) .. not all browsers render the same so test accordingly


      Bikster
      SellerDeck Designs and Responsive Themes

      Comment


        #4
        I wrap mine into a named div and append the input to avoid any cross-contamination... eg:

        #searchWrapper input {
        font-size: 16px;
        padding: 4px;
        }


        Bikster
        SellerDeck Designs and Responsive Themes

        Comment


          #5
          Originally posted by jont View Post
          I wrap mine into a named div and append the input to avoid any cross-contamination... eg:

          #searchWrapper input {
          font-size: 16px;
          padding: 4px;
          }
          Thanks Jonty.
          Erm - would you mind awfully providing a bit more detail?
          I think you've created a class for the actinic.css, but could you show me how I add that to this:

          <td align="right" nowrap>
          <input type="hidden" name="page" value="search" />
          <input type="text" name="SS" size="16" value="Quick Search" onfocus="this.value='';" class="actxxsmall" />
          &nbsp;
          </td>

          Thanks
          Kind Regards
          Sean Williams

          Calamander Ltd

          Comment


            #6
            My code is

            HTML Code:
            <div id="searchWrapper">
            <actinic:variable name="QuickSearchBar" value="Standard Quick Search Bar" />
            </div>
            ... you need to navigate to the parent layout of the code you have shown and wrap between the <div>

            then:

            #searchWrapper input {
            font-size: 16px;
            padding: 4px;
            }

            into the actinic.css


            Bikster
            SellerDeck Designs and Responsive Themes

            Comment


              #7
              Originally posted by Sean Williams View Post
              <input type="text" name="SS" size="16" value="Quick Search" onfocus="this.value='';" class="actxxsmall" />
              You are best to remove the class="actxxsmall" from the above ... in theory the id has greater specificity but IE is another kettle of fish... delete it and let the #searchWrapper style the input


              Bikster
              SellerDeck Designs and Responsive Themes

              Comment


                #8
                Marvellous - thanks very much Jonty.

                I'm still very conservative when it comes to customising our sites, but learning little gems (well, they're gems to me ) like this is so satisfying - I understand it and can apply the principles elsewhere

                I really wish I had time spare to really learn CSS and HTML properly, it would make things simpler and also open up new horizons when it comes to the design I feel sure.

                Thanks for your input too Dan
                Kind Regards
                Sean Williams

                Calamander Ltd

                Comment

                Working...
                X