different line height from input textbox / dropdown

Topic: different line height from input textbox / dropdown

sango_dada free asked 3 years ago

Hi, we got mdb PRO with version 4.5.1 and work on .Net Entity Framework MVC 5. We got some layout issues working with mdbootstrap. this will be rendered in a div: container-fluid. we always add divs as example : <div class="row"> <div class="col"> <div class="md-form"> @Html.TextBoxFor(model => model.Field.Name, new { @class = "form-control"}) </div> <div class="md-form"> @Html.DropDownListFor(model => model.DisciplineID, Model.DisciplineSelectListItems, " ", new { @class = "mdb-select" }) @Html.LabelFor(model => model.DisciplineSelectListItems) @Html.ValidationMessageFor(model => model.DisciplineID) </div> </div> </div></div>
the dropdown is shown fine, but the textbox is half heigth... 

here is our bundleConfig...
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-3.2.1.min.js", "~/Scripts/popper.min.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate.min.js", "~/Scripts/jquery.validate.unobtrusive.js", "~/Scripts/requiredIfValidator.js", "~/Scripts/numberValidation.js", "~/Scripts/moment.min.js" )); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.min.js", "~/Scripts/DataTables/jquery.dataTables.min.js", "~/Scripts/DataTables/dataTables.buttons.min.js", "~/Scripts/DataTables/dataTables.bootstrap4.min.js", "~/Scripts/respond.min.js", "~/Scripts/mdb.min.js", "~/Scripts/MDB_Initialization.js", "~/Scripts/daterangepicker.js", "~/Scripts/jquery.unobtrusive-ajax.min.js" )); bundles.Add(new StyleBundle("~/bundles/css").Include( "~/Content/css/bootstrap.min.css", "~/Content/DataTables/css/dataTables.bootstrap4.min.css", "~/Content/css/mdb.min.css", "~/Content/css/daterangepicker.css", "~/Content/css/Site.css")); Thank you in advance

Anna Morawska staff commented 3 years ago

Hi there, it's hard to tell what's wrong.  As you can imagine, we cannot guarantee support for all the technologies out there. Could you provide a working example which shows the problem?  For now, you can try to control the height of textarea via rows attribute or add height rule in your custom css stylesheet.  Best, Anna

Alan van Buuren pro answered 3 years ago

Hi, maybe the problem is the site.css, in my personal project don't use site.css, only use the resources from mdb (not happy yet with this election). I give you a example Hope helps

Anna Morawska staff commented 3 years ago

Hi there, thank you for sharing this with us

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.1
  • Device: PC
  • Browser: IE / Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No