I want to create an accordion with nested levels. So I have used Angular's accordion directive to create nested levels. But the last level contains a list which should get displayed one by one on new line. But what happens in my case all sub categories gets listed in one line.
I saw in the console that all sub categories are getting listed in one panel body. They should get separate class for each of the sub categories. Any one know how to do that? This is code of my accordion:
<div style='padding-top:50px;'>
<accordion>
<accordion-group heading="Title">
<accordion close-others="oneAtATime">
<accordion-group heading="Category">
<span>Subcat1</span>
<span>Subcat2</span>
</accordion-group>
</accordion>
</accordion-group>
</accordion>
</div>
Directive accordion-group is replacing following code:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span ng-class="{\'text-muted\': isDisabled}">{{heading}}</span>
</a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude>
</div>
</div>
</div>
So whatever I am printing inside <accordion-group></accordion-group> is getting placed in div having class panel-body. But as I am printing Subcat1 and Subcat2 inside accordion-group is going in one div panel-body. Like this:
<div ng-transclude="" class="panel-body">
<span class="ng-scope">Subcat1</span>
<span class="ng-scope">Subcat2</span>
</div>
But I want separate panel-body div for each of Subcat. Like
<div class="panel-body"><span>Subcat1</span></div>
<div class="panel-body"><span>Subcat1</span></div>
For more details see this plunker
Sorry for my english..:P
A <span> is defined as an inline element and will on its own not introduce any line breaks.
To achieve the output on multiple lines, you would either want to use elements that do that on their own, or make use of custom styles, usually via CSS.
If you really have a list of subcategories, you could for example use an ordered list <ol>.
Simple example:
<accordion>
<accordion-group heading="Title">
<accordion close-others="oneAtATime">
<accordion-group heading="Category">
<ol>
<li>Subcat1</li>
<li>Subcat2</li>
</ol>
</accordion-group>
</accordion>
</accordion-group>
Updated Plunker: Link
But this has nothing to do with your tags angularjs or the angular-ui accordion, it's an issue of plain HTML.
Related
I am having the following issue: I am trying to space each of the values underneath each of the title header (see image) in Bootstrap 4. They are currently set up as tags because we are inside of an accordion. I tried the following approach, but that did not work:
<span style="width: pecentagenumber%">NUMBER</span>
How can I do this?
My current code:
<div id="accordion>
<h3>
<span>#bill.MonthName, #bill.Year</span>
<span>#bill.PackageCount</span>
<span>Tier #bill.Tier</span>
<span>$#bill.TotalPrice</span>
<span>UNPAID</span>
</h3>
</div>
This is how it looks currently.
If you have a flexible ability to edit you HTML - lets use bootstrap 4 row and cols structure.
<div id="accordion" class="container">
<h3 class="row">
<span class="col">#bill.MonthName, #bill.Year</span>
<span class="col">#bill.PackageCount</span>
<span class="col">Tier #bill.Tier</span>
<span class="col">$#bill.TotalPrice</span>
<span class="col">UNPAID</span>
</h3>
</div>
This way you will get 5 cols with the same width. It's better to use div instead h3 and span, but I tried adapt it to your request.
More about BS4 Grid system
I want to create a custom element that's going to work like an accordion container for other elements. I'm planning on using the Bootstrap 4 Collapse. I want to be able to place a variable number of other custom elements within it so using slots is not enough.
For example if I knew that there will be 3 elements placed in the accordion I would put three slots in accordion.html and then use it like this:
<accordion>
<first-custom-element slot="first-element"></first-custom-element>
<second-custom-element slot="second-element"></second-custom-element>
<third-custom-element slot="third-element"></third-custom-element>
</accordion>
The thing is, I don't know how many elements will need to placed inside the accordion because I want to make it more generic and reusable so I can use it in multiple pages in my application. What I want is a way to read everything placed inside the <accordion> tags and create slots for each one of these elements the fly. Is there such a functionality in Aurelia or should go for a custom implementation?
Split out the items from the overall accordion element, like this:
accordion.html
<template>
<div id="accordion" role="tablist" aria-multiselectable="true">
<slot></slot>
</div>
</template>
accordion-item.html
<template bindable="panelTitle, headingId, itemId">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="${headingId}">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#${itemId}" aria-expanded="true" aria-controls="${itemId}">
${panelTitle}
</a>
</h4>
</div>
<div id="${itemId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="${headingId}">
<slot></slot>
</div>
</div>
</template>
Usage
<template>
<require from="accordian.html"></require>
<require from="accordian-item.html"></require>
<accordian>
<accordian-item panel-title="Panel 1 Title" heading-id="headingOne" item-id="collapseOne">
<accordian item 1 content>
</accordian-item>
<accordian-item panel-title="Panel 2 Title" heading-id="headingTwo" item-id="collapseTwo">
<accordian item 2 content>
</accordian-item>
</accordian>
</template>
If you need only one accordion, juste use one slotin your template:
<template>
<slot></slot>
</template>
Don't put slot property in your inside elements and the whole content will be inserted at the <slot> position.
<accordion>
<first-custom-element></first-custom-element>
<second-custom-element></second-custom-element>
<third-custom-element></third-custom-element>
...
</accordion>
I would like to view list of strings in default-label format of bootstrap with angular-js ng-repeat
Following is a code snippet,
<div class="row">
<div class="col-md-12">
<span ng-repeat="hobby in hobbies" class="label label-default col-md-2">{{hobby.name}}</span>
</div>
</div>
Output of above does not looks good. default label fills col-md-2 and also if list is big then it goes out of row div.
I would like to have output as following
How can I acheive following with default-label from bootstrap classes?
And I would like to use only classes/styles provided by bootstrap and NOT custom css.
You dont need the col-md-2 class on the span element:
<div class="row">
<div class="col-md-12">
<span ng-repeat="hobby in hobbies" class="label label-default">{{hobby.name}}</span>
</div>
</div>
You can read up more on the label variations on the bootstrap website
A note from the bootstrap website:
Have tons of labels? Rendering problems can arise when you have dozens
of inline labels within a narrow container, each containing its own
inline-block element (like an icon). The way around this is setting
display: inline-block;. For context and an example, see #13219.
UPDATE
If you are using the ng-repeat directive directly on a label label- you might end up with labels that do not have spacing between the labels. This is related to this question and this question
You might end up with labels looking like this:
I have created a jsfiddle to show the two results, you might need to update your HTML to fix the spacing issue.
You can use the following HTML to resolve the issue if you do not want to add a custom class with margin:
<div class="row">
<div class="col-sm-12">
<span ng-repeat="label in labels">
<span class="label label-default">{{label}}</span>
</span>
</div>
</div>
The result:
Answer by Tjaart van der Walt looks perfect.I also did work around and found following answer,
<div class="row">
<ul class="list-inline col-md-6">
<li ng-repeat="hobby in hobbies">
<span class="label label-default">{{hobby.name}}</span>
</li>
</ul>
</div>
So, I've got two product boxes placed next to each other:
<div class="container product-box" data-toggle="collapse" href=".container-name-desc-1#info-14005" aria-expanded="true">
<div class="product-side-content product-side-content-selected">
<div class="product-side-content-name">Name 1</div>
<div class="product-icon icon-arrow-down"></div>
<div class="container-name-desc-1 text-right collapse" id="info-14005" aria-expanded="false" style="height: 0px;">
<p>
Some very very long description of product
</p>
<a class="btn btn-success product-add" product-id="14005" product-price="10.45">CHOOSE</a>
</div>
</div>
</div>
and second
<div class="container product-box" data-toggle="collapse" href=".container-name-desc-2#info-14005" aria-expanded="true">
<div class="product-side-content product-side-content-selected">
<div class="product-side-content-name">Name 2</div>
<div class="product-icon icon-arrow-down"></div>
<div class="container-name-desc-2 text-right collapse" id="info-14005" aria-expanded="false" style="height: 0px;">
<p>
Some very very long description of product
</p>
<a class="btn btn-success product-add" product-id="14005" product-price="10.45">CHOOSE</a>
</div>
</div>
</div>
As you can see in code above, there are two classess for containers which have product description inside paragraph tag:
first is container-name-desc-1 and second container-name-desc-2 and both container has same id info-14005.
Pay attention to href attributes in the main container.
When I click on first product box arrow icon to expand/collapse, to show the product description, it works normally, but when I'm clicking on second product box arrow icon, the first product box description container expands/collapses again.
This is how it looks:
I think it has to do with same id name, so info-14005, but classess are different.
Does this mean, that browser pays attention to CSS specificity values when user specifies the href destination to some element's class/id inside, whether it's linking to child of same container or element of some other container?
In my example hrefs for both product boxes are linked to same id but different classess, so in theory clicking on one product box's arrow should expand/collapse only this particular box description container, right?
Or is this have something to do with the fact that IDs have higher specificity than classess, and last value of every href is id #info-14005, so browser somehow decides to collapse/expand only the first element which has this id assigned to itself?
I don't understand it, if anybody could answer the question?
I have the following html document
<div class="books">
<div class="book">
<div>
there are many deep nested elements here, somewhere there will be one span with some text e.g. 'mybooktext' within these
<div>
<div>
<div>
<span>mybooktext</span>
</div>
</div>
</div>
</div>
<div>
there are also many nested elements here, somewhere there will be a link with a class called 'mylinkclass' within these. (this is the element i want to find)
<div>
<div>
<a class="mylinkclass">Bla</a>
</div>
</div>
</div>
</div>
<div class="book">
<div>
there are many deep nested elements here, somewhere there will be one span with some text e.g. 'mybooktext' within these
<div>
<span>mybooktext</span>
</div>
<div>
</div>
<div>
there are also many nested elements here, somewhere there will be a link with a class called 'mylinkclass' within these. (this is the element i want to find)
<div>
<a class="mylinkclass">Bla</a>
</div>
</div>
</div>
<div class="book">
same as above
</div>
</div>
I want to find the link element (link has class called 'mylinkclass') within the book element, this will be based on the text of the span within the same book element.
So it would be something like:
-Find span with text 'mybooktext'
-Navigate up Book div
-Find link with class 'mylinkclass' within book div
This should be done using one xpath statement
In my few this is was your are looking for:
" //span[contains(text(),'mybooktext')]
/ancestor::div[#class='book']
//a[#class='mylinkclass']"
//span[contains(text(),'mybooktext')] Find san containing "mybooktext"
/ancestor::div[#class='book'] Navigate up Book div (in any deeps)
//a[#class='mylinkclass'] Find link with class 'mylinkclass' within book div (in any deeps)
Update:
change first condition to
//span[(text() ='mybooktext'] if mybooktext is the only text in span