At the moment, I have two buttons. The parent button when clicked displays stuff and a part of that stuff is another button which too can be clicked to uncollapse.
I want the child to be closed when the parent is opened, however I assume there is a conflict and the child is opening due to the parent.
Is there any way I can address both the parent & child collapsible individually?
Parent:
<button id="smxs-filter-button" type="button" class="smxs-filter-button btn btn-block" data-toggle="collapse" data-target="#smxs-filter">
<button id='seemore-button' type='button' class='btn btn-block' data-toggle='collapse' data-target='#seemore'>
</button>
</button>
EDIT:
Here is an example of the issue I have.
I require the secondary collapsible to be CLOSED when the parent is opened so that "yoyo" does not show.
http://www.bootply.com/UhUtCNMRb4
Solved it.
http://www.bootply.com/S9CeJ5zFOn
<div>
<button id="smxs-filter-button" type="button" class="smxs-filter-button btn btn-block" data-toggle="collapse" data-target="#smxs-filter">
<h3>Parent</h3>
</button>
<div id="smxs-filter" class="smxs-filter panel-collapse collapse">
<button id="seemore-button" type="button" class="btn btn-block" data-toggle="collapse" data-target="#seemore">
<h3>Child</h3>
</button>
</div>
<div id="seemore" class="collapse">
yoyo
</div>
</div>
Related
I have the following code
<div class="modal-footer">
<div class="pagination">
</div>
<button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
where the HTML for the pagination class is set later. This gives me something that looks like this in my modal
Howeer I want the close button to appear below the other elements. I am wondering how to achieve this in CSS, I have already tried using another to contain the button as well as style:block
one of the best ways to do this is flexbox. I highly recommend learning it.
<div class="modal-footer">
<section class="pagination">
<span>1 2 3</span>
<div>
<button>
next
</button>
<button>
last
</button>
</div>
</section>
<button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
CSS :
.pagination{
display:flex;
gap:10px;
}
.modal-footer{
display:flex;
flex-direction:column;
align-items : flex-start;
justify-content:center;
gap:10px
}
You could try using to insert a line break in the HTML:
<div class="modal-footer">
<div class="pagination">
</div>
<br><button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data- dismiss="modal">Close</button>
Here I added 2 buttons on the header of the accordian, but when I click the button the entire accordian collapses or expands. Is there a way to add buttons to it in such a way that clicking them won't collapse or expand the accordion?
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
<div>26-08-21</div>
<div style="margin-left: -20px;" class="col-1"></div>
<div>project_id</div>
<div class="col-3"></div>
<div>title</div>
<div class="col-3"></div>
</button>
<button type="button" class="btn btn-sm btn-success">
<em class="far fa-edit"></em> Edit
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="far fa-trash-alt"></i> Delete
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<br>
<button style="margin-left: 20px;" type="button" class="btn btn-sm btn-outline-primary">Download CSV</button>
</div>
</div>
</div>
With the on click of buttons, you need to use $event.stopPropagation()
public onButtonClick($event): void {
// Do something on click
$event.stopPropagation()
}
Lets say I've got a collapsible menu with two buttons that will display their corresponding content when clicked. If one is opened, it should close when the other button is clicked. I want to repeat this content x number of times.
<div *ngFor="let item of array; let i = index" class="container" id="myGroup">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
</p>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body">
Content 1 here
</div>
</div>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body">
Content 2 here
</div>
</div>
</div>
I want each of divs with the class container to have their own unique id to match with its content's data-parent attribute. Something like this:
<div *ngFor="let item of array; let i = index" class="container" id="myGroup{{i}}">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
</p>
<div class="collapse" id="collapseExample" data-parent="#myGroup{{i}}">
<div class="card card-body">
Content 1 here
</div>
</div>
<div class="collapse" id="collapseExample2" data-parent="#myGroup{{i}}">
<div class="card card-body">
Content 2 here
</div>
</div>
</div>
My goal is to create a couple of buttons that I can print to the page x number of times. Each time a new set is printed to the page, it's buttons will only respond to its unique ids and data-parents. I tried it just like what I included above, but got the following error:
Uncaught Error: Template parse errors:
Can't bind to 'parent' since it isn't a known property of 'div'.
Is this even possible? Any help is appreciated.
You should use [attr.data-parent] to set the data-parent attibute.
in your case [attr.data-parent] =" '#myGroup' + i"
Use attribute binding syntax instead
Eg
[attr.data-parent]="'#myGroup' + i"
and you can also check with condition i am giving you an example link
How to add conditional attribute in Angular 2?
<button class="list-group-item" type="button">
<a class="btn-sm btn-info" href="/internal-api/v1/guidances/connector-guidance" target="_blank">Second Button</a>
<div class="btn btn-primary ">Main Button </div>
</button>
Is there a way to prevent clicking on a link (Second Button) not to cause clicking Main Button?
<div class="list-group-item" >
<a class="btn-sm btn-info" href="/internal-api/v1/guidances/connector-guidance" target="_blank">Second Button</a>
<button class="btn btn-primary " type="button">Main Button </button>
</div >
Change your code like this to avoid clicking parent button and style accordingly
I'm attempting to create an inline btn-group inside of a column with bootstrap3 classes, but the btn group isn't behaving as expected. Instead of being connected and displayed on the same row, the buttons are being vertically stacked and also appear bigger than they should. Here is a view of what is happening:
btn-group
And the html for this part of the page:
<div class="btn-group">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
Also, no CSS has been applied to the buttons. Any help or suggestions are appreciated, Thanks.
Switch:
<div class="btn-group">
To:
<div class="btn-group-vertical">
Try this:
.btn {
float:left;
}