Currently in the process of upgrading my application from version 3.0 to 3.1. The application is still in its initial phase, resembling more of a prototype with only a few pages created. Therefore, I didn't anticipate encountering many issues during the migration since it is just a minor version update and the project is at an early stage.
However, one aspect that caught my attention during this upgrade was that the controls within inline forms were no longer taking up 100% of the available width.
After inspecting the code using a browser, I observed that the width: 100%; property of the .form-control class was being overridden by the following snippet:
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
Although I am not well-versed in CSS, adding width: 100%; individually to each form element resolved the issue, even though it may not be the most optimal solution. I couldn't comprehend why the selector .form-inline .form-control was defined with width:auto;.
You can view a preview demonstrating the problem here: http://jsfiddle.net/pasemes/Mw7rK/11/. Pay close attention to how the first element has been forcefully set to width: 100%;. Additionally, try stretching the viewport to see how elements behave when the form is displayed inline.
Any assistance would be greatly appreciated!