YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar roger.walker.arnott asked

Strange button rendering on mobile - uikit/yoothemepro

Hi,

I'm using the following bit of code for my job search form - all displays lovely on chrome/desktop - however on safari/iphone (and possibly other mobiles, not sure) the submit button renders really strangely - any ideas?

http://belmontrecruitment.com
http://belmont.shootingfish.biz/

        <form method="GET" action="jobs">  
  <fieldset class="uk-fieldset">  
 <div uk-grid>   
 <div class="uk-width-1-1">  
    <input type="text" id="search_keywords"  class="uk-input" name="search_keywords" placeholder="Keywords"  />  
</div>  
<div class="uk-width-1-1">  
    <input type="text" id="search_location" class="uk-input" name="search_location" placeholder="location"  />  
</div>  
<div class="uk-width-1-1">  

    <select id="search_category" name="search_category" class="uk-select"> <option >Select a category</option>  
        <?php foreach ( get_job_listing_categories() as $cat ) : ?>  

            <option value="<?php echo esc_attr( $cat->term_id ); ?>"><?php echo esc_html( $cat->name ); ?></option>  
        <?php endforeach; ?>  
    </select>  
</div>  
<div class="uk-width-1-1">  
    <input type="submit" value="Search" class="uk-button uk-button-primary uk-align-center" />  
</div></div>  
    </fieldset>  
</form>
  • WordPress
  • UIkit
  • YOOtheme Pro

Edited

4 Answers

1

Avatar kayhan Support answered

As mentioned in the documentation, you should apply the uk-button classes to an <a> or <button> tag. Please try that.

0

Avatar roger.walker.arnott answered

I have changed from :

<input type="submit" value="Search" class="uk-button uk-button-primary uk-align-center" />    

to

<button type="submit" value="Search" class="uk-button uk-button-primary uk-align-center" />Search</button>  

It now renders correctly on iphone, however now the search field is not passed across, but the dropdown is... I tried to add uikit classes to an existing bit of form code. Is there no way to make it render ok using input? extra css?

Or is there anything I can do with the <button> element to make everything still function the same?

Edited

0

Avatar roger.walker.arnott answered

google was my friend....

I added an id to the form, and then I could use that ID on the button class

<button type="submit" id="jobform" value="Search" class="uk-button uk-button-primary uk-align-center" />Search</button>  
0

Avatar kayhan Support answered

You are welcome. Please close the question by accepting this answer.

If you want to close this question your part would be to help us to improve this support system knowledge base.
Click the √ checkmark to the left of the answer that helped you to "accept" it.

Image

This will highlight it green and makes it easy to find for others having similar issues.

thankyoo

Know someone who can answer? Share a link to this question via email or twitter.