Jquery UI Styled Text Input Box

jQuery UI styled text input box

There's nothing to stop you from doing $("input").button()... I like this:

$('input:text, input:password')
  .button()
  .css({
          'font' : 'inherit',
         'color' : 'inherit',
    'text-align' : 'left',
       'outline' : 'none',
        'cursor' : 'text'
  });

A fuller example.

jquery ui widget displaying as a text input

Your problem stems from declaring jQuery.noConflict()

By doing so you are no longer able to directly access jQuery using $

If you need noConflict you can fix your code by changing:

jQuery.noConflict()
$(function() {

To

jQuery.noConflict()
jQuery(function($) {/* "$" argument allows using "$" inside the ready handler*/

Working demo of your code

Learn how to use browser console to check for errors. You should be seeing errors for "$" is not defined or similar depending on browser

Can jQuery UI’s highlight effect be applied to a form text input?

You can use Jquery animate function. First change the background color of text box using animate to green to notify user something has been saved successfully then you can ease it out to the original color again. You can write this code in your ajax success function.

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>highlight demo</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">  <style>  #toggle {    background: #fff;  }  </style>  <script src="//code.jquery.com/jquery-1.12.4.js"></script>  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script></head><body> <p>Click anywhere to toggle the box.</p><input id="input-animate"> <script>$( document ).click(function() {  $( "#input-animate" ).animate({          backgroundColor: "#009900",          easing: "easein"        }, 1500 , function(){          $( "#input-animate" ).animate({          backgroundColor: "#fff",        }, 500)        })});</script> </body></html>

How to create standard input in jquery ui style?

Just add the ui-autocomplete-input class to your input.

Jquery selectmenu plugin with text input option

There is no jQuery plugin which does exactly that. However, there is a jQuery UI selectmenu plugin, which converts a select element to a html representation such that you can style the select menu. This plugin also offers a callback for formatting text, such that in our case, we could format our 'other' option into an input box.

Suppose we have the following select:

    <select name="otherselect" id="otherselect">
        <option value="united-states">United States</option>
        <option value="latvia" selected="selected">Latvia</option>
        <option value="france">France</option>
        <option>Other</option>
    </select>

We can create a selectmenu with this plugin using:

    $(function(){
        selectMenu = $('select#otherselect').selectmenu({
            style:'popup',
            width: 300,
            format: otherFormatting
        });
    });

In here the function otherFormatting is a function which will format our Other option. This is our function:

    var otherFormatting = function(text){

    // if text contains 'Other' format into Other input box...
        if ( text == "Other" ) {
        var button = $('<input type="submit" onclick="selectOther(this)" value="select"/>');
        var input = $('<input class="other" type="text" value="Other..."/>');

            return $('<span/>')
            .append(input)
            .append(button)[0].outerHTML;
    }

        return text;
    }

The selectOther function that is called when the button is clicked, is a function we will extend the plugin with. This function, activated when the button is clicked, will set the values of our select, such that we can easily submit it using a form. But also, set the value which is displayed in the new selectmenu (instead of showing an input box in the select box).

We need to extend this plugin, which is a jQuery UI widget basically. However, since the plugin binds some events which make it impossible for us to get the input field and button working, we need to unbind some of these. We do this when we open the select menu. For this we need to override the open function of the widget, call our function that unbinds some events and then open the menu using the original open function.

Putting this all together:

<!DOCTYPE html>
<html>
    <head>
    <title>Demo Page for jQuery UI selectmenu</title>

    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
    <style type="text/css">
        body {font-size: 62.5%; font-family: "Verdana",sans-serif; }
        fieldset { border: 0; }
        label, select, .ui-select-menu { float: left; margin-right: 10px; }
        select { width: 200px; }
    </style>
    <script type="text/javascript">
        // We need to able to call the original open method, save intoIf you need to call original method
        var fn_open = $.ui.selectmenu.prototype.open;
        $.widget("ui.selectmenu", $.extend({}, $.ui.selectmenu.prototype, {
            open : function() {
                // Every the selectmenu is opened, unbind some events...
                this._unbindEvents();
                fn_open.apply(this, arguments);
            },
            _unbindEvents : function() {
                var el = $(this.list).find('li:has(input.other)').eq(0);
                // unbind events, we need a different event here...
                el.unbind('mouseup');
                el.unbind('mousedown');
                el.bind('mousedown', function() {
                    // We need to call focus here explicitly
                    $(this).find('input.other').eq(0).focus();

                    // Empty field on click...
                    if ( $(this).find('input.other').eq(0).val() == 'Other...' )
                         $(this).find('input.other').eq(0).val("");
                });
                // Unbind keydown, because otherwise we cannot type in our textfield....
                this.list.unbind('keydown');
                // We only need to return false on the mousedown event.
                this.list.unbind('mousedown.selectmenu mouseup.selectmenu');
                this.list.bind('mousedown', function() {
                        return false;
                });
            },
            selectOther : function(el) {
                var button = $(el);

                // li item contains the index
                var itemIndex = button.parent().parent().parent().data('index');
                var changed = itemIndex != this._selectedIndex();

                // Get the value of the input field
                var newVal = button.prev().val();
                this.index(itemIndex);
                // Update the display value in the styled select menu.
                this.newelement.find('.' + this.widgetBaseClass + '-status').html(newVal);

                // Update the value and html of the option in the original select.
                $(this.element[0].options[itemIndex]).val(newVal).html(newVal);

                // Call the select, change and close methods
                var e = jQuery.Event("mouseup");
                this.select(e);
                if ( changed )
                    this.change(e);
                this.close(e);
            }
        }));

        var selectMenu;
        $(function(){
            selectMenu = $('select#otherselect').selectmenu({
                style:'popup',
                width: 300,
                format: otherFormatting
            });
        });

        function selectOther(el) {
            // Call our self defined selectOther function.
            selectMenu.selectmenu('selectOther', el);
        }

        //a custom format option callback
        var otherFormatting = function(text){

            // if text contains 'Other' format into Other input box...
            if ( text == "Other" ) {
                var button = $('<input type="submit" onclick="selectOther(this)" value="select"/>');
                var input = $('<input class="other" type="text" value="Other..."/>');

                return $('<span/>')
                    .append(input)
                    .append(button)[0].outerHTML;
            }

            return text;
        }
    </script>
</head>
<body>
    <h2>Select with Other option input field</h2>
    <fieldset>
        <label for="otherselect">Select a value:</label>
        <select name="otherselect" id="otherselect">
            <option value="united-states">United States</option>
            <option value="latvia" selected="selected">Latvia</option>
            <option value="france">France</option>
            <option>Other</option>
        </select>
    </fieldset>
    <button onclick="console.log($('#otherselect').val());">Test</button>
</body>
</html>

To try this, download the plugin here and make sure the urls to the js/css files are correct. (I have put this html file into the demos/selectmenu folder and it works...). Ofcourse you can replace the button with an image.

Change the width of a SINGLE JQuery Mobile Input field?

Instead of directly setting the class on the input,jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox.

<input data-wrapper-class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />

Working DEMO

Jquery-ui automplete suggestions menu width exceeding input box on smaller viewport

Add open callback function like this, jsfiddle

$("#coupon").autocomplete({
    minLength: 1,
    source: coupons,
    focus: function( event, ui ) {
        $("#label").val(ui.item.coupon);
        return false;
    },
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
    },
    select: function( event, ui ) {
       $("#label").val(ui.item.coupon);
        return false;
    },
    }).autocomplete("instance")._renderItem = function (ul, item) {
         return $("<li>")
             .append(item.label+ '<br><small class="form-text text-muted">' + item.desc+ '</small>')
             .appendTo(ul);
     };
});

How to change size of text input but not textarea in jquery mobile

Ok, it sounds like you're using a specific jQuery Textinput widget (http://api.jquerymobile.com/textinput/) due to the use of "ui-input-text".

To apply these styles to only the text inputs, and NOT text areas, try:

div.ui-input-text { height: 42px !important }

This says only apply this style to div's that also have the class, "ui-input-text".

If you were to inspect the source generated by the input text widget you'd see:

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
  <input type="tel" name="tel" id="tel" value="">
</div>

But, when used on a text area generates:

<textarea name="textarea" id="textarea-a" class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow" style="height: 96px;">
</textarea>

Alternatively, you could just specify a separate CSS definition to override the .ui-input-text for text areas:

.ui-input-text {
    height:42px !important;
}

textarea.ui-input-text {
    height:100px !important;
}

jQuery Autocomplete style: match parent text input's style

So I think something like this will work.

  1. Use "appendTo" when creating the autocomplete so we can find it with a selector.
  2. "For this list of style attributes, get the style from the input field, and set it into the autocomplete UL.

So the script would look something like:

function addAutoComplete(inputID) {
  var wrapperDiv = document.createElement( "div" );
  var wrapperID = inputID + "__wrapper";
  wrapperDiv.setAttribute( "id", wrapperID );

  var inputSelector = $( "#"+inputID );
  var autoCompSelector = $("#" + wrapperID + ":first-child" );

  inputSelector.autoComplete( {..., appendTo: wrapperID} );

  var attrs = ["font-size", "font-family", "color", "background-color", "border", ...];
  for (var curAttrIdx = 0; curAttrIdx < attrs.length; ++curAttrIdx) {
    var attrVal = inputSelector.css( attrs[ curAttrIdx ] );
    autoCompleteSelector.css( attrs[ curAttrIdx ], attrVal );
  }
}

Close but no cigar. Each <li> under the <ul> has a style class, as does the <a> within the <ul>. Just to make life more exciting, a selector to pick out the links seems like it would be Quite Brittle. A small change in the way Autocomplete works between versions could easily break the selector.

None the less, changing the selector to "#" + wrapperID + ":first-child li a" will work for the current version of jQueryUI (1.8.13 as I write this).

After several hours of experimentation, I came up with something that works. Finally. The list items (and link) don't exist until the autocompleteopen event, so I set the style there instead. Like This:

inputSelector.autocomplete( {source: ["foo", "bar"],
  position: { my : "top", at: "bottom"},
  minLength:minChars,
  appendTo: "#" + wrapperID,
  open: function (event, ui) {
    autoCompApplyEntryStyles(inputID);
  }
});

function autoCompApplyEntryStyles(inputID) {
  var inputSelector = $( "#"+inputID );
  var wrapperID = inputID + "__wrapper";
  var autocompSelector = $("#" + wrapperID + " ul li a");

  if (autocompSelector.size() == 0) {
    return;
  }
  var attrs = ["font-size", "font-family", "font-weight", "font-style", "color", "background-color", "text-align", "text-decoration"];

  for (var curAttrIdx = 0; curAttrIdx < attrs.length; ++curAttrIdx) {
    var attrVal = inputSelector.css( attrs[ curAttrIdx ] );
    autocompSelector.css( attrs[ curAttrIdx ], attrVal );
  }
}

Jquery UI modal with right margin on text input

For v4, all you need to do is apply no-gutters class to your .row element. And a few minor styling details such as <input> border-radius or bringing the focused input to front:

@media (min-width: 576px) {  .my-row input {    border-radius: 0;    width: calc(100% + 1px);  }  .my-row input:focus {    position: relative;    z-index: 1;  }  .my-row .form-group:first-child input {    border-radius: .25rem 0 0 .25rem;  }  .my-row .form-group:last-child input {    border-radius: 0 .25rem .25rem 0;    width: 100%;  }  .my-row label {    text-overflow: ellipsis;    overflow: hidden;    white-space: nowrap;    display: block;  }}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /><div class="container">    <div class="row no-gutters my-row">        <div class="col-sm-4 form-group">            <label for="CompanyStreet">Street</label>            <input type="text" name="CompanyStreet" id="CompanyStreet"            value="" class="form-control">        </div>        <div class="col-sm-3 form-group">            <label for="PostCode">Post Code</label>            <input type="text" name="PostCode" id="PostCode" value=""            class="form-control">        </div>        <div class="col-sm-3 form-group">            <label for="CompanyCity">Company City</label>            <input type="text" name="CompanyCity" id="CompanyCity"            value="" class="form-control">        </div>        <div class="col-sm-2 form-group">            <label for="CompanyCountry">Company Country</label>            <input type="text" name="CompanyCountry" id="CompanyCountry"            value="" class="form-control">        </div>    </div></div>

Related Topics

CSS Sprite Techniques, CSS Background or Img's Clip

Text Gets Cut When Using <Select>

How to Style The Backface of a Rotated Element

Place Custom Checkbox Icon to Right of Label Bootstrap 4

CSS Style Change with Jsf Validation

CSS Background Images in Mvc3

Ie 6,7,8,9 CSS Compatibility Stylesheet

CSS Table-Like Style

How to Make an Svg Masked Image Compatible with Internet Explorer

Two Divs on The Same Row and Center Align Both of Them

Overriding CSS on Github Pages Using Slate Theme

HTML5Shiv - Why Is It Only for Ie

Larger Div Centered Inside Smaller Div

Background Position, Margin-Top

Gulp-Sass Work Around for Load_Path Support

Why There Is -Moz-Xxx and -Webkit-Xxx in The CSS3

Using CSS to Give a Black Icon Another Color

Fix Warning "Also Define The Standard Property 'Box-Shadow' for Compatibility"


Leave a reply



Submit