Bootstrap modal width - css

I am trying to make a modal popup change it's width so that it matches col-lg-8, col-xs-10
But I just found that modal is fixed width.
So, then I found a css styling that can change the width:
<div class="modal fade" id="mdlBudgets" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-graph col-lg-8 col-xs-10 well well-sm">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-align-left debit_colour"></span> <strong>Budgets</strong>
</div>
</div>
#if (Model.BarDescriptions.Length == 0)
{
<small><span class="glyphicon glyphicon-info-sign debit_colour"></span> You have no Budgets setup yet.</small>
}
else
{
<div id="budgets"></div>
}
<div class="row">
<div class="col-xs-12 text-right"><span class="glyphicon glyphicon-list"></span> View Budgets</div>
</div>
</div>
</div>
</div>
CSS:
body .modal-graph {
/* new custom width */
width: 700px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: 350px;
}
However, firstly, it's off centre, but my biggest issue is - it's a fixed size. Is there a way to make my modal-graph act like col-lg-8, col-xs-10 ?

As you said .modal-dialog has fixed width so you have to overwrite it. Then to use col-xx-xx class, you have to center them. Something like:
<div class="modal fade" id="mdlBudgets" role="dialog">
<div class="modal-dialog as-container">
<div class="modal-content modal-graph col-lg-8 col-xs-10 well well-sm">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-align-left debit_colour"></span> <strong>Budgets</strong>
</div>
</div>
#if (Model.BarDescriptions.Length == 0)
{
<small><span class="glyphicon glyphicon-info-sign debit_colour"></span> You have no Budgets setup yet.</small>
}
else
{
<div id="budgets"></div>
}
<div class="row">
<div class="col-xs-12 text-right"><span class="glyphicon glyphicon-list"></span> View Budgets</div>
</div>
</div>
</div>
</div>
and css:
#media (min-width: 768px) {
.modal-dialog.as-container {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-dialog.as-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-dialog.as-container {
width: 1170px;
}
}
.modal-dialog.as-container .modal-content {
float: none;
margin: auto;
}

Related

Vertically centering dynamically loaded image inside bootstrap modal

How can i vertically center dynamically loaded image inside a div inside bootstrap modal?
My code is like
<div class="modal fade bs-example-modal-lg" id="post-expand-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-vert-align-helper">
<div class="modal-dialog modal-lg modal-vert-align-center" role="document">
<div class="modal-content" style="border-radius: 0;">
<div class="modal-body">
<div class="row no-margin">
<div class="col-md-8 left" >
<center id="post-center" style="margin-top:0;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg/220px-Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg" id="full-img">
</center>
</div>
<div class="col-md-4 right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
css
.modal-body{
min-height: 270px;
}
.left{
}
.right{
height:650px;
border:2px solid blue
}
#post-center{
background:grey;
height:100%;
width:100%;
}
#full-img{
}
I have created a fiddle here. Right now it looks like this
But i would like to make it look like this.
If anyone could help that would be great.
From your existing code and question it's hard to figure out what you want to achieve at different viewport widths, as you probably trimmed down your example too much, but I can only assume this helps:
.right {
border: 2px solid blue;
box-sizing: border-box;
height: 100%;
}
.gray-bg {
background: grey;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#media(max-height: 991px) {
.flex-me .gray-bg {
min-height: 80vh;
}
}
#media (min-width: 992px) {
.flex-me {
display: flex;
}
.gray-bg {
width: calc(100% + 15px);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade bs-example-modal-lg" id="post-expand-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-vert-align-helper">
<div class="modal-dialog modal-lg modal-vert-align-center" role="document">
<div class="modal-content" style="border-radius: 0;">
<div class="modal-body">
<div class="row no-margin flex-me">
<div class="col-md-8">
<div class="text-center gray-bg">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg/220px-Penguins_walking_-Moltke_Harbour%2C_South_Georgia%2C_British_overseas_territory%2C_UK-8.jpg"
id="full-img">
</div>
</div>
<div class="col-md-4">
<div class="right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#post-expand-modal">
Launch Modal
</button>
Here's the fiddle.

Bootstrap rows & col responsive

Using bootstrap's grid, is it possible to build something responsive like this?
This is what I attempted at so far.
<div class="row">
<div class="panel panel-default profile_header">
<div class="panel-body">
<% for user in #users %>
<div class="col-xs-5 col-md-3">
<%= image_tag(user.avatar.url(:medium), :class => "avatar_profile") %>
</div>
<div class="col-xs-7 col-md-9">
<h2 class="profile_name"><%= user.name %></h2>
<div class="row">
<div class="col-xs-12 col-md-12">
<h2 class="profile_bio"><%= user.bio%></h2>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
But for mobile, I want the purple column to pop out and displayed under. The content is too crunched up right now, and breaking it into its own full width box would be much better. Is it possible though?
You didn't ask how cells should look for sm viewport (from 768px till 991px) It should look like for md or like for xs?
Here is a snippet for md and xs viewports
.purple {
background: purple;
}
.orange {
background: orange;
}
.green{
background: green;
}
div[class^="col-"]{
height: 100px;
}
#media screen and (min-width: 992px) {
div.orange {
height: 200px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-5 orange">
</div>
<div class="col-md-9 col-xs-7 green">
</div>
<div class="col-md-9 col-xs-12 purple">
</div>
</div>
</div>

How to resize icons so that its responsive?

How do I make icons automatically resize itself if i make the browser/screen smaller? Here's a part of my code and pictures of how it looks when displayed on a big screen and a small screen.
<div class="row mt">
<div class="col-md-3 col-sm-3 mb">
<div class="green-panel pn">
<div class="green-header">
<h5>ADD NEW STUDENT</h5>
</div>
<div class="row">
<div class="centered">
<i class="fa fa-user-plus"></i>
</div>
</div>
</div><! --/grey-panel -->
</div><!-- /col-md-4-->
<div class="col-md-3 col-sm-3 mb">
<div class="green-panel pn">
<div class="green-header">
<h5>ADD NEW FACULTY</h5>
</div>
<div class="row">
<div class="centered">
<i class="fa fa-user-plus"></i>
</div>
</div>
</div><! --/grey-panel -->
</div><!-- /col-md-4-->
Large screen:
Small screen:
I'm pretty sure you can just reduce the font-size and the icon will be smaller.
example:
/* For screen width smaller than 768px */
#media screen and (max-width: 768px) {
.fa {
font-size: 18px; // or whatever size you want
}
}
#media (max-width: 768px) {
.centered .fa-user-plus {
font-size: 20px;
}
}

