I'm using the twitter bootstrap modal functionality.
I've resized my modal so that the width is larger, but instead of my content filling the newly opened space, it instead acts like the content area has gotten smaller. How can I make my pills be all on one line?
CSS
.modal-body {
max-width:65%;
}
.modal {
width:65%;
margin-left: -32.5%;
}
HTML
<div id="newItemModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<h3>New Item</h3>
</div>
<div class="modal-body">
<div class="control-group">
<ul class="nav nav-pills">
<li class="active">Hot Food</li>
<li>Cold Food</li>
<li>Breads</li>
<li>Breakfast</li>
<li>Drinks</li>
<li>Dessert</li>
<li>Banquets</li>
</ul>
</div>
</div>
<div class="modal-footer">
CONFIRM
CANCEL
</div>
I've uploaded an image comparing the before and after appearance of the modal
http://imgur.com/VtjDU4Y - before
http://imgur.com/n4BvewK - after (red circle is my edit)
Thanks for reading.
Related
I have made a layout for showing shopping products of an online store using Bootstrap 3 and it looks like this:
As you can see there is a gap between Films container and the separator line and I need to remove this gap. So the Films container would stick to the right side.
And here is the code for that:
<section>
<div class="flex-kit-game-shop-main">
<!--Books -->
<div id="training-kit" style="background-color: #339966 !important;" class="">
<div class="card bg-transparent border-0 m-r-card">
<div class="">
<div class="title-tab-shop">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
...
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="latest-products">
...
</div>
<div class="tab-pane container fade" id="most-bied">
...
</div>
<div class="tab-pane container fade" id="popular-products">
...
</div>
</div>
</div>
</div>
</div>
</div>
<!--Films -->
<div id="training-kit" style="background-color: #0066ff !important;" class="" >
<div class="card bg-transparent border-0 m-r-card" >
<div class="">
<div class="title-tab-shop">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
...
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="latest-products">
...
</div>
<div class="tab-pane container fade" id="best-selling-products">
...
</div>
<div class="tab-pane container fade" id="popular-products">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I can stick the Films container elements to the right by saying margin-right:-10px; but will affect the added products and make them bigger than their normal size.
So how can I properly make this Films container stick to the right in Bootstrap?
CSS File:
.flex-kit-game-shop-main {
display: flex;
flex-direction: row;
}
#media screen and (max-width: 1200px) {
.flex-kit-game-shop-main {
flex-direction: column;
}
}
Go to the your css file. Find ".flex-kit-game-shop-main" selector. Probably, display value of your top parent div element is "flex"(display:flex;). If it is, I would recommend that you research about conseption of "flexbox" in css. And then, you will be aware of what you should do.
A better option over here is to use the float property in CSS
select the box you wanna align to a side and then add float: left; also remember to clear the float if later you don't wanna use it further, for that add clear: both;
I am using Bootstrap Modal to quick popup my news.
Currently, I have the problem when clicking on link; it only shows a box. It's not fullscreen.
My question simple is: have any method to append width and height of the class contain modal to body to show fullscreen.
I think because of it a child of another parent. And it can't show fullscreen.
Have any method to show a class of div is fullscreen not dependency any parent element?
Struct my code like this:
.contentfit {
height: 100%;
position: relative;
}
.right-content {
background-color: #5AA258;
float: left;
width: 70%;
height: 100%;
padding-left: 30px !important;
padding-right: 30px !important;
display: flex;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="section">
<div class="contentfit">
<div class="right-content">
<section id="hoicho">
<div class="title">
<h2>The title</h2>
</div>
<div class="services">
<ul>
<li>Services 1</li>
<li>Services 2</li>
</ul>
</div>
<div class="wrap">
<div class="frameallcontent">
<div class="containter">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<p class="title-p"> Click to link
</p>
<!-- Modal -->
<div class="modal fullscreen-modal fade" id="tintuchoicho" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="left-content">
</div>
</div>
</div>
I only show a part of my code.
You can see in real my example look like this.
When I click the link underline, it only shows small popup like this.
Place this script at the bottom of your page, just before closing </body>.
$(window).on('load', function(){
$('.modal.fade').appendTo('body');
})
It will effectively move your modals from wherever they are placed, making them direct children of <body>.
If this doesn't work, it means you're overriding the default CSS of .modal and you will need to produce a minimal, complete and verifiable example of your problem here or using any online snippet tool.
Bootstraps documentation says:
Modal markup placement
Always try to place a modal's HTML code in a
top-level position in your document to avoid other components
affecting the modal's appearance and/or functionality.
Taken from here: http://getbootstrap.com/javascript/#modals
So i would suggest moving it down the document to before the closing </body> tag if possible. that should resolve your problem.
I've been asked by a friend to create a website.
I've used bootstrap 3 as a framework for the website and have hit a bit of a stumbling block.
My friend wanted a tabbed section where the background image of the section changes depending on which tab is active. I've been able to make it work for just the tab-pane using css, but I need to be able to change the entire section background and not just the tab pane.
I think it will require some JavaScript, but unfortunately my skills in that area a still a bit too weak to know how to do this, and google has been about as helpful as a hole in the head.
below is the section of html that i need the background image to change with each tab
<section id="about" class="content-section text-center">
<div class="row">
<div class="tab-content vertical-center">
<div id="aboutus" class="tab-pane fade in active">
<h2>...</h2>
<p>...</p>
</div>
<div id="history" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
<div id="chef" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-12 nav-pills-bg">
<ul class="nav nav-pills nav-justified">
<li class="active">
<a data-toggle="pill" href="#aboutus">...</a>
</li>
<li>
<a data-toggle="pill" href="#history">...</a>
</li>
<li>
<a data-toggle="pill" href="#chef">...</a>
</li>
</ul>
</div>
</div>
Any help is appreciated
Put your separate css background images on these:
#aboutus {
background-image:.....
}
#history {
background-image:.....
}
#chef {
background-image:.....
}
I checked your code, all works fine and if you want change only contents background, Carol McKay wrote what you have to add in your code. You don't need in this case any javascript code.
I created small example with your code and bootsrap classes: jsfiddle-link
All gaps you can see depends bootstrap classes, for example, by default class .alert has:
.alert {
padding: 15px;
margin-bottom: 20px;
...
}
And one more example with content below pills and looks more familiar): jsfiddle-link2
I'm trying to build a portfolio Page for my business but having trouble getting the Modal to work.
The javascript just executes: without the modal.
Thanks for your help!
<div class="container">
<div class="row">
<ul class="thumbnails">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="images/test.jpg" alt="alt-text"/></li>
</ul>
</div>
</div>
<div id="image1" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
</div>
<div class="modal-body">
<li><img src="images/test.jpg"/></li>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Schließen</button>
</div>
</div>
Thank you for providing an example on jsbin, this makes it much easier for us to help you.
Your problem lies within the first row of this excerpt:
<div id="image1" class="modal hide fade" tabindex="-1"> <!-- here -->
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
Bootstrap's .hide class is defined like this:
.hide {
display: none !important;
}
This means that whatever happens, elements with the class .hide will stay hidden. This is ensured with the !important rule.
To solve your issue, you either remove the .hide class from div#image1 like this:
<div id="image1" class="modal fade" tabindex="-1"> <!-- no hide class -->
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
Or you supply an onclick listener which removes the .hide class if a click occurs. Though, this should not be necessary, since Bootstrap's modal is not visible by default.
Using bootstrap 3 I am trying this exameple, using class="active" in the li element. Unfortunatelly when the page initially shows up neither tab pane is shown, the whole tab content is empty. The tab navs displayed correctly and when I explicitly click on a tab, the correct pane show up.
What I am missing?
Thanks in advance.
<ul class="nav nav-tabs">
<li class="active">graduation</li>
<li>graduate</li>
<li>extension</li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade" id="graduation">
<p>
anything
</p>
</div>
<div class="tab-pane fade" id="graduate">
<p>
graduate
</p>
</div>
<div class="tab-pane fade" id="extension">
<p>
extension
</p>
</div>
</div>
You also need to specify the active class on the default tab-pane (and for fading tabs you need to add the in class), thus you should change
<div class="tab-pane fade" id="graduation">
to
Bootstrap 3
<div class="tab-pane fade in active" id="graduation">
Bootstrap 4
<div class="tab-pane fade show active" id="graduation">
Bootstrap 4
<div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">
Bootstrap 3
<div class="tab-pane fade in active" id="graduation">
<div class="tab-pane fade in" id="graduation">
In case someone was here looking for a solution for react-bootstrap (like I was). There's a defaultActiveKey attribute you can specify on the Tab component. Reference