0

current view of page how i want it to be

I have made a system in a form where I can add and remove rows, but I just can't get the visual part of it right. I have added two pictures of how it is currently and how I wan't it to be. I used this

Flexbox: 4 items per row

post for help, but I didn't get much further.

Here is some of the relevant code: CSS:

.custom-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.custom-container-child {
  flex: 1 0 51%;
}

HTML:

<div class="form-group custom-container" id="urlInputs">
    <label asp-for="ItemOptionDTO.ItemPicturesWithOptionDTO" class="control-label custom-container-child"></label>
    <button id="addRow" class="button btn-primary custom-container-child" type="button">
        Add URL
    </button>

    <input asp-for="ItemOptionDTO.ItemPicturesWithOptionDTO" class="form-control custom-container-child"/>

</div>

JavaScript:

@section Scripts {

    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

    <script type="text/javascript">

        var counter = 0;

        $(function () {
            $('#addRow').click(function () {
                $('<input id="inputrow' + counter + '" class="form-control custom-container-child" id="ItemOptionDTO.ItemPicturesWithOptionDTO" name="ItemOptionDTO.ItemPicturesWithOptionDTO" type="text">'
                    + '<button id="input-row-button' + counter + '" type="button" class="btn btn-primary custom-container-child" onclick="removeRow(' + counter + ');">Delete</button>').appendTo('#urlInputs');
                counter++;
                return false;

            });
        });

        function removeRow(index) {
            if (counter > 0) {
                $('#inputrow' + index).remove();
                $('#input-row-button' + index).remove();
                counter--;
            }
            return false;
        }

    </script>
}
Soban
  • 436
  • 5
  • 13
Taavi Ansper
  • 143
  • 9

1 Answers1

0

Here try this. A key part is setting the appropriate widths as well as setting things to display: inline-block;. I also switched the order of your first input filed and the add url button in the HTML

https://jsfiddle.net/knd96Lmc/

John
  • 5,132
  • 1
  • 6
  • 17
  • Thank you for the quick reply :)) I was really frustated at this thing, thanks for helping with this. I changed it a little bit : set margins at 2px and then i had to lower the size to 48% instead of 50%. – Taavi Ansper Jun 06 '20 at 12:43