horizontally align image/content with media query

I have a row of images with title and descriptions, that when the window is downsized to 991px or fewer in width, the list should be vertical, with the title and description to the right of the image, not below it.
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
#media (max-width: 991px), (max-height: 460px) {
.col-md-2:hover {
background-color: transparent;
}
.col-md-2 {
display: inline-block;
float: left;
}
}
JSFIDDLE
JSFiddle
You're targeting the wrong elements. Your container doesn't need to be pushed to display: inline-block or floated. The elements within it do:
#media (max-width: 991px), (max-height: 460px) {
.col-md-2:hover{
background-color: transparent;
}
.col-md-2 img {
float: left;
}
.col-md-2 {
overflow: auto;
}
}

How to create sticky bottom search box Bootstrap (React)

I have been trying for hours trying different examples I have found, and none seem to work.
What I want to do (without the custom JS): http://jsfiddle.net/paulalexandru/Z2Lu5/
However, I can't get it to work within Bootstrap. I am specifically using React-Bootstrap (I have changed the below code to normal HTML for those unfamiliar with React/React-Bootstrap), but I don't believe that to be the problem. I have a setup along the lines of:
<body>
<div class="container-fluid main">
<div class="row">
<div class="col-md-2 sidebar"
<my sidebar elements>
</div>
<div class="col-md-10">
<some random empty div (that will fill in the future)>
<div class="search">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
<input type="text" onchange="handleChange()" />
</a>
</div>
<div id="searchResultsContainer" className="panel-collapse collpase">
<div className="panel-body">
<my table containing search results from the server>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
However, no matter how hard I try
.search {
position: fixed;
bottom: 0;
width: 100%;
}
You will also notice stuff to try and make the search results accordion, but that's useless to me until I can get this box to stay at the bottom.
My guess is that the Rows/Columns of Bootstrap are causing some issues. I can't move the search box out of the grid and to the bottom (which does work) because it then also covers the sidebar, and I am using the grid system to keep the search box dynamically sized/placed.
Also, I tried this but it didn't seem to work: Making expandable fixed footer in Bootstrap 3?
The solution is position: fixed (you can see the other example using it as well). It should work no matter what framework you are using.
body
{
margin: 0;
padding: 0;
}
.search
{
background: rgba(255,0,0,0.5);
bottom: 0;
position: fixed;
width: 100%;
}
#media only screen and (min-width: 550px)
{
.search
{
left: 50%;
margin-left: -250px;
width: 500px;
}
}
#media only screen and (min-width: 850px)
{
.search
{
margin-left: -400px;
width: 800px
}
}
<div class="container-fluid main">
<div class="row">
<div class="col-md-2 sidebar">
<div>my sidebar elements</div>
</div>
<div class="col-md-10">
<div>some random empty div (that will fill in the future)</div>
<div class="search">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
<input type="text" onchange="handleChange()" />
</a>
</div>
<div id="searchResultsContainer" className="panel-collapse collpase">
<div className="panel-body">
<div>my table containing search results from the server</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle

Resources