StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POTwitter bootstrap select menu pushing other elements below
primarykey
Id
20705425
data
AcceptedAnswerId
0
AnswerCount
3
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-12-20T14:07:19.130
FavoriteCount
0
LastActivityDate
2018-06-15T13:27:34.027
LastEditDate
2018-06-15T13:27:34.027
LastEditorUserId
229044
OwnerUserId
0
ParentId
0
PostTypeId
1
Score
0
ViewCount
4584
LastEditorDisplayName
text
Body
<p><img src="https://i.stack.imgur.com/EAUXQ.jpg" alt="BEfore"></p> <p><img src="https://i.stack.imgur.com/xaGMW.jpg" alt="enter image description here"></p> <p>This is what is happening.Im using bootsrap-select for this select.</p> <p>its css is</p> <pre><code>/*! * bootstrap-select v1.4.2 * http://silviomoreto.github.io/bootstrap-select/ * * Copyright 2013 bootstrap-select * Licensed under the MIT license */ .bootstrap-select.btn-group, .bootstrap-select.btn-group[class*="span"] { float: none; display: inline-block; margin-bottom: 10px; margin-left: 0; } .form-search .bootstrap-select.btn-group, .form-inline .bootstrap-select.btn-group, .form-horizontal .bootstrap-select.btn-group { margin-bottom: 0; } .bootstrap-select.form-control { margin-bottom: 0; padding: 0; border: none; } .bootstrap-select.btn-group.pull-right, .bootstrap-select.btn-group[class*="span"].pull-right, .row-fluid .bootstrap-select.btn-group[class*="span"].pull-right { float: right; } .input-append .bootstrap-select.btn-group { margin-left: -1px; } .input-prepend .bootstrap-select.btn-group { margin-right: -1px; } .bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]) { width: 150px; } .bootstrap-select { /*width: 220px\9; IE8 and below*/ width: 220px\0; /*IE9 and below*/ } .bootstrap-select.form-control:not([class*="span"]) { width: 100%; } .bootstrap-select > .btn { font-weight:700;border-style:solid; border-width:2px; width: 100%; } .error .bootstrap-select .btn { border: 1px solid #b94a48; } .dropdown-menu { z-index: 2000; } .bootstrap-select.show-menu-arrow.open > .btn { z-index: 2051; } .bootstrap-select .btn:focus { outline: thin dotted #333333 !important; outline: 5px auto -webkit-focus-ring-color !important; outline-offset: -2px; } .bootstrap-select.btn-group .btn .filter-option { overflow: hidden; position: absolute; left: 12px; right: 25px; text-align: left; } .bootstrap-select.btn-group .btn .caret { position: absolute; top: 50%; right: 12px; margin-top: -2px; vertical-align: middle; } .bootstrap-select.btn-group > .disabled, .bootstrap-select.btn-group .dropdown-menu li.disabled > a { cursor: not-allowed; } .bootstrap-select.btn-group > .disabled:focus { outline: none !important; } .bootstrap-select.btn-group[class*="span"] .btn { width: 100%; } .bootstrap-select.btn-group .dropdown-menu { min-width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .bootstrap-select.btn-group .dropdown-menu.inner { position: static; border: 0; padding: 0; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .bootstrap-select.btn-group .dropdown-menu dt { display: block; padding: 3px 20px; cursor: default; } .bootstrap-select.btn-group .div-contain { overflow: hidden; } .bootstrap-select.btn-group .dropdown-menu li { position: relative; } .bootstrap-select.btn-group .dropdown-menu li > a.opt { position: relative; padding-left: 35px; } .bootstrap-select.btn-group .dropdown-menu li > a { cursor: pointer; } .bootstrap-select.btn-group .dropdown-menu li > dt small { font-weight: normal; } .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a i.check-mark { display: inline-block; position: absolute; right: 15px; margin-top: 2.5px; } .bootstrap-select.btn-group .dropdown-menu li a i.check-mark { display: none; } .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text { margin-right: 34px; } .bootstrap-select.btn-group .dropdown-menu li small { padding-left: 0.5em; } .bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:hover small, .bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:focus small, .bootstrap-select.btn-group .dropdown-menu li.active:not(.disabled) > a small { color: #64b1d8; color: rgba(255,255,255,0.4); } .bootstrap-select.btn-group .dropdown-menu li > dt small { font-weight: normal; } .bootstrap-select.show-menu-arrow .dropdown-toggle:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #CCC; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; bottom: -4px; left: 9px; display: none; } .bootstrap-select.show-menu-arrow .dropdown-toggle:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid white; position: absolute; bottom: -4px; left: 10px; display: none; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before { bottom: auto; top: -3px; border-top: 7px solid #ccc; border-bottom: 0; border-top-color: rgba(0, 0, 0, 0.2); } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after { bottom: auto; top: -3px; border-top: 6px solid #ffffff; border-bottom: 0; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before { right: 12px; left: auto; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after { right: 13px; left: auto; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after { display: block; } .bootstrap-select.btn-group .no-results { padding: 3px; background: #f5f5f5; margin: 0 5px; } .mobile-device { position: absolute; top: 0; left: 0; display: block !important; width: 100%; height: 100% !important; opacity: 0; } .bootstrap-select.fit-width { width: auto !important; } .bootstrap-select.btn-group.fit-width .btn .filter-option { position: static; } .bootstrap-select.btn-group.fit-width .btn .caret { position: static; top: auto; margin-top: -1px; } .control-group.error .bootstrap-select .dropdown-toggle{ border-color: #b94a48; } .bootstrap-select-searchbox { padding: 4px 8px; } .bootstrap-select-searchbox input { margin-bottom: 0; } </code></pre> <p>js is</p> <pre><code> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-select.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.selectpicker').selectpicker({ style: 'btn btn-white btn-sm' }); }); </script> </code></pre> <p>Why is it streching down other elements below?why does this happen?The html is</p> <pre><code> <div class="form-group"> <label class="control-label" style="display:inline;">Expiry</label> <div> <select class="selectpicker" id="expiry_month" name="expiry_month"> <option selected>Select Month</option> <option value="01">January</option> <option value="02">February</option> <option value="03">March</option> <option value="04">April</option> <option value="05">May</option> <option value="06">June</option> <option value="07">July</option> <option value="08">August</option> <option value="09">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select class="selectpicker" id="expiry_year" name="expiry_year"> <option selected>Select Year</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> <option value="2031">2031</option> <option value="2032">2032</option> <option value="2033">2033</option> <option value="2034">2034</option> <option value="2035">2035</option> <option value="2036">2036</option> </select> </div> </div> </code></pre> <p>Is it the problem with its css?Or can I use any specifications in the javascript?Im using this <a href="http://silviomoreto.github.io/bootstrap-select/" rel="nofollow noreferrer">http://silviomoreto.github.io/bootstrap-select/</a></p>
Tags
<javascript><jquery><html><css><twitter-bootstrap>
Title
Twitter bootstrap select menu pushing other elements below
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USmeagar
UserOwnerUserId
1. This table or related slice is empty.
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. COThe problem is that,it has got a whole bunch of javascripts and css,that I wont be able to putthall in jsfiddle.Other wise I would have done.By just seeing the images,what can be the issue.Any guess?
  singulars
  PostPostId
  POTwitter bootstrap select menu pushing other elements below
  UserUserId
  This table or related slice is empty.
2. COTry to wrap each select with a div with class say `span3` (depending on the width change the span class)
  singulars
  PostPostId
  POTwitter bootstrap select menu pushing other elements below
  UserUserId
  USanpsmn

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.