jQuery UI Widgets Forums Editors MaskedInput Bootstrap Styles Need Updating

Tagged: 

This topic contains 8 replies, has 2 voices, and was last updated by  Peter Stoev 6 years, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Bootstrap Styles Need Updating #68355

    David
    Participant

    When applying a masked input with Bootstrap style sheet the input fields do not match the standard Bootstrap look and feel. The CSS for form input controls in Bootstrap is the following:

    color: rgb(85,85,85);
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin: 0px;
    padding: 6px 12px;

    The default for the Masked Input control is the following:

    color: rgb(0,0,0);
    font-size: 13px;
    height: 25px;
    line-height: 16px;
    margin: 0px;
    padding: 6px 12px;

    Bootstrap Styles Need Updating #68356

    David
    Participant

    To those who want to correct the difference I have an application.css file which is always loaded last in my solution. I added the following to that css file:

    input[type=text].jqx-input,
    input[type=password].jqx-input,
    .jqx-input
    {
    color: rgb(85, 85, 85);
    font-size: 14px;
    height: 20px !important;
    line-height: 19.99px;
    margin: 0px;
    padding: 6px 12px;
    }

    Bootstrap Styles Need Updating #68364

    Peter Stoev
    Keymaster

    Hi David,

    We don’t define height and line-height in our CSS styles. For the colors, we will check whether something needs to be updated.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Bootstrap Styles Need Updating #68368

    David
    Participant

    Peter,

    You actually do define height as a CSS style. When the height property of the Masked Input control is applied it is set as an inline style. If I do not specify a height in the Masked Input control it is automatically inserting a height: 25px style. I would suggest removing this default control height style and you won’t need it in the primary bootstrap css. Also, here is an updated version to not mess with the input fields on other controls, like the pager in the jqxGrid:

    .form-control.jqx-input
    {
    color: rgb(85, 85, 85);
    font-size: 14px;
    height: 20px !important;
    line-height: 19.99px;
    margin: 0px;
    padding: 6px 12px !important;
    }

    Bootstrap Styles Need Updating #68406

    Peter Stoev
    Keymaster

    Hi David,

    Our Bootstrap Theme is called jqx.bootstrap.css. We don’t define Height there. If you defined it, Ok, but we don’t and that’s a fact which can be easily seen in the download package when you open the Theme’s File. If we add style in some example somewhere it does not mean that this is part of our Bootstrap theme because it is not.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Bootstrap Styles Need Updating #68428

    David
    Participant

    Peter,

    It may not be added in the bootstrap class but there is an inline style being added during the application of the Masked Input. Here is the setup. I created a standard text input.

    <input type=”text” id=”test” />

    I then used IE11 developer tools to confirm the rendered HTML matches the above code with no extra added code. I then applied a simple Masked Input command:

    $(“#test”).jqxMaskedInput({ mask: ‘#####’, promptChar: ” ” });

    Once the Masked Input is applied to the text field the rendered HTML looks like the following:

    <input class=”jqx-input jqx-rc-all jqx-widget jqx-widget-content jqx-reset jqx-input-content” id=”test” role=”textbox” aria-disabled=”false” aria-readonly=”false” aria-valuenow=”” style=”width: 150px; height: 25px; text-align: left;” spellcheck=”false” aria-multiline=”false” type=”text” data-role=”input” autocomplete=”off” autocorrect=”off” autocapitalize=”off”>

    The key is the inline style attribute added to the control. Even though I did not specify a width or height in my control or Masked Input properties there are default heights and widths being applied via CSS as well as text-align. This is the reason I override the height in my style with the !important flag. That is the only way I can override the inline style being applied to the control.

    Bootstrap Styles Need Updating #68472

    Peter Stoev
    Keymaster

    Hi David,

    width and height of our widgets are not set within Stylesheets. width and height of our widgets are set through properties. Getting Started help topics and API documentation illustrate this fact.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Bootstrap Styles Need Updating #68732

    David
    Participant

    Peter,

    I’m not sure you understand the issue. If a user does not set the width and height of the Masked Input control there should be NO DEFAULTS assigned to the DOM element. As shown in the code above, the Masked Input control is setting a default width and height property for the control when none is provided. These are rendering as inline styles. Default width and height should be removed and let to be controlled by the browser. I understand the current condition 100% and it may be by design to function that way but it causes incompatibility issues with frameworks that size certain controls via CSS, like Bootstrap.

    Thanks

    Bootstrap Styles Need Updating #68759

    Peter Stoev
    Keymaster

    Hi David,

    This is your own opinion. With our widgets, you have width and height properties which should be set, if you want widgets to be displayed. Sorry, if you don’t like this behavior.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.