Autocomplete output display issue
There is autocomplete control on the modal window which displays 2 columns in output as per categories like country, industry, party etc.
1) How to provide space between 2 output columns?
2) How to give indentation between category header and its column values?
***Edited by Moderator Marissa to update platform capability tags****
Vodafone
IN
Hello Ramkrishna,
Can you share the screenshot of the behavior to know, exactly how it looks like.
Have you tried increasing the modal window size?
Pegasystems Inc.
US
Hello Ram,
1) Can you please use Developer's tools to find out how the width has been set. Is it coming from application skin? If it is, use modify the "width" attribute as per your requirement. If not, check the class on which this width attribute has been defined. Then apply custom CSS on this and increase the width accordingly.
2)To Ident, you may need to use CSS attribute "text-indent". I think you can apply this is Application skin. Please check and let me know. Example of "text-indent" has been shared below.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-indent
Let me know in case you face issue implementing this.
Regards,
Rachit
Morgan Stanley
US
Hi Rachit,
Text-Indent is not working in this case through application skin or control. On using developer tools the following tag is highlighted where certain class is mentioned as "autocomplete_input ac_newrequestcp"-
<input name="$PTmpDMTRequest$pCounterpartyname" class="autocomplete_input ac_newrequestcp" id="Counterpartyname" type="text" value="usa" data-ctl='["AutoCompleteAG"]' data-test-id="20180703185111043421791" data-change='[["postValue",[":event"]]]' data-attributes='[ "EXPANDEDSubSectionDisplayNewReqScreen12_Counterpartyname",3,0,{"SearchVal" : ".Counterpartyname"},"TmpDMTRequest"]' data-change-lazy="false" autocapitalize="off" autocorrect="off" autocomplete="off">
How the column spacing can be applied in this case?
Pegasystems Inc.
US
You can apply text-indent on "autocomplete_input" then in the below manner.
<style>
.autocomplete_input{
text-indent: 30px;
}</style>
Pegasystems Inc.
US
You can try using margin, padding or width CSS attributes on the autocomplete field and check if the space between the fields increases.
Pegasystems Inc.
US
Hi, Based on the screenshot you provided I guess that the dropdown list values should be similar to the following in the dom:
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
.
.
.
</select>
This is what need to be styled for spacing between them. Since you have 2 columns like <option value="">Bank....BBB...</option> you have to write some javascript/jquery to manipulate what you want for spacing. Here is link with similar discussion and its jsfiddle sample:
https://stackoverflow.com/questions/17162219/html-multiple-column-drop-down-with-adjusted-columns
http://jsfiddle.net/upgradellc/ASR2K/2
Hope this helps!