4

I am trying to get a accordion menu for a mobile site. Its looks like the following .

enter image description here

Below is the css which I am using the for the menu.

.accordion-anchor {
    float: left;
    width: 50%;
    padding: 0.8em;
    border-left: 1px solid #258ecd;
    color: white;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    display: block;
    padding: 0 15px;
    transition: all 0.15s;
    border-bottom: 1px solid #808080;
    background: black;
}
<a href="" ng-click="elementClicked($event)" id="Rough_Plumbing__Electrical_PS" class="accordion-anchor ng-binding"><input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Rough Plumbing &amp; Electrical</a>

As you can see with the borders they are broken when the text is not aligned on both the sides. I tried the auto wrap for text and it didnt seem to fix this.

After changing the css as per the suggestion this is how it looks like now.

enter image description here

SNT
  • 1,283
  • 3
  • 32
  • 78

1 Answers1

6

The problem with your code is that your float elements have un even height and hence each row will take the maximum height of its any coloumn so the next row will always appear after some space. To know more about the issue Read this answer

So to solve your problem i am assuming that you always need 2 coloumns so we will divide the screen into two vertical space and then equally distribute these checkboxes in each of the vertical spaces

You can check this Demo Link

code Snippet

.menu {
  display: inline-block;
  width: 100%;
  background: #000;
}
.pull-left {
  float: left;
  width: 50%;
}
.accordion-anchor {
  border-left: 1px solid #258ecd;
  color: white;
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  display: block;
  padding: 0 15px;
  padding-left: 20px;
  transition: all 0.15s;
  border-bottom: 1px solid #808080;
  background: black;
}
.accordion-anchor .accordion-checkbox {
  position: absolute;
  margin-left: -15px;
}
<div class='menu'>
  <div class='pull-left'>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Milkwork</a>

    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Outdoor power equipment</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Rough Plumbing &amp; Electrical</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Paint HomeFashions,Storage &amp; Cleaning</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Seasonal Living</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Lumber and Building Materials</a>
  </div>
  <div class='pull-left'>

    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Fashion Fixtures</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Tools and Hardware</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Flooring</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Kitchens and Applicaes</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Lawn &amp; Garden</a>


  </div>
</div>
Community
  • 1
  • 1
Atal Kishore
  • 4,480
  • 3
  • 18
  • 27
  • How did you come to the conclusion that the position of the checkbox was causing the issue? – Abhirath Mahipal Sep 13 '16 at 10:09
  • 2
    see the image there you can see that there is space beetween checkbox and border but in the code checkbox is the first child of the a tag and the remaining text is part of a tag and has nothing to do with checkbox as they were written after the checkbox so they will appear after checkbox ; once checkbox was given position absolute text was no more dependent on any other element. – Atal Kishore Sep 13 '16 at 11:54
  • @AtalKishore I have attached the image after changing the css as per your suggestion. – SNT Sep 13 '16 at 15:13
  • @SNT please check the updated answer and Jsfiddle link. i guess this will solve you problem an also read this answer http://stackoverflow.com/a/32109114/5614538 to know what is causing this issue – Atal Kishore Sep 14 '16 at 06:01
  • This would work fine when you already have a list of elements inside the div and you could arrange it . In my case I would be getting the elements in as a json string which would be then used in the accordion menu. – SNT Sep 15 '16 at 16:39
  • even then you will have no problem if u are using angular ; when are looping through all the elemnts just use toogle flag to position the element in two boxes for example if you have a elements in list then `var toogle=false; for(var i=0;i< list.length;i++){ if(toogle){//place the code in 1st column }else {//place the code in 2nd column } toogle=!toogle}` use similar logic in angular using *ngfor or something – Atal Kishore Sep 16 '16 at 04:37