[RESOLVED]jquery ui spinner

hi

i want to know what skin they used in this example - http://jqueryui.com/spinner/

how to set 100% width i tried to set 100% but it does not fit with table cell but the normal html element fit with table cell .

Hi sivakl_2001,

sivakl_2001

i want to know what skin they used in this example - http://jqueryui.com/spinner/

For this issue, I suppose you want know what theme they used in that example. According to the following code and style, I suppose it is the smoothness theme.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

sivakl_2001

how to set 100% width i tried to set 100% but it does not fit with table cell but the normal html element fit with table cell .

For this issue, I tested it on my machine. As you said, normal html element worked well, but not fit with spinner. I suppose the issue is related to the JQuery UI. I suggest you could set the width property as below.

    <table>
        <tr>
            <td style="width:200px; background-color:gray">TD1</td>
            <td style="width:200px">TD2</td>
        </tr>
        
        <tr>
            <td style="width:200px"><input id="Text1" type="text" style="width:100%" />
            </td>
            <td style="width:200px; background-color:red">
                <input style="width:200px" id="spinner">
            </td>
        </tr>
    </table>

Best Regards,
Dillion

i am using the same theme(smoothness) but my side jquery ui control looking larger than controls size in the example pages

for example the jquery ui tab

http://i.imgur.com/fhR0pat.png

sivakl_2001

or example the jquery ui tab

Try applying the below css style to make the jquery Tab appear smaller

  <style>
    .ui-tabs .ui-tabs-nav li a {font-size:10pt !important;height: 15px;}
  </style>

Complete Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
  <style>
    .ui-tabs .ui-tabs-nav li a {font-size:10pt !important;height: 15px;}
  </style>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    Test1
  </div>
  <div id="tabs-2">
    Test2
  </div>
  <div id="tabs-3">
    Test3
  </div>
</div>
 
 
</body>
</html>

Leave a Reply