Change button size

Question

Change button size

Navigation

#1 by (1 votes)

1

I'm developing a footer in JQuery that I went through for this FIDDLE

HTML / JQuery

<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toogle="false">
            <div data-role="navbar" data-grid="b">
                    <ul>
                       <li><button type="button" id="listSO_options">Opções</button></li>
                       <li><a class = "ui-btn-active  nav" href="#">menu</a></li>
                       <li><a class = "nav" href="#" id="listSO_btnDef" data-icon="gear">Definições</a></li>
                    </ul>
            </div>
</div><!-- footer -->

As you can see in the result area, the first element of footer which is a button gets a size relative to the two other elements smaller.

I've tried the button inside <a></a> tags, but it has further ruined footer .

I was trying to do this without resorting to CSS and without assigning fixed height values. Is it possible?

UPDATE

I tried to change the button to the one as they suggested. Here's the FIDDLE

HTML / JQuery

<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toogle="false">
            <div data-role="navbar" data-grid="b">
                    <ul>
                       <li><a id="listSO_options">Opções</a></li>
                       <li><a class = "ui-btn-active  nav" href="#">menu</a></li>
                       <li><a class = "nav" href="#" id="listSO_btnDef" data-icon="gear">Definições</a></li>
                    </ul>
            </div>
        </div><!-- footer -->

The problem is that now this element no longer behaves like a button, because when it is clicked this remains selected the second element is no longer. The goal of using button instead of a was really that. Leave the second element selected despite pressing the first one and activate the features of the first

html jquery

asked by anonymous 09.07.2015 / 19:17

1 answer

PHP variable with a select text (combobox) Search only a random part inside a code with select in mysql

score 1 · Accepted Answer

In version 1.4.5 of jquery Mobile this feature works natively in the framework, see:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />

<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toogle="false">
  <div data-role="navbar">
    <ul>
      <li>
        <button id="item1" data-icon="bars">Item 1</button>
      </li>
      <li><a id="item2" href="#" data-icon="grid">Item 2</a>
      </li>
      <li><a id="item3" href="#" data-icon="gear">Item 3</a>
      </li>
    </ul>
  </div>
</div>

If you can not, compare the two versions and see what you have modified in jquery.mobile.css and add only what you need.