Long text and responsiveness of Angular UI accordion headers
So I'm playing around with angular Bootstrap directives and trying to implement an accordion control, with some information displayed on the right side of each header.
<accordion-heading>
some text here, on the left side of the header.
<div class="pull-right">
<span>1st info</span>
<span>2nd info</span>
<span>maybe 3rd?</span>
</div>
</accordion-heading>
here's a simplified plunkr: http://plnkr.co/edit/3y0Rq1?p=preview
this is clearly visible on medium and large screens, but on smaller ones, the information goes under the heading, and in some cases is crossed with the left text.
I'm pretty sure there is a css trick to make this script look correct, expanding the header borders on smaller screens, but can't figure it out.
Help me please?
source to share
You can do it this way, add a table with two columns in the head. The first column contains data = "some text here on the left side of the header". and the second column has data = "1st info 2nd info, maybe third?"
<table>
<tr>
<td>
some text here, on the left side of the header.
</td>
<td>
<div>
<span>1st info</span>
<span>2nd info</span>
<span>maybe 3rd?</span>
</div>
</td>
</tr>
</table>
I made changes to plunker . Now, when you make the window size small, the size of the accordion title increases accordingly. use float: left / right or pull-left / right to make further changes.
Hope it helps
source to share