Hello
I have a dashboard keypad for my iphone but cannot work out how to centre the content and ensure that the width of the page is as per the iphone screen width.
This is the node:
<style>
button {
background-color: #232323;
color: white;
text-align: center;
font-size: 40px;
}
button:active{
background-color:#585858;
}
*:focus {
outline: none;
}
</style>
<center>
<br><br><br><br><br>
<table width="250px" height="400px">
<tr>
<td ng-click="send({payload: '1'})" ><button>1</button></td>
<td ng-click="send({payload: '2'})" ><button>2</button></td>
<td ng-click="send({payload: '3'})" ><button>3</button></td>
</tr>
<tr>
<td ng-click="send({payload: '4'})" ><button>4</button></td>
<td ng-click="send({payload: '5'})" ><button>5</button></td>
<td ng-click="send({payload: '6'})" ><button>6</button></td>
</tr>
<tr>
<td ng-click="send({payload: '7'})" ><button>7</button></td>
<td ng-click="send({payload: '8'})" ><button>8</button></td>
<td ng-click="send({payload: '9'})" ><button>9</button></td>
</tr>
<tr>
<td ng-click="send({payload: '*'})" ><button>*</button></td>
<td ng-click="send({payload: '0'})" ><button>0</button></td>
<td ng-click="send({payload: 'E'})" ><button>E</button></td>
</tr>
</table>
<table width="250px" height = "100px">
<tr>
<td>
<h2 style="color: #FFFFFF; font-size: 20px; text-align: center">
{{msg.pass}}
</h2>
</td>
</tr>
</table>
</center>
I also have some CSS in a style node:
#nr-dashboard .masonry-container ui-card-panel#AlarmKeypad_AlarmKeypad {
max-width: 100%;
overflow-x: hidden;
padding:0;
}
However, the keypad shows up like this on my phone:
How do I move the table over to the left so all buttons appear correctly? Sorry I am not sure how to paste the code without it actually showing up in the post lol
ADMIN EDIT: Use the </> button not the quote button
