- This topic is empty.
- Posts
-
-
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.
-
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.
-
Is there a way to place a dividing line between fields in the QListForm?
-
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
-
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.
-
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.
-
This is for the editing and adding pages. Can you use a QList view there?
-
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.
-
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.
-
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.
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.
-
Awesome, thank you guys!
-
You must be logged in to reply to this topic.