jquery - How to align icons and labels in an accordion using Twitter Bootstrap -

-

enter image description here

i using twitter bootstrap , having hard time aligning icons labels when inside accordion.

what have achieved far supplied below, wanted 3 icons on left equal spacing , label on right.

also, want change first icon (icon-chevron-down) (icon-chevron-up) when collapseone shown.

here demo html:

    <div class="accordion" id="accordion2">         <div class="accordion-group">             <div class="accordion-heading">           <table>               <tr>               <td>                  <div class="clearfix"></div>               </td>               <td>                  <label title="link ![enter image description here][2]1">link1</label>               </td>               <td>                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseone"><i class="icon-chevron-down"></i></a>               </td>               <td>                   <a href="#"><i class="icon-edit"></i></a>               </td>               <td>                 <a href="#"><i class="icon-trash"></i></a>               </td>              <tr>             </table>           </div>             <div id="collapseone" class="accordion-body collapse" style="height: 0px; ">               <div class="accordion-inner">                 link 1             </div>             </div>         </div>         <div class="accordion-group">             <div class="accordion-heading">           <table>               <tr>               <td>                  <div class="clearfix"></div>               </td>               <td>                  <label title="link 2">link2</label>               </td>               <td>                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseone"><i class="icon-chevron-down"></i></a>               </td>               <td>                   <a href="#"><i class="icon-edit"></i></a>               </td>               <td>                 <a href="#"><i class="icon-trash"></i></a>               </td>              <tr>             </table>           </div>             <div id="collapseone" class="accordion-body collapse" style="height: 0px; ">               <div class="accordion-inner">                 link 2             </div>             </div>         </div>         <div class="accordion-group">             <div class="accordion-heading">           <table>               <tr>               <td>                  <div class="clearfix"></div>               </td>               <td>                  <label title="link 3">link3</label>               </td>               <td>                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseone"><i class="icon-chevron-down"></i></a>               </td>               <td>                   <a href="#"><i class="icon-edit"></i></a>               </td>               <td>                 <a href="#"><i class="icon-trash"></i></a>               </td>              <tr>             </table>           </div>             <div id="collapseone" class="accordion-body collapse" style="height: 0px; ">               <div class="accordion-inner">                 link 1             </div>             </div>         </div>       </div>

the neat way use below : jsfiddle demo

<div class="accordion-heading">  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseone"><i class="icon-home"></i> heading <i class="icon-chevron-down"></i>   <i class="icon-edit"></i><i class="icon-trash"></i></a> </div>

to pull icons right(as per comment) can following :

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseone"><i class="icon-home"></i> heading<span class="pull-right"><i class=" icon-chevron-up"></i> <i class="icon-edit "></i><i class="icon-trash"></i></span></a>

as have mentioned in comment that, headings of variable length ,put span out of tag , see below:

 <div class="accordion-heading">       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"         href="#collapseone"><i class="icon-home"></i> headinghjhkjhjkhkjhkjhkjhkjhkjhkjhjkhkjhjkhkjhjkhjk</a>   <span class="ico-pull pull-right"><i class=" icon-chevron-up"></i>  <i class="icon-edit "></i><i class="icon-trash"></i>             </span>     </div>

than use following css :

.accordion-heading > { width:8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .accordion-heading > span { margin-right:20px; margin-top:-28px; }

Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more