I am trying to build a page with a button and panel. The code is built in a reusable way as this button will be used in multiple pages. However, in a particular page we have a panel displaying info and now they wanted to show this button inside panel header. Can anyone help me to merge these two divs in a separate page using CSS.
Current:
Desired:
Button code:
<div>
<p class=""><span class="fa fa-star"></span>Mark Read</p>
</div>
Panel code:
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
You can just move it into the heading and remove the div
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<p class=""><span class="fa fa-star"></span>Mark Read</p>Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
Related
I have a multiple section accordion set up with two column. The page is setup something like this:
<div class="panel-group" id="Accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#Accordion" data-target="#ApplicantInfo">
<h4 class="panel-title">
<a class="accordion-toggle">
Applicant Information:
</a>
</h4>
</div>
<div id="ApplicantInfo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div id="divApplicant" class="col-xs-6">Applicant:</div>
<div id="divApplicantPhone" class="col-xs-6">Applicant Telephone:</div>
</div>
<div class="row spFieldRow">
<div class="col-xs-6">
<span dir="none">
<input id="applinantName" ...>
</span>
</div>
<div class="col-xs-6">
<span dir="none">
<input id="applinantPhone" ...>
</span>
</div>
</div>
<div class="row">
<div id="divApplicantEmail" class="col-xs-6">Applicant Email:</div>
<div id="divApplicantType" class="col-xs-6">Applicant Type:</div>
</div>
<div class="row spFieldRow">
<div class="col-xs-6">
<span dir="none">
<input id="applinantEmail" ...>
</span>
</div>
<div class="col-xs-6">
<span dir="none">
<input id="applinantType" ...>
</span>
</div>
</div>
</div>
</div>
</div>
For the most part it works very well. However, some of my fields are dynamic depending on the selection of one of the other fields. The problem I am running into is that if I remove say either of the input rows or even just the text box it shrinks the width of the panel.
I have attached a couple of pics to illustrate.
Before:
After:
I have tried affecting entire rows, I even added a div container around the label and input containers and hiding that. Doesn't matter, the second row shifts up and shrinks.
Please be kind, I am very new to bootstrap (my first time) and haven't done much front end development in recent years. I appreciate any assistance.
Edit:
I created a JSFiddle as close to this as possible and can't recreate the issue (you can find it here if you want).
I completely forgot to mention prior, but this page is sitting on a SharePoint site so there is all other kinds of css being loaded. My guess is one of them is getting in the way. If anyone has seen this before i would appreciate any input.
I am not sure this is what you are looking for but instead of dynamically adding the panels themselves, you can show/hide them at will.
(you can still dynamically add content to each panel as you see fit, just not the panels - they serve as containers for your dynamic content)
See demo below (select an applicant type in the dropdown box):
$(function() {
$("select").on("change", function() {
if ($(this).val() === 'Internal') {
$("#externalPanel").collapse('hide');
$("#internalPanel").removeClass('hide');
$("#internalPanel").collapse('show');
} else if ($(this).val() === 'External') {
$("#internalPanel").collapse('hide');
$("#externalPanel").removeClass('hide');
$("#externalPanel").collapse('show');
} else {
$(".secondary-panel").collapse('hide');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel-group" id="ADMSAccordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#ADMSAccordion" data-target="#ApplicantInfo">
<h4 class="panel-title">
<a class="accordion-toggle">
Applicant Information:
</a>
</h4>
</div>
<div id="ApplicantInfo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div id="divApplicant" class="col-xs-6">Applicant:</div>
<div id="divApplicantPhone" class="col-xs-6">Applicant Telephone:</div>
</div>
<div class="row">
<div class="col-xs-6">
<input title="Applicant" type="text" maxlength="255" />
</div>
<div class="col-xs-6">
<input title="ApplicantPhone" type="text" maxlength="255" />
</div>
</div>
<div class="row">
<div id="divApplicantEmail" class="col-xs-6">Applicant Email:</div>
<div id="divApplicantType" class="col-xs-6">Applicant Type:</div>
</div>
<div class="row">
<div class="col-xs-6">
<input title="ApplicantEmail" type="text" maxlength="255" />
</div>
<div class="col-xs-6">
<select title="ApplicantType">
<option selected="Selected" value=""></option>
<option value="Internal">Internal</option>
<option value="External">External</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- External panel -->
<div id="externalPanel" class="panel panel-default hide secondary-panel">
<div class="panel-heading">
<h3 class="panel-title">External Panel</h3>
</div>
<div class="panel-body">
External Panel content
</div>
</div>
<!-- INternal panel -->
<div id="internalPanel" class="panel panel-default hide secondary-panel">
<div class="panel-heading">
<h3 class="panel-title">Internal Panel</h3>
</div>
<div class="panel-body">
Internal Panel content
</div>
</div>
My website contains this simple menu home, about me and contact.
It's single page website, I want to make it easy for user's when visiting my page, user can scroll down the page to check the contact or about me etc or user can just simply click About me or Contact and the window will pop up and show only About me or Contact [using modals in bootstrap], I am able to do that ,but all things event containing modals are hidden on my page , how can I make those things containing modals visible on my page ?
Here is simple contact page codes with modals.
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav" id="nav">
<li>
<a href="#">Home
</a>
</li>
<li>
<a href="#abt_modal" data-toggle="modal" data-target="#abt_modal">About me
</a>
</li>
<li>
<a href="#modal1" data-toggle="modal" data-target="#myModal"> Contact
</a>
</li>
<li>
</ul>
</div>
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<footer class="f7" id="modal1">
<button type="button" class="btn btn-default" data-dismiss="modal" id="close1">Close</button>
<div class="container-fluid">
<div class="row" id="ft">
<div class="ft">
<h3> SAY HELLO </h3>
<span>get in touch</span>
</div>
<div class="col-md-4 a">
<p>
<i class="fa fa-mobile-phone fa-5x"></i> <br><br>
<span> Call us at </span><br>
<span> +467i7292518347</span><br>
</p>
</div>
<div class="col-md-4 a" >
<p>
<i class="fa fa-map-marker fa-5x"></i> <br><br>
<span> Ul.Zagórze 27A </span> <br>
<span>05-098 Sadowata,<br> Poland </span>
</p>
</div>
<div class="col-md-4 a">
<p>
<i class="fa fa-envelope fa-5x"></i><br><br>
<span> Email us at</span> <br>
<span>Hotbong20376gównoJebanye#gmail.com</span><br>
</p>
</div>
</div>
</div>
</footer>
</div>
</div>
Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
function openModalDynamic() {
var message = $('#content-div');
BootstrapDialog.show({
title: 'Default Title',
message: $('#content-div'),
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}],
onhide: function(dialog) {
$('#content-container').append(message);
}
});
};
function openModalDynamic2() {
BootstrapDialog.show({
title: 'Default Title',
message: $('#content-div').clone(true),
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}],
onhide: function(dialog) {}
});
}
<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<button type="button" onclick="openModalDynamic()">Type 1</button>
<button type="button" onclick="openModalDynamic2()">Type 2</button>
<br> Type 1 : This code will cut the div from original location and put it into your modal.<br> Type 2 : This code will copy the div from original location and put it into your modal. So you will see same div at both the place.<br> This will work great
until and unless you have any activity depending upon id's of elements.
<div style="height : 250px">
</div>
<div id="content-container">
<div id="content-div">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="row">
<div class="col-sm-6">
About US will go here.
</div>
<div class="col-sm-6">
Contact US will go here.
</div>
</div>
</div>
</div>
</div>
I'm trying to design a page with bootstrap 3 that has the main information on the left, and then a small side-bar on the right where additional links and graphs relating to the main info will go:
http://www.bootply.com/ZLB46jDSnU
Problem is if I use container-fluid for the main body (line 55), vertical scrolling is gone even though the sidebar needs it..If I change container-fluid to container, everything works nicely BUT the main body overlaps with my sidebar. Giving me the impression the fluid layout is what I want.
Does anybody know why this interferes with scrolling? Am I taking the wrong approach to have a sidebar divs independent the page content divs?
Got it working with Skelly's help!
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="right">
<div class="panel panel-default ">
<div class="panel-heading">
<h3 class="panel-title">Shortcuts</h3>
</div>
<!--User details -->
<div class="panel-body">
<li>Milestones --»</li>
<li>Versions --»</li>
<li>CSV Report --»</li>
</div>
</div>
</div>
<div class="col-sm-8" id="left">
<!--All apps -->
<div class="panel panel-default" ng-init="">
<!-- Default panel contents -->
<div class="panel-heading clearfix">
<b>Your Applications</b>
</div>
<div class="panel-body">
<table-here></table-here>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hi there i am trying to make a pannel in bootstrap. I am new to this so sorry if this is a simple question. I am trying to create a pannel like this website : Website
So far i have made the header , body and footer , however i cant create the body part of it, i am stuggling to create it and everything i try is not working. If anyone can assist me in this and explain it would be great help
Code so far:
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
Thanks for the help guys xx
Edit: Sorry i should have made it clear. The problem i am having is creating the content in the body part. So creating anther pannel for the image, then the button and then the list of ingredients. This is my main problem
You should be able to nest them as needed, so this should work.
<body>
<div class="container">
<h2>Panel Heading</h2>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">inner Panel Heading</div>
<div class="panel-body">innner panel body</div>
<div class="panel-footer">inner Panel Footer</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">inner Panel Heading</div>
<div class="panel-body">innner panel body</div>
<div class="panel-footer">inner Panel Footer</div>
</div>
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
here's a code pen of the layout
I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:
<div class="container">
<div class="page-header">
<h1>
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary">
...content...
</div>
</div>
...
</div>
I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?
you have to add pull-left to the h1 too.. to have both of them floated..
also add a .cleafix class to the page-header div
<div class="container">
<div class="page-header clearfix">
<h1 class="pull-left">
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary pull-right">
...content...
</div>
</div>
...
</div>
I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.
Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.
DEMO: http://jsbin.com/sadup/1
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
</div>
<!--/.col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--/.col-sm-4 -->
</div>
<!--/.row -->
</div>
<!--/.container -->