I have a bootstrap dropdown as part of input group. How do I align width of the dropdown-menu to parent's input-group?
<div id="ddl_1" class="input-group">
<input type="text" class="form-control ">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
aria-haspopup="true" aria-expanded="true"
data-toggle="dropdown"
data-boundary="viewport"
data-reference="parent"
data-target="#ddl_1">
</button>
<div class="dropdown-menu">
<div class="dropdown-item">Name 0</div>
<div class="dropdown-item">Name 1</div>
<div class="dropdown-item">Name 2</div>
<div class="dropdown-item">Name 3</div>
<div class="dropdown-item">Name 4</div>
</div>
</div>
</div><!-- end input group -->
Note, that I'm using data-boundary="viewport" because I use it inside scrollable container and it might overflow.
https://codepen.io/Lieroo/pen/JjKadpa
You can change the "position-static" of the "input-group" div to "position-relative". Then you add "w-100" to the "dropdown-menu" div.
<div id="ddl_1" class="input-group position-relative show">
<input type="text" class="form-control ">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
aria-haspopup="true" aria-expanded="true"
data-toggle="dropdown"
data-boundary="viewport"
data-reference="parent"
data-target="#ddl_1">
</button>
<div class="dropdown-menu w-100">
<div class="dropdown-item">Name 0</div>
<div class="dropdown-item">Name 1</div>
<div class="dropdown-item">Name 2</div>
<div class="dropdown-item">Name 3</div>
<div class="dropdown-item">Name 4</div>
</div>
</div>
</div><!-- end input group -->
https://codepen.io/callmesupercookie/pen/MWeqaeX
Related
For this project I have to display a specific email adresses mailbox. In particular I need the 'Mail Card List' to be a scrollable component instead of stretching down the page, past the footer. I have tried using the 'max-height: ;' css style but that sets a fixed height. I am after a variable height (so it will work on different screen sizes, etc).
I
Any advice on how to achieve this (or even where to look) would be great. Thank you.
JsFiddle: https://jsfiddle.net/6fr9bh4v/4/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>TEMP MAIL</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">EMAIL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Report</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- MAILBOX PAGE -->
<div class="container">
<div class="row">
<div class="col-10">
<h1 class="d-flex justify-content-center">
<span class="badge bg-secondary m-3">user#domain.com</span>
</h1>
</div>
<div class="col-2 d-flex justify-content-center">
<button class="btn btn-outline-success mt-4 mb-4 mx-1">Return</button>
<button class="btn btn-outline-primary mt-4 mb-4 mx-1">Refresh</button>
</div>
<hr>
<!-- BASE - Search component -->
<div class="col-3">
<div class="input-group mb-3">
<input class="form-control" type="text">
<button class="btn btn-outline-success">Search</button>
<button class="btn btn-outline-danger">Clear</button>
</div>
</div>
<!-- EMAIL VIEW ONLY | ADD -->
<div class="col-7">
<div>
<dl class="row">
<dt class="col-2 text-end m-0">
From:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
To:
</dt>
<dd class="col-10 m-0">
Dan
</dd>
<dt class="col-2 text-end m-0">
Date:
</dt>
<dd class="col-10 m-0">
1/1/2000
</dd>
<dt class="col-2 text-end m-0">
Subject:
</dt>
<dd class="col-10 m-0">
Test email!
</dd>
</dl>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div>
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
<br>
<!--
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
-->
</div>
</div>
<hr>
<!-- EMAIL CARD LIST -->
<div class="col-3" style="overflow-y: scroll;">
<!-- EMAIL CARD -->
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 1</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 2</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 3</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
</div>
<!-- EMAIL VIEW ONLY -->
<div class="col-9">SHOW EMAIL HERE</div>
</div>
</div>
<footer class="footer fixed-bottom">
<div class="container-fluid text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
THIS IS A FOOTER
<br>
<a class="text-reset fw-bold" href="#">FOOTER LINK</a>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
Replace the inline style rule for overflow, you are using bootstrap, use the overflow-scroll class.
For the overflow to work you need to give it height, but since this is to be dynamic (to work across devices), so you will need to make it relative to viewport
<!-- EMAIL LIST -->
<div class="col-3 overflow-scroll vh-100">
.
.
.
</div>
With the above changes you'll see improvements but, you will need to consider the height that the rest of the elements (navigation etc) take. And when you have this in pixels, you can use CSS calc() to subtract it from the full viewport height. Create a class for your custom height relative to the viewport, for example:
.custom-height {
height: calc(100vh - 400px);
min-height: 60px; /* add min-height to prevent it from becoming way too small if not enough vertical space*/
}
To allow space for the footer add margin on the "mailbox page" container div, mb-5
Remove fixed-bottom from <footer>
Full code:
.custom-height {
height: calc(100vh - 400px);
min-height: 60px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>TEMP MAIL</title>
</head>
<body>
<!-- https://getbootstrap.com/docs/5.1/getting-started/introduction/ -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">LarryMail</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Report</a>
</li>
<!-- API ACCESS | ON BACK LIST
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">API</a>
</li>
-->
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<select class="form-select me-2" aria-label="Default select example">
<option selected>Select Domain</option>
<option value="1">#crazyforher.com</option>
<option value="2">#etc...</option>
<option value="3">#etc...</option>
</select>
<button class="btn btn-outline-success me-2" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!--
{% block content %}
{% endblock %}
-->
<!-- HOME PAGE
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">LarryMail</h1>
<p class="lead">Unlimited mailboxes. Courtesy of Larry.</p>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<select class="form-select me-2" aria-label="Default select example">
<option selected>Select Domain</option>
<option value="1">#crazyforher.com</option>
<option value="2">#etc...</option>
<option value="3">#etc...</option>
</select>
<button class="btn btn-outline-success me-2" type="submit">Search</button>
</form>
</div>
</main>
-->
<!-- MAILBOX PAGE -->
<div class="container mb-5">
<div class="row">
<div class="col-10">
<h1 class="d-flex justify-content-center">
<span class="badge bg-secondary m-3">admin#crazyforher.com</span>
</h1>
</div>
<div class="col-2 d-flex justify-content-center">
<button class="btn btn-outline-success mt-4 mb-4 mx-1">Return</button>
<button class="btn btn-outline-primary mt-4 mb-4 mx-1">Refresh</button>
</div>
<hr>
<!-- BASE - Search component -->
<div class="col-3">
<div class="input-group mb-3">
<input class="form-control" type="text">
<button class="btn btn-outline-success">Search</button>
<button class="btn btn-outline-danger">Clear</button>
</div>
</div>
<!-- EMAIL VIEW ONLY | ADD -->
<div class="col-7">
<!-- IF MAILBOX EMPTY
<p>
Select a message at left, or enter a different username into the box on upper right.
</p>
-->
<div>
<dl class="row">
<dt class="col-2 text-end m-0">
From:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
To:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
Date:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
Subject:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
</dl>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div>
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
<br>
<!--
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
-->
</div>
</div>
<hr>
<!-- EMAIL LIST -->
<div class="col-3 overflow-scroll custom-height">
<!-- EMAIL CARD -->
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 1</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 2</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 3</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
</div>
<!-- EMAIL VIEW ONLY -->
<div class="col-9">SHOW EMAIL HERE</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
THIS IS A FOOTER
<br>
<a class="text-reset fw-bold" href="#">FOOTER LINK</a>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
I have a form that looks like the following:
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
I'm using Bootstrap 4. The thing is, I want this form to be the max width of its container - to have the textarea stretch and the buttons be a static width. If I use the above, I get a big empty gap because the smallest col (col-1) is to wide for the buttons. How can I have it fill the width of the screen with the button columns remaining a fixed width?
I have a feeling its using flex and d-flex but I cant manage to get it work.
add flex-grow-0 to buttons column:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="col flex-grow-0">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
</div>
You can remove .col and use d-flex and flex-grow-1.
Then, you can also add a margin-left using ml-3 to the buttons.
<div class="row mw-100">
<div class="d-flex flex-grow-1">
<textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
</div>
<div class="ml-3">
<div class="row">
<div class="col">
<button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
</div>
</div>
</div>
</div>
For the buttons container, you can set the width you want.
I am developing a web application and would like my EntreCadastre-se|Carrinho menu to be next to the text field, but it is getting underneath
<div class="row">
<div class="col-6 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal">
</div>
<div class="col-6 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-6 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>
What you are doing wrong here is your math. Like #efkin said you have only 12 columns. But you have defined three divs with col-6. That means 3*6 = 18.
When you want 3 columns with equal size on one row you have to use col-4 for each, because 3*4 = 12.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal" >
</div>
<div class="col-4 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-4 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>
I have a group of buttons group:
<div class="row">
<div class="col-md-2">
<div class="btn-group-vertical btn-group-justified" role="group" id="nav_bar">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup1" data-parent="#accordion">Setup1</a>
<div id="Setup1" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<a class="btn btn-primary" data-toggle="collapse" href="#Setup2" data-parent="#accordion">Setup2</a>
<div id="Setup2" class="panel-collapse collapse">
<div class="col-md-12">
<div class="btn-group-vertical btn-group-justified" role="group">
<div class="row">
<button type="button" class="btn btn-default">MAIN</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">EXEC</button>
</div>
<div class="row">
<button type="button" class="btn btn-default">ROUTER</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and in output this is:
but I cant figure out, how to make collapse one group, when you expand other. Could someone help with that?
I was trying to play with panels, but it's unsuitable, because i need a style, which showed on attached image. And in panels only text is clickable.
Thanks
You can do it by setting up your elements with bootstrap properly.
But you can also extend the collapse by:
$('.btn').on('click',function(){
$('.panel-collapse').each(function(){
$(this).removeClass('in');
}):
});
I have two simple dropdown menus with Bootstrap v3. I want it so that they are displayed side by side with a width and utilizing the grid.
But it seems that the width stays the same. HEre is what I mean:
.menuList > div.dropdownInline {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menuList">
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
<hr />
<h1>Without inline... </h1>
<div class="menuList">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
Do you see how without inline... the dropdown stretches fine into a nice width but ... with it.. (top menus)... it becomes squished? And one doesn't even show the blue panel.
What am I doing wrong?
you can just set width of menu
.dropdown-menu{
width:400px;//or whatever you want
}
check this out
Plunker
.dropdowm-menu is as small as it's content
so you can just fix it like above or set width of it's children element.
.menuList > div.dropdownInline {
display: inline-block;
}
.dropdown button{ margin-top:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="menuList">
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown dropdownInline">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
<hr />
<h1>Without inline... </h1>
<div class="menuList">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">
<div class="row">
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
<div class="col-md-3">
<input type="text" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
Warning!
</div>
</div>
<div class="col-md-6">
<div class="alert alert-danger" role="alert">
Danger!
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">What an informatical message.</div>
</div>
</div>
</div>
</div>
<!-- SECOND DROPDOWN -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">
<div class="row">
<div class="col-md-12">
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
</div>
</div>
</div>
</div></div>
Just add it