Display Text and Button on same line in table cell from HTML Template for Angular Directive

Question

I currently have a Angular search function implemented here that allows a user to search for courses.

This utilizes a read-more directive that shows a preview of the description and keywords and allows users to toggle to see more of the text. I converted the see more hyperlink to a button, and either way the button or the text appear below the course description / keywords and I would like for this toggle to show up next to the words instead of on its own line.

<div [innerHTML]="currentText"> </div>
<button (click)="toggleView()" class="btn btn-dark btn-sm"> 
    <i [class.hidden]="hideToggle" [ngClass]="isCollapsed ? 'fa fa-plus': 'fa fa-minus'"> </i></button>

I've tried solutions such as wrapping them in divs and using display:inline

<div id="block_container">
    <div id="bloc1"> <div [innerHTML]="currentText"> </div> </div>
    <div id="bloc2">
     <button (click)="toggleView()" class="btn btn-dark btn-sm"> 
    <i [class.hidden]="hideToggle" [ngClass]="isCollapsed ? 'fa fa-plus': 'fa fa-minus'"> </i></button> </div>
</div>

and have tried display: inline-block, among others, but can't figure it out.

Is there an issue with it being inside a table cell or part of an Angular template? Any pointers would be appreciated! Thanks!

by the way why do you use `[innerHTML]` use `
{{ currentText}}
` — לבני מלכה, Jul 30 '18 at 06:38
use `display: inline-block` to `bloc1` and `bloc2` not to wrap div — לבני מלכה, Jul 30 '18 at 06:39
I just utilized the implementation as it was given, is it cleaner to use the string interpolation? — Matt, Jul 30 '18 at 06:39
`display:flex` sends the button toggle all the way to the top right of the cell, I'd like for it to show next to the end of the snippet preview. and `display: inline-block` doesn't seem to change anything? — Matt, Jul 30 '18 at 06:45

score 1 · Accepted Answer · answered Jul 30 '18 at 06:53

1

Do not use display:flex; to #block_container if you use inline to childs #bloc1, #bloc2.

#bloc1, #bloc2
{
    display:inline;
}

See code:https://stackblitz.com/edit/angular-course-filter-pipe-vpax2x?file=src/app/app.component.css

answered Jul 30 '18 at 06:53

לבני מלכה

15,925
2
23
47

tell me for more help! – לבני מלכה Jul 30 '18 at 06:54
I realized that I do need `

` instead of `
{{currentText}}
` in order to make the highlight pipe work. How would I adapt the solution in this case? Thanks! – Matt Jul 30 '18 at 18:27

score 0 · Answer 2 · answered Jul 30 '18 at 06:47

0

Try wrapping them inside the table with 1 row elements

<table>
   <tr>
      <td><div1>...</div></td>
      <td><div2>...</div></td>
   </tr>
</table>

answered Jul 30 '18 at 06:47

Vaibhav

1,481
13
17

Display Text and Button on same line in table cell from HTML Template for Angular Directive

2 Answers2