Question: How can I replace the icon for "More" information when Watchlist or Editable Watchlist are in responsive mode?


Answer:  The following steps apply to other QMod components as well.


Steps to replace the expand + icon with an arrow icon, in the Watchlist and Editable Watchlist tools

1) Wrap your QMod tool in a DIV with the class "qm-container".

Example:

<div class="qm-container">
	<div data-qmod-tool="usereditablewatchlist" data-qmod-params="" class="qtool"></div>
</div>

2) Add the following CSS to your page...

.qm-container .qmod-watchlist table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before, .qm-container .qmod-usereditablewatchlist table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before
{
    background-color: #eee;
    content: "<";
    -ms-transform: rotate(90deg) scale(1,1.5);
    -webkit-transform: rotate(90deg) scale(1,1.5);
    transform: rotate(90deg) scale(1,1.5);
 }
.qm-container .qmod-watchlist table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before, .qm-container .qmod-usereditablewatchlist table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before  {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: none;
    color: #333;
    width: 13px;
    font-size: 10px;
    content: ">";
    -ms-transform: rotate(90deg) scale(1,1.5);
    -webkit-transform: rotate(90deg) scale(1,1.5);
    transform: rotate(90deg) scale(1,1.5);    
    font-weight: 700;
    height: 13px;
    line-height: 13px;
    text-align: center;
    vertical-align: middle;
    text-indent: 0px;
    border: none;
    padding: 1px;
}