59
Views
15
Comments
Dynamically setting width of a container
Question

Some background: 

I am trying to replicate the input_Autocomplete functionality in Reactive Web. 

The closest widget in Reactive web currently is the "Dropdown Search" widget. This widget does not effectively replicate the input_Autocomplete as the way this works requires fetching all of the data for the list, which when using large lists makes the entire form performance degrade.


Through research and suggestions from previous posts i have tried a few of the forge components which havent really resulted in the required functionality. 


Therefore I am looking to create my own component. This will be made of an input widget which when typed in will display a list of results which have been filtered. This functionality I have made work, however its the styling of the list that is not working. Like the "Dropdown Search" widget, I would like the displayed list to have the same width as the parent Input widget. 


Here is what I have set up so far: 

This is the input widget and the list displayed (grey to make it easier to see width) As you can see I have been able to get the width of the input and have updated the label expression with this.

This is how it is set up in the widget tree: 

with the CSS which controls it. "listParent" container has "listParent" Class and "ListChildContainer" has "listChild" class. 



This is the action which is called when user enters text into the input:


The first JS will get the width of element JobInput.id and will update the label and display correctly the width of 542. 

This is the JS to attempt to set the width of the listChildContainer.id


I have seen by using alerts that the listWidth var is being populated with the correct value. However it appears that using document.getElementById($parameters.ElementId).style.width it does not set it to this value. This is the case either with the code above or with document.getElementById($parameters.ElementId).style.width = listWidth + "px";


Wonder if anyone can help set the width of the list to be the same as the input widget?

Thanks

Chris


Rank: #170

Hi Christopher Kennedy,

Is the list child container inside the same div that your input?

If this is the case, did you try to set the list child width to 100% or one of the options that would make it fill the content like:


Unfortunately updating the style sheet, "listParent" or "listChild" and using the width: fit-content or -webkit-fill-available did not work. 

It is frustrating because using JS I can get the width of the parent, it just wont allow me to update the child with that same width. 

mvp_badge
MVP
Rank: #89

Hi Christopher,

I have tried to replicate the mentioned use-case in a sample app - Reactive_AutoCompleteDemo

Please refer the attached .oml file

Hope this helps you in some way :)


Kind regards,

Benjith Sam

ReactiveAutocompleteDemo.oml

Hello Benjith, 


Really appreciate you looking into this. Just tested out your .oml and while it is a good solution to the problem, it isnt quite what im looking for. 


The list that is created will push the rest of the form down to accomodate it. Which is why I have went down the route of an absolute positioned list, that will sit over the form below, however like this example, i would like the list to be the same width as the parent input. 


Thanks

Chris

Rank: #329

Hi Christopher,

Add width 100% to listchildContainer and to listchild


Hope this helps


Thanks

AD

Hello AD, 


I have not done exactly as you asked, however, The listParent Container and all the child elements/containers are set to width = fill in the styles editor.

I did however add the "width:100%;" to the listChild class.



I have noticed some weird behaviour. When first looking at the screen it appears that the list is not displayed at all, On inspection it seems that the "listChildContainer" has been made into a span and then has the class assigned below: 


I have then removed the container name in properties editor and this seems to work now as expected:



Thanks for your help. I shall do some more testing. 

Chris

Rank: #329

Hi Cristopher,

Could you please share your oml.So that i can look what issue your facing.

Thanks

AD

attached is the OML. 


Ive had to change it slightly to use the OutSystems sample data. but its essentially the same as above.


if I name either of the highlighted containers then the list does not appear as desired.


Chris

TestJob.oml

Rank: #329

Hi Chris,

After publishing OML auto complete is not working  for me. Please let me know if some thing is missed from your end. Screenshot attached


Thanks

 AD

screen1.PNG

Rank: #329

Hi Chris,

It working fine now please check it is not generating span now.

I had done some css changes.

please see the attached OML. and screenshot



Thanks

AD

TestJob.oml

Rank: #329

Hi Chris,

No nothing like that i had added name to the container it is working fine its fixed with css only .

we need to type the exact matching words which matches the result.

for e.g in your OML if we type: Ande it will show the autocomplete list.

but if you type Ando it will display the list for And and hide so your list is filtering after keypress of 4th letter.

please see the attached OML with name on container. and below are the screenshots


So it not related to give the class name to container or not

Thanks

AD


TestJob.oml

Thank you to AD and Benjith for your support with this.

I have a very small additional issue with some styling I just cant figure out.

I want to shade the hovered over option, very similarto how the dropdown search widget looks.

I created a listContainer class:

.listContainer :hover {
    background-color: #f3f6f8;
}

Which when used on the correct container will highlight the hovered over option.

However I have this issue with the border radius on the entire list. the highlighted option seems to be "over" the list container:



I have tried to play about with z-index of the container with the background-color set but I cant seem to get it to work.


Any suggestions?

Chris

TestJob.oml