Hi can I ask some help please, is it possible that my li’s will auto adjust the length if text is long ? or maybe it will go next line the text?
here is my pen
Thank you in advance.
Hi,
Here’s how the CodePen editor’s template is organized:
https://blog.codepen.io/documentation/preview-template/
In order to make the best of your CodePen, I want to mention that the code that’s suppposed to go into the editor’s HTML box is the {EDITOR HTML}, and the {EDITOR CSS} and the {EDITOR JS} in their boxes.
{EXTERNAL ...} resources that is used goes into the settings and loads with the template.
As your pen appears now, it’s confusing to decide what’s relevant for the issue when you have the whole web page in the editor’s HTML box.
If no one else beat me to it, I’ll check your pen again when I have more time. 
I can’t find this on css settings
//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
adn also this
https://code.jquery.com/ui/1.12.1/jquery-ui.js
I just leave it there.
and it’s not functioning anymore
Thanks
The URL should be complete:
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
and entered in the settings’ CSS menu:
adn also this
https://code.jquery.com/ui/1.12.1/jquery-ui.js
The JS is entered in the setting’s JS menu:
I tested the above and then deleted all HTML code that wasn’t between the body tags and the pen worked as it did before that.
Test move them to the settings and see… 
Now I’m out for a while, back later.
1 Like
You can allow the text to wrap by removing the white-space:nowrap from the relevant rule. The problem is that your list on the left and your list on the right are not joined in any way i.e. they are separate lists.
If the text on the right wraps to a new line then your questions on the left will not match up on a line by line basis.
I can’t see an easy way to allow text to wrap while at the same time matching the two columns on a line by line basis. At a guess I would say that you need the whole lot in one list only with the questions and answers as odd and even lines of html then you could style with flexbox to allow lines to wrap in pairs.
However, even though jquery sortable allows you to omit elements from being sorted it only drops the item at the specified point and that would mess up the odd and even rows as you would have two answers together. I believe you would probably want a drop and draggable approach where selections get swapped rather than re-ordered but would need a js expert to help with that.
I did start to look at it and get the rows working before they get swapped.
(Resize the screen to see the wrapping works ok.)
However once you drag an item it messes up the sequence of question and answer and I’m not sure how to resolve that. I guess once you dropped the item you would need to call a js script to reorder the list again so that the questions occupy the odd html line numbers.
Maybe the draggable and droppable js would be more suitable then you could just swap items each time?
1 Like
Thank you Paul ,
Looks good when it resize, but it mess up when dragging , hmmm what if we will just set max-width to li’s then if the text is long it will just sets to next line. ? I don’t know if this is a good idea.
Not really you can’t let anything wrap at all because the list on the left won’t align with each item which I guess is your objective.
The only simple thing for now is to hide the overflow and add an ellipsis text-overflow:ellipsis. Or perhaps allow two lines of text on each list just on case one wraps (set a minimum height equal to the size of two lines).
I’ll keep looking and see if there is something easier that can be done otherwise it looks like a trip to the jS forum
1 Like
Maybe you can work with something like this:
2 Likes
Wow thank you Paul, I will try this
Here’s a rough way to check the answers match.
4 Likes
Thank you so much Paul
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.