When you look at all the companies there are three names in a row and the next three underneath and so on.
If you look at the companies beginning with B it is not the same.
It is true there is one line gap underneath each listing but I would like them to line up.
Example:
Barclays should be underneath Bank of Scotland (Policies starting HDA commencing 7 June 2015 onwards or renewing 10 July 2015 onwards.
It is the same on other letters. Example of S.
I need the companies to show as:
Company 1 Company 2 Company 3
Company 4 Company 5 Company 6
continued
continued further
I recall helping you set this up to be able to break up the list of results by first letter.
To do that involved bending if not-breaking how the Bootstrap grid system works, so that instead of a fixed number of items per row (e.g. 3 results per line in their own row) a row becomes all of the results for that letter, overflowing across multiple lines as required.
That is not how they are intended to work, but it was required for the solution of showing results broken down by first letter.
What you see is a side effect of that, where you have contents of differing heights, and because the grid system is based on CSS floats, if there is a tall item on the left, shorter items to the right can stack until they together they surpass the height of the item on the left so that the next item appears on the left again.
There are two options.
One is to replace the Bootstrap grid system with one based on flexbox, which would naturally account for this. You would replace the row and col-sm4 class names in the output of your View with other class names that you then define CSS rules for to set up the rows as flex containers and the col-sm4 items as flex-items.
There is a great introductory guide to flexbox here: hidden link
I can't do that for you but if you run into problems let me know and I will see if I can help.
The other is to try to trim the text to occupy no more than 2 lines and then set a min-height on all elements which will increase the spacing on everything but will prevent the float-related stacking.
Unfortunately, this is a side-effect of breaking up the View results by first letter...
He suggested that the rows are put in another row and then after every third company the program inserts a line.
Is this possible to do please? He was unable to see how to do this because Toolset uses differenty coding. e.g. ne probably means not equal
He couldn't find col-sm4 to make the other amendments you suggested.
Apart from that is there any other way to layout the results so that the companies display in alphabetical order please?
I don't think any amount of tinkering with the current set-up that uses Bootstrap CSS is going to get you the solution you want, because, as I described above, the solution to break up the results with a first letter heading obliges us to use the Boostrap CSS in a way that is not intended.
The only solution I see is to remove the Bootstrap classes in the markup for the output of this View (the .row and .col classes) and produce a custom solution based on flexbox.
I created a codepen to demo what is required: hidden link
You may need to tweak it but the principle is demonstrated there.
I might be misunderstanding this, but this is the way I see it:
I have to create divs manually for all companies (about 124 separate entries).
Therefore I assume the data is not pre-populated from the database.
Also looking at the coding and the layout I cannot see how these would link back to collect the required information from the database. I considered 'a href' but I cannot find individual links to point them to and I would have to create 124 lines which is about the number of entries in the database.
I created the codepen demo by way of illustration as to how you might replace the Bootstrap grid for this page.
I don't recall exactly how the output of your View looks, but the views shortcodes that output the post title will be wrapped in some kind of scaffolding markup, divs with classes of row and col-*.
My suggestion is that you replace the classnames and use CSS such as in my illustration.
So replace the row class with the class "flex-container" and the col-* class with the class "flex-item", and add the relevant part of the CSS using the custom CSS section of the Loop Output editor.
