CODEWITHSUNDEEP
htmlcssangularjsresponsive-design
Hansanho
Hansanho

Reputation: 293

Angular ng-click not listening after making table responsive with css

i got an font-awesome icon in my table cells. If i click on it ng-click is listening and is calling my function, but if my screen is smaller than 900 px the ng-click isnt listening anymore.

This is my CSS to make the table responsive:

@media 
only screen and (max-width: 900px),
(min-device-width: 768px) and (max-device-width: 1024px)  {



/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}
/* Force table to not be like tables anymore */
#tblTextResult, thead , tbody ,th ,td ,tr{
        display: block; 
}

tr { border: 1px solid black; }

td { 
    /* Behave  like a "row" */
    border-bottom: 1px solid black; 
    position: relative;
    padding-left: 30% !important; 

}

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0px;
    left: 6px;
    width: 45%; 
    padding-right: 20px; 
    white-space: nowrap;
}

#tblTextResult i {
    display:tab;
}

/*
Label the data
*/
#tblTextResult td:nth-of-type(1):before { content: "Text"; }
#tblTextResult td:nth-of-type(2):before { content: "Text_ID"; }
#tblTextResult td:nth-of-type(3):before { content: "Description"; }
#tblTextResult td:nth-of-type(4):before { content: "Meaning_ID"; }
#tblTextResult td:nth-of-type(5):before { content: "Language"; }
}

The table looks fine, but my ng-click of my tag ({text.meaning_id}) isnt working anymore. This is my html :

 <div id="textResult" >
      <table id="tblTextResult" ts-wrapper>
        <thead>
            <tr>
                <th  class="tblTH"> <a href="#" ng-click="sortType = 'text';sortReverse = !sortReverse">
                Text 
                <span ng-show="sortType == 'text' && !sortReverse" class="fa fa-caret-down"></span> 
                <span ng-show="sortType == 'text' && sortReverse" class="fa fa-caret-up"></span> </a></th>

                <th  class="tblTH"> <a href="#" ng-click="sortType = 'text.id';sortReverse = !sortReverse">
                Text_ID 
                   <span ng-show="sortType == 'text.id'&& !sortReverse" class="fa fa-caret-down"></span>  
                   <span ng-show="sortType == 'text.id' && sortReverse" class="fa fa-caret-up"></span> </a></th>

                <th  class="tblTH"> <a href="#" ng-click="sortType = 'description';sortReverse = !sortReverse"> 
                Description 
                    <span ng-show="sortType == 'description'&& !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'description' && sortReverse" class="fa fa-caret-up"></span> </a> </th>
                <th  class="tblTH">  <a href="#" ng-click="sortType = 'text.meaning_id';sortReverse = !sortReverse">
                 Meaning_ID   
                   <span ng-show="sortType == 'text.meaning_id'&& !sortReverse" class="fa fa-caret-down"></span> 
                   <span ng-show="sortType == 'text.meaning_id' && sortReverse" class="fa fa-caret-up"></span></a>   </th>
                <th  class="tblTH"> <a href="#" ng-click="sortType = 'langName';sortReverse = !sortReverse"> 
                Language   
                  <span ng-show="sortType == 'langName''&& !sortReverse" class="fa fa-caret-down"></span>
                  <span ng-show="sortType == 'langName' && sortReverse" class="fa fa-caret-up"></span> </a>  </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="text in Texte | orderBy:sortType:sortReverse | filter:filterText" >
                <td>    {{text.text}}            </td>          
                <td >   {{text.id}}              </td>
                <td>    {{text.description}}     </td>
                <td ng-model="meaningID">   {{text.meaning_id}} <i name="btnSearch" click="getMeaningID()"ng-click="getMeaningID()"class="fa fa-search"></i></td>
                <td>    {{text.langName}}        </td>
            </tr>
         </tbody>        
    </table>
</div>

Can someone please tell me why my ng-click isnt working anymore after making this table responsive? I still can see that ng-click is assigned to the i tag in firebug! Thanks in regards for any help :)

Upvotes: 0

Views: 244

Answers (1)

Hansanho
Hansanho

Reputation: 293

My Solution is :

#tblTextResult td i{
    display:table;
}

After i set this display-property to table again the eventlistener is listening again :)

Upvotes: 0

Related Questions