Width of elements in a Materialize row not adjusting to accommodate dynamically inserted elements

[khpeek]

I'm trying to insert an element into a Materialize row using jQuery's .after() method, as described in this StackOverflow question: https://stackoverflow.com/questions/49990923/how-to-recompute-the-width-of-elements-in-a-materialize-row-after-dynamically.

The problem is that after I do this, the original elements within the col s12 div element still occupy 100% of the width so that one of them needs to move down to a new row in order to accommodate the newly inserted element.

Is there any way I can tell Materialize to 'recompute' the width of the elements, taking the newly inserted elements into account?

[alexwbaumann]

From the StackOverflow provided, I created a CodePen that is not loading the additional HTML via JavaScript. With this, you can see that the issue still exists. The Materialize CSS is handling the placement of the .btn and .file-path-wrapper next to each other. By adding the .clear-button-wrapper between those elements you are breaking the expected layout for the file input. Another way to think of this is that the file input will take up 100% of its parents width (in this case s12 which is 100% of the row). Adding another element into the mix that is not outlined in the docs is going to break the layout.

Based on the StackOverflow I have also added in two ways that I might correct the HTML structure if this were my project. Hope that is helpful.

[khpeek]

Hi Alex, thanks for looking at this. To summarize, you put the .btn and .file-path-wrapper in an s11 instead of an s12, and put the .clear-button-wrapper in an s1 after that. As shown in my own answer to the StackOverflow question, I achieved a similar effect by adding the class "right" to the .clear-button-wrapper element; this makes it float to the right and not take up more (or less) space than required.