Search area jumps when focused / disappering border

  • Resolved tissi2

    (@tissi2)


    7 years, 7 months ago

    Moin Tobias!
    I have some issues with the search area. It has borders before clicking into that field. The borders create a 3D effect. When I click into the field, it loses its borders and subsequently jumps some pixels to the top and to the right due to the missing borders.

    I was playing around with the firefox web developer function. As I turned off

    -moz-appearance: none !important;

    for the input[type=”search”], there was only a 1px wide border visible. But even with that deactivated, the search area jumped again when clicking into it. If possible, I would like to have the borders visivble all the time

    Best regards
    Matthias

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Matthias,

    thanks for your question, and sorry for the trouble.

    This means that your theme is adding a border to the input fields, but it removes it on focus.
    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter tissi2

    (@tissi2)

    Thanks for the quick response!

    I got it solved by using this css:

    input
{
border: none;
-webkit-box-sizing: initial;
}
input[type="search"]:focus 
{
border: none;
-webkit-box-sizing: initial;
}

    Thanks for the hint! I wish you always a quick cursor…
    Matthias

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Matthias,

    nice find! Yes, this should fix the issue. If you want, you could simplify the code a bit, to

    input,
input[type="search"]:focus {
  border: none;
  -webkit-box-sizing: initial;
}

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    Thread Starter tissi2

    (@tissi2)

    Yeah, that makes sense – thank you for your time!

    Thread can be closed as [solved].

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Search area jumps when focused / disappering border’ is closed to new replies.