2016-08-23 6 views
0

Code innerhalb des <td> (von Element inspizieren):div in der Tabelle td in der rechten oberen Ecke?

<td colspan="6" class="google-visualization-orgchart-node google-visualization-orgchart-node-medium google-visualization-orgchart-nodesel"> 
<div class="col-md-8">Rian Priyanto </div> 
<div class="col-md-1">&nbsp;&nbsp;&nbsp;&nbsp;</div> 
<div class="col-md-3"><a href="#"><i class="fa fa-plus"></i></a></div> 
</td> 

echten Code:

<script type="text/javascript"> 

    google.charts.load('current', {packages:["orgchart"]}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('string', 'Parent'); 

    data.addRows([ 
     <?php 
     foreach ($query as $row) { 
      if($row->kode_group >= 1000){$row->kode_group = '';} 
      echo '[{v:\''.$row->kode_groups.'\',f:\'<div style="position: relative;width:100%;height:100%;"><div class="col-md-8">'.$row->name.' </div><div class="col-md-1">&nbsp;&nbsp;&nbsp;&nbsp;</div><div class="col-md-3" style="position: absolute !important;top: 0;right: 0px;"><a href="#"><i class="fa fa-plus"></i></a></div></div>\'},\''.$row->kode_group.'\'],'; 
     } 
     ?> 
    ]); 

    // Create the chart. 
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
    // Draw the chart, setting the allowHtml option to true for the tooltips. 
    chart.draw(data, {allowHtml:true}); 
    } 
</script> 

SS:

SS

In 1, wenn der Text eingewickelt, die <i class="fa fa-plus"></i> ist in der rechten oberen Seite von <td>, aber in 2 Wenn der Text nur 1 Zeile ist, ist es in der Mitte.

Wie wird die <i class="fa fa-plus"></i> in der rechten oberen Ecke angezeigt, unabhängig vom Inhalt?

Hinweis:

  • Die <td> von Google generiert wird ORGDIAGRAMM Javascript, so dass ich nicht wirklich wissen, wo der Code (Ich verstehe nicht, die js).
  • Ich kann wahrscheinlich nur den Inhalt innerhalb der <td> nicht die <td> selbst bearbeiten (so kann wahrscheinlich keine weitere <td> hinzufügen, aber Bearbeitung css ist immer noch in Ordnung).
  • Sie können die div frei anordnen. Alles, was ich will, ist die textalign: left + v. align: middle & die icon seine align: right + v. align: top
  • Im Fall sind Sie die Seite sehen möchten, hier ist die Position Stil td als relatives save page

Antwort

1

Bewerben und div Positioniere den Stil absolut mit oben rechts 0. Er wird immer oben rechts angezeigt.

<table> 
    <tr> 
     <td> 
     <div style="position: relative;width:100%;height:100%;"> 
      <div class="col-md-8"> 
      Rian Priyanto 
      </div> 
      <div class="col-md-1"> 
      &nbsp;&nbsp;&nbsp;&nbsp; 
      </div> 
      <div class="col-md-3" style= 
      "position: absolute !important;top: 0;right: 0px;"> 
      <a href="#">+<i class="fa fa-plus"></i></a> 
      </div> 
     </div> 
     </td> 
    </tr> 
    <tr></tr> 
    </table> 
+0

irgendwie tut dies nicht 'unabhängig von der content' valign top in td & Add-Klasse hinzufügen, http://i.stack.imgur.com /gwm7A.png –

+0

Wenn du td nicht bearbeiten kannst, dann füge Eltern-Div wie oben hinzu. –

+0

immer noch, http://i.stack.imgur.com/rTmvX.png –

0

versuchen auf diese Weise col-md-3 zu text-right

<td colspan="6" valign="top" class="google-visualization-orgchart-node google-visualization-orgchart-node-medium google-visualization-orgchart-nodesel"> 
<div class="col-md-8">Rian Priyanto </div> 
<div class="col-md-1">&nbsp;&nbsp;&nbsp;&nbsp;</div> 
<div class="col-md-3 text-right"><a href="#"><i class="fa fa-plus"></i></a></div> 
</td> 
+0

Ich kann die 'td' nicht bearbeiten, ich kann nur bearbeiten, was in' td' ist, zB: {mein Bearbeitungsbereich} ' –

+0

add css wie Tabelle tr td {vertical-align: top;} –

+0

' td {vertical-align: top;} 'wird auch den Text oben machen, ich möchte den Text in der Mitte, aber das Symbol oben –

Verwandte Themen