Bootstrap Styles Need Updating

[DavidParticipant]

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;

[DavidParticipant]

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;
}

[Peter StoevKeymaster]

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/

[DavidParticipant]

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;
}

[Peter StoevKeymaster]

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/

[DavidParticipant]

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.

[Peter StoevKeymaster]

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/

[DavidParticipant]

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

[Peter StoevKeymaster]

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/

[Author]

Posts