jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Elongated column menu
This topic contains 9 replies, has 2 voices, and was last updated by Martin 6 years, 5 months ago.
-
AuthorElongated column menu Posts
-
Hello,
Wondering if anyone might know the cause of the column dropdown menu (where filters and groupings can be chosen) is elongated – i.e. includes big gap between options.Hello robf,
From this screenshot it seems that it is something from the styling, maybe some external css.
Could you provide us a code example where it can be seen?Best Regards,
MartinjQWidgets Team
http://www.jqwidgets.com/Hi. I am using Bootstrp. Below is my basic index.html config.
`
<!DOCTYPE html>
<html lang=”en”><head>
<title id=’Description’>Viewer</title>
<link rel=”stylesheet” href=”css/bootstrap.min.css” type=”text/css” />
<link href=”css/font-awesome.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.energyblue.css” type=”text/css” /><script type=”text/javascript” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxGrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxGrid.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxGrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxGrid.grouping.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxGrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxGrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxGrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxGrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script><script type=”text/javascript” src=”js/underscore.min.js”></script>
<script type=”text/javascript” src=”js/underscore.string.min.js”></script>
<script type=”text/javascript” src=”js/moment.min.js”></script>
<script type=”text/javascript” src=”js/bootbox.min.js”></script>
<script type=”text/javascript” src=”js/main.js”></script></head>
<body>
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-12″>
<h3 class=”text-primary”> <img src=”images/logo.png” alt=”” /> Viewer</h3>
</div>
</div><div class=”row”>
<div class=”col-md-12″>
<div class=”well well-sm” style=”background-color: lightsteelblue”>
<p class=”info” style=”line-height: 24px”>This app allows you to monitor in a single
view. It includes dynamic filtering, grouping and sorting.</b>
</p>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<div><button id=”allData” type=”button” class=”btn btn-primary”>Load Data</button>
<div class=”btn-group”>
<button type=”button” class=”btn btn-warning dropdown-toggle” data-toggle=”dropdown” aria-haspopup=”true”
aria-expanded=”false”>Filter Status <span class=”caret”></span>
</button>
<ul class=”dropdown-menu”>
<li><a href=”#” onclick=”getByStatus(‘P’)”>P</a></li>
<li><a href=”#” onclick=”getByStatus(‘U’)”>U</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<div id=”gridWell” class=”well well-sm” style=”background-color: lightsteelblue; display: none”>
<div style=”padding: 5px; “>
<p class=”info2″>
<b>Note:</b> when the grid is loaded, the default <em>groupings</em> are
<b>Money</b> and <b>Status</b> and the default <em>sort</em> is <b>Timestamp</b>
</p>
</div>
<div id=”jqxWidget”>
<div id=”jqxGrid”></div>
</div>
</div>
</div>
</div>
</div><!– Modal –>
<div class=”modal fade” id=”myModal” data-backdrop=”static” data-keyboard=”false” tabindex=”-1″ role=”dialog”
aria-hidden=”true” style=”padding-top:15%; overflow-y:visible;”>
<div class=”modal-dialog modal-m”>
<div class=”modal-content”>
<div class=”modal-body” style=”text-align: center”>
<h4 id=”modalTitle”>Processing request. Please wait…</h4>
<div class=”fa fa-spinner fa-spin fa-3x”></div>
</div>
</div>
</div>
</div></body>
</html>
`Hello robf,
I suppose the issue is caused by the bootstrap styles then.
I would suggest you to inspect the filter menu element in your browser to see why is there such gap.Best Regards,
MartinjQWidgets Team
http://www.jqwidgets.com/Hi. The odd thing is, even when I remove bootstrap.css the menu still is elongated. All the priority css is part of jqx.
Any other thoughts on this would be appreciated.
Thanks.
RobHello robf,
You can see in this Example that the menu is displayed normally.
I would suggest you to compare the styles of your menu with these in the example
and see where the difference come from.Best Regards,
MartinjQWidgets Team
http://www.jqwidgets.com/Hi. Seems the issue is related to jquery version. I am using jquery 3.2. Only 1.11.1 seems to work. Could that be right?
Thanks
RobHi- closing this issue as it seems to run fine from the cdn jquery 3.2. Thanks you!
-
AuthorPosts
You must be logged in to reply to this topic.