CODEWITHSUNDEEP
javascripthtmlcss
Nevershow2016
Nevershow2016

Reputation: 570

How to create a break between divs

Hi guys so i have a php function in my database which returns search results back from my database. Everything is working apart from the face i want to get it so that there is a break between each list. So for example each element which is returned should be inside its own border so a square. At the moment all the elements are in one big square, rather than its own square.

Code: 

            $('#addButton').on('click', function( event ) {
                var searchedValue = $('#search_term').val(); 
                var divHolder = $('.selectedStuff'); 
                divHolder.append(searchedValue + '<br>').css({
                    'background-color': 'yellow',
                    'width': '700px',
                    'margin-top': '50px',
                    'border-style': 'solid',
                    'border-color': '#0000ff'
               });

As you can see i have applied the border, however its doing it around everything rather than each element which is returned , so it should look like :

 -----------------------------------------------
|                                              |
|       Elment 1                               |
 -----------------------------------------------

 -----------------------------------------------
|                                              |
|       Elment 2                               |
 -----------------------------------------------

Thanks for the help

Upvotes: 0

Views: 42

Answers (1)

jfriend00
jfriend00

Reputation: 707436

I don't know exactly what formatting you are trying to achieve, but I'd suggest wrapping your searchedValue into its own div so you can format it separately by changing this:

            divHolder.append(searchedValue + '<br>').css({
                'background-color': 'yellow',
                'width': '700px',
                'margin-top': '50px',
                'border-style': 'solid',
                'border-color': '#0000ff'
           });

to this:

            $("<div>" + searchedValue + "</div>").css({
                'background-color': 'yellow',
                'width': '700px',
                'margin-top': '50px',
                'border-style': 'solid',
                'border-color': '#0000ff'
           }).appendTo(divHolder);

Upvotes: 1

Related Questions