Loading...

Divider lines in QListForm

Divider lines in QListForm

Home Forums QuickApps Forum Divider lines in QListForm

  • This topic is empty.
Viewing 10 reply threads
  • Author
    Posts
    • #5128
      Anonymous
      Anonymous
      Participant

      Hi Anthony,

      In qListForm, the fields are aligned top-to-bottom with thin grey horizontal field separators by default. Could you be more specific as to how you would like the divider to appear? e.g. vertical or horizontal. Also please send us any image that helps to illustrate the desired layout and appearance.  Thanks.

    • #5129
      Anonymous
      Anonymous
      Participant

      Hi Anthony

      Have the dev team looking for a way to do this. It's not a native capability of our webparts but we may be able to get a workaround.

    • #3925
      Anonymous
      Anonymous
      Participant

      Is there a way to place a dividing line between fields in the QListForm?

    • #7184
      Anonymous
      Anonymous
      Participant

      Oh wow you didn't have to break out the developers, a simple yes/no would have sufficed. However, if you do want someone to offer design feedback to the developer, feel free to have them contact me

    • #7128
      Anonymous
      Anonymous
      Participant

      Basically I just need something to seperate items 1-5 from 6-10. I'm making a el list that has car 1, hotel 1, and then I need something to seperate into car 2 and hotel 2. This is more visual than anything but wondering if it would be possible.

    • #7133
      Anonymous
      Anonymous
      Participant

      From your example, it seems that you are looking for a way to separate a list of items using divider lines. I would advice to use qListView, since qListForm is mostly used to display or edit a single item at a time.

      In your el list example, using qListView, you could assign a column for Group By in Sharepoint list, and configure qListView to display the fields using Group By on the same column. In that way you get a nested structure with items with the same value for that field grouped together, which provides some form of visual separation, if not exactly a bold divider line.

    • #7134
      Anonymous
      Anonymous
      Participant

      This is for the editing and adding pages. Can you use a QList view there?

    • #7135
      Anonymous
      Anonymous
      Participant

      Actually, with a little work, you can do some neat things – within the constraints.  The closest I have come myself, as a non-CSS expert, is to take advantage of the capability to use HTML in the field label.

      So I have added some dummy columns to my list, and then included those on the form where I want the divider to be.  Then the dummy column's field label includes something akin to <HR>.  It can look pretty nice – HOWEVER – the divider only spans the field label side of the form; the right-hand column where the data shows doesn't have the divider.

      I signed back into this forum though to post some slightly related tricks that we have employed.  See my post which I hope will appear in a few minutes.

    • #7158
      Anonymous
      Anonymous
      Participant

      I should add that our resident UI expert *has* accomplished the full-width divider on the qListForm webpart using a content editor webpart and some CSS.  I will forward him a link to this page in case he wants to share.

    • #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

    • #7166
      Anonymous
      Anonymous
      Participant

      Awesome, thank you guys!

Viewing 10 reply threads

You must be logged in to reply to this topic.