Stump the Panel

SharePoint QA

Stump the Panel » Site Managers and Site Collection Managers

1. 

   jaxkookie
   Member

   I have seen many webparts that hide, disable fields/columns on a WSS intake. Is there a way to manage the display size of a lookup field? (height and width)

   Posted 5 months ago #
2. 

   jaxkookie
   Member

   The look up field with multiple select.

   Posted 5 months ago #
3. 

   AutoSponge
   Administrator

   How often do you need this functionality?

   Posted 5 months ago #
4. 

   jaxkookie
   Member

   it is n ot a feature that needs to be dynamic. I have found on many occasions the items of the multiple select lookup are too long to view. once i have the items added i can set this value to display for better viewing.

   Posted 4 months ago #
5. 

   AutoSponge
   Administrator

   If you've followed any of my JavaScript articles recently, you know I'm a big fan of jQuery. Here's a quick example of what you can do with it to fix those "little problems."

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function() {
   	$("[title='TestLookUp']").width("300px")
   });
   </script>

   Posted 4 months ago #
6. 

   jaxkookie
   Member

   this works great for just a lookup field or any text/choice field, but when the look up is set to multiple select it displays two list option fields, one to select and one to populate with selection. That is the part I am trying to resize or reorganize.

   when I view the page source it looks as if the possible values and selected values are nested in a div with a set height and width and overflow:scroll.

   Any ideas or help?

   Posted 4 months ago #
7. 

   AutoSponge
   Administrator

   Can you paste a sample of that HTML? Use the ` marks at the beginning and end so the server doesn't erase your code.

   Posted 4 months ago #
8. 

   jaxkookie
   Member

   I tried the code you posted above. When I viewed the page source I found that multiple select had 2 fields
   title="lookup possible values" and title="lookup selected values"

   I tried these and no success. looking at the page source I can see these select fields are nested between div's for the multiple select lookup field

   This is the page source:
   

   <TR>
   		<TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">
   		<nobr>lookup</nobr>
   	</H3></TD>
   		<TD valign="top" class="ms-formbody" width="400px">
   		<!-- FieldName="lookup"
   			 FieldInternalName="lookup"
   			 FieldType="SPFieldLookupMulti"
   		  -->
   			<span dir="none">
   		<input id="ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker" name="ctl00$m$g_a661a08d_6b25_4bd3_af5f_f84d4368977b$ctl00$ctl04$ctl05$ctl00$ctl00$ctl04$ctl00$ctl00$MultiLookupPicker" type="hidden" value></input><input id="ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_data" name="ctl00$m$g_a661a08d_6b25_4bd3_af5f_f84d4368977b$ctl00$ctl04$ctl05$ctl00$ctl00$ctl04$ctl00$ctl00$MultiLookupPicker$data" type="hidden" value="Values Removed for space"></input><input id="ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_initial" name="ctl00$m$g_a661a08d_6b25_4bd3_af5f_f84d4368977b$ctl00$ctl04$ctl05$ctl00$ctl00$ctl04$ctl00$ctl00$MultiLookupPicker$initial" type="hidden" value=""></input>
   		<table class="ms-long" cellpadding="0" cellspacing="0" border="0">
   			<tr>
   				<td class="ms-input">
   					<div style='width:143px;height:125px;overflow:scroll'><select name="ctl00$m$g_a661a08d_6b25_4bd3_af5f_f84d4368977b$ctl00$ctl04$ctl05$ctl00$ctl00$ctl04$ctl00$ctl00$SelectCandidate" id="ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_SelectCandidate" multiple="multiple" title="lookup possible values" onchange="GipSelectCandidateItems(ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" ondblclick="GipAddSelectedItems(ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onKeyDown="GipHandleHScroll(event)">
   				</select></div>
   				</td>
   				<td style="padding-left:10px">
   				<td align="center" valign="middle" class="ms-input"><button id="ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_AddButton" class="ms-buttonheightwidth" onclick="GipAddSelectedItems(ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false"> Add > </button><br />
   					<br /><button id="ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_RemoveButton" class="ms-buttonheightwidth" onclick="GipRemoveSelectedItems(ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false"> < Remove </button>
   				</td>
   				<td style="padding-left:10px">
   				<td class="ms-input">
   					<div style='width:143px;height:125px;overflow:scroll'><select name="ctl00$m$g_a661a08d_6b25_4bd3_af5f_f84d4368977b$ctl00$ctl04$ctl05$ctl00$ctl00$ctl04$ctl00$ctl00$SelectResult" id="ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_SelectResult" multiple="multiple" title="lookup selected values" onchange="GipSelectResultItems(ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" ondblclick="GipRemoveSelectedItems(ctl00_m_g_a661a08d_6b25_4bd3_af5f_f84d4368977b_ctl00_ctl04_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onKeyDown="GipHandleHScroll(event)">
   				</select></div>
   				</td>
   			</tr>
   		</table>
   	</span>
   
   		</TD>
   	</TR>

   Posted 4 months ago #
9. 

   AutoSponge
   Administrator

   Try this. It changes one character in the "selector":

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(function() {
   	$("[title^='lookup']").width("300px")
   });
   </script>

   Remember to change the title='' to your title name. The ^ before the = means "starts with" so you can get both 'lookup possible...' and 'lookup selected...' with the selector.

   Posted 4 months ago #
10. 

    jaxkookie
    Member

    I really appreciate your help on this, but it is still unsuccessful. The issue is not with resizing the field because I was able to see the size of that change. What is not changing is the surrounding scrolling area. I think because the div scroll is set to overflow with a specified height and width. that area doesn't change. Visually at first glance it does not appear to resize. I am trying to remove the scroll bars and resize the div area. This is were I am failing. Your script resizes the fields but the defined div area still cuts it off from view.

    Posted 4 months ago #
11. 

    AutoSponge
    Administrator

    I see (in the code) what you're talking about.

    In jQuery, we can target the parent node (the div in this case) by using .parent() [http://docs.jquery.com/Traversing/parent#expr]; then sending some more css instructions. I don't have your page to test with but see how far you get with this:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    	$("[title^='lookup']").width("300px")
                                  .parent()
                                  .css({width:'300px',height:'300px',overflow:'hidden'});
    });
    </script>

    Set those height, width and overflow to whatever you want.

    Posted 4 months ago #
12. 

    jaxkookie
    Member

    BINGO! you are da man! That was exactly what I was looking for. Thank you for all your time and effort.

    I have a related question. I do not need you post the answer if it can be done. I would like to try and figure it out. With this field, of course now that it is resized it takes up much horizontal real estate. can this field be re position top to bottom instead of left to right?

    Posted 4 months ago #
13. 

    AutoSponge
    Administrator

    Yes. There are several ways to move content. CSS positioning is probably the easiest/least intrusive.

    Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.