Loading...

RE: Divider lines in QListForm

RE: Divider lines in QListForm

Home Forums QuickApps Forum Divider lines in QListForm RE: Divider lines in QListForm

#7160
Anonymous
Anonymous
Participant

It's pretty simple to implement… Just add an empty span tag with a class name (<span class="categoryheader"></span>) to the qListForm title display field where you want the divider line to appear as seen the in screen shot below.

qlist1.jpg

Add a content editor webpart to your qListForm page and paste this code in the webpart

<style type="text/css">
.red, .red td{

     border-bottom:4px solid black;

}

.green, .green td{
     background-color:yellow;
     border-bottom:4px solid green;
     border-top:4px solid green;
     color:red;
     font-size:16px;
     height:50px;
     line-height:24px;
     padding:4px;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
         $("span").each(function() {
             $(".categoryheader").parent().parent().parent().addClass("green");
            });

});
</script>

Of course you can change the CSS to suit your requirements. The javascript searches the page for any span tag with a class name of "categoryheader" and once it finds one, it jumps up 3 tags to find the <TR> tag and adds the new class name of "green" to the <TR> and you end up with a divider line that goes across both columns… like below.

qlist2.jpg