Here is the code to play with:
Bootply
$('.collapse').on('shown.bs.collapse', function() {
$("span").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
});
$('.collapse').on('hidden.bs.collapse', function() {
$("span").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div class="container">
<p> my content goes here... </p>
</div>
</div>
</div>
</div>
</div>
How can I remove the borders around my panel, except for the top one? I want the top border but not the ones on left, right or bottom.
Sorry if it seems too simple; I'm just new to whole web dev stack.
Make use of the border-width properties.
Check the CSS in this code: Bootply
Related
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>
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>
I've got a bit of a problem here, and i'm not sure how to fix it. It's probably something really small and stupid, but i'm looking over it...
I've got this accordion in bootstrap, and normally the open elements collapse when you select a new one. This is not happening in my version.
Code Below:
<template>
<div class='monsters'>
<div class="loading" v-if="loading">
<div class="loading">Loading…</div>
</div>
<div v-if="error" class="error">
{{ error }}
</div>
<ul v-if="monsters">
<div class="panel-group" id="accordion">
<div class="panel panel-default" v-for="monster in monsters">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" :href="'#monster'+monster.id">{{ monster.name }}</a>
</h4>
</div>
<div :id="'monster'+monster.id" class="panel-collapse collapse in">
<monster-lg v-bind:monster="monster"></monster-lg>
</div>
</div>
</div>
</ul>
</div>
</template>
Any ideas on why how etc?
I need to collapse other component from a button. So I have a directive name collapse and I want to set target collapseme to the diretive.
<div class="panel-heading">
<h4 class="panel-title">
<a [collapse]="isColapse" [collapseTarget]="collapseme" (click)="isColapse= !isColapse">
</a>
</h4>
</div>
<div id="collapseme">
<div class="panel-body">
collapse content
</div>
</div>
But I cant find solution for it. Do you have any solution?
Add a template variable #collapseme
<div class="panel-heading">
<h4 class="panel-title">
<a [collapse]="isColapse" [collapseTarget]="collapseme" (click)="isColapse= !isColapse">
</a>
</h4>
</div>
<div id="collapseme" #collapseme> <!-- modified -->
<div class="panel-body">
collapse content
</div>
</div>
It seems you have used bootstrap. You can do it via bootstrap
collapse
i have the following html code for the bootstrap collapse
<div class="panel-group" id="accordion" style="margin-left:890px;width:444px;padding:0px;border:0px solid black;">
<div class="panel panel-default">
<div class="panel-heading" style="padding:0px;">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:442px;margin:0px;" data-parent="#accordion">
<span style="float:left;">Month Calendar</span>
<span class="glyphicon glyphicon-menu-down" style="float:right"></span>
</button>
</div>
<div id="demo" class="panel-collapse collapse in" style="border:0px solid black;padding:0px;">
<div class="panel-body" style="padding:0px;">
#Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
</div>
</div>
</div>
</div>
this has a dev express control. when the page loads the navigator (this is a calendar) displays expanded and the context underneath it moves. So to prevent this i need to make the calendar overflow over the content. How do i make this calendar control overflow over the other?
here is an image to show whats happening
You should make the panel-default position: relative so that it's descendants are bound to it and then make the panel-collapse position: absolute to prevent it from affecting the rest of the flow.
<div class="panel-group" id="accordion" style="margin-left:890px;width:444px;padding:0px;border:0px solid black;position:relative">
<div class="panel panel-default">
<div class="panel-heading" style="padding:0px;">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:442px;margin:0px;" data-parent="#accordion">
<span style="float:left;">Month Calendar</span>
<span class="glyphicon glyphicon-menu-down" style="float:right"></span>
</button>
</div>
<div id="demo" class="panel-collapse collapse in" style="border:0px solid black;padding:0px;position:absolute;top:100%;">
<div class="panel-body" style="padding:0px;">
#Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
</div>
</div>
</div>
</div>
Note: You are using alot of inline styles, it is best to keep as much of styling as possible in css.