0

Within a table, I have a reference tag and then an input field. I tried everything, but the input field is always moving below the reference tag (while a normal text field using span is properly aligned with the <a href> tag.

Here is an example:

<td *ngFor="let col of table.columns; let i=index [ngStyle]="col.style" [class]="col.styleClass"
    [style.display]="col.hidden ? 'none' : 'table-cell'"
    (click)="onRowClick($event)" >
    <a href="#" *ngIf="(i==table.expanderColumn)" class="ui-treetable-toggler fa fa-fw ui-c" [ngClass]="{'fa-caret-down':node.expanded,'fa-caret-right':!node.expanded}"
          [ngStyle]="{'margin-left':level*16 + 'px','visibility': isLeaf() ? 'hidden' : 'visible'}"
          (click)="toggle($event)"
          [title]="node.expanded ? labelCollapse : labelExpand">
    </a>
    <input type="text"  [(ngModel)]="row.data[column.fieldNameOrPath]">
</td>

In reality my code is slightly different and the input field is coming from a template, but this shouldn't be the issue I guess.

How can I get the input field right beside the tag?

Tot Zam
  • 8,406
  • 10
  • 51
  • 76
Michael H.
  • 471
  • 2
  • 9
  • 22

1 Answers1

0

Neither the anchor nor the input are block level elements by default so the wrapping is most likely caused by the CSS associated with the classes which are assigned to these elements. If you look at the snippet below, it's a stripped down version of what you have, showing that without the classes the bare elements behave as you want them to.

I would recommend using your dev tools to determine what CSS is causing the wrap issue you're experiencing and fix it there (there might a width or display property causing this). If you can't do that, then write some override CSS to correct it in your stylesheet. Lastly you could use an inline style as recommended in another anwser, but I would not recommend this approach. Inline styles are one-off fixes and create code which is difficult to maintain over time.

<table>
  <tr>
    <td>
        <a href="#">Anchor</a>
        <input type="text"/>
    </td>
  </tr>
</table>
Robert Wade
  • 4,918
  • 1
  • 16
  • 35