Hi, sorry if it’ a silly question, but how do i add borders and backgroud colour on grid?
also is it possible to add list inside a column or row without the size expanded and the list scrollable ?
.col{
background: gray;
border: think solid black;
}
Not sure what you mean by the second part. Can you explain a bit more?
1 Like
lets say i have a list of 20 or more items and put it inside a column. The size of the column will expand depends on the number of the items i have, right ?. What i want is the size of the column stay the same and i just need to scroll inside the column to view all the items.
sorry if it’s hard to understand, English is not my 1st language.
Hmm, I think you are confused a bit. For items, you don’t need to put them in a column.
See this example
For grids, the two main elements are rows and columns
no, i’m actually aware of that. so in my app, i have 2 columns, the first one contains items. when i click one of the item, a picture will appear on the second column. the problem is if there’re are too many items the column will expand and i have to scroll the whole page. i just want to scroll inside the column.
like in this picture you can scroll inside a column
Thank you very much Mike !!! that is what i’ve been looking for.
Hi Mike,
On similar issue, please help me as I’m not able to make a grid layout with button on 4x3 grid where button text display data from a “key” of a json object as follows:
Need your help placing button on ionic grid 4x3 for json object with key/value pairs as follows:
I have a feed (jsonArray, holding json objects) from a REST services as follows:
$jsonArray =[{data1},{data2},{data3},…]
where, json object “data1” holds 12 key/value pairs
data1 ={ “key1”:“Yes”, “key2”: “No”, “key3”: “Yes”, “key4”: “No”, “AnyKey11”: “Yes”, “AnyKey22”: “No”, “Anykey33”: “Yes”, “AnyKey44”: “No”, “myKey11”: “Yes”, “myKey22”: “No”, “myKey33”: “Yes”, “myKey44”: “No” }
please note that json object holding key and value where key is varying, but the values will always be either be “Yes” or “No”
I would like to place 12 buttons for the jsonObject “data1” (has 12 key/value pairs)on an ionic grid 4x3( four rows and 3 coloumn).
Button text should reflect the “Key’s”, whereas button color shall be blue for when its value is “Yes” and color red for its value is “No”.
Thus 1st button shall be a blue colored button with text as "key1"
2nd button shall be a red colored button with text as “key2”
… … … …
… … … …
… … … …
12th button shall be a red colored button with text as “myKey44”
Please help me fixing my HTML as follows
<span ng-if="value=='Yes'" >
<button id={{$index}} class="button button-royal" >{{key}}</button>
</span>
<span ng-if="value=='No'" >
<button id={{$index+}} class="button button-assertive" >{{key}}</button>
</span>
<span ng-if="value=='Yes'" >
<button id={{$index+1}} class="button button-royal" >{{key[$index+1]}}</button>
</span>
<span ng-if="value=='No'" >
<button id={{$index+1}} class="button button-assertive" >{{key[$index+1]}}</button>
</span>
<span ng-if="value=='Yes'" >
<button id={{$index+2}} class="button button-royal" >{{key[$index+2]}}</button>
</span>
<span ng-if="value=='No'" >
<button id={{$index+2}} class="button button-assertive" >{{key[$index+2]}}</button>
</span>
<span ng-if="value=='Yes'" >
<button id={{$index+3}} class="button button-royal" >{{key[$index+3]}}</button>
</span>
<span ng-if="value=='No'" >
<button id={{$index+3}} class="button button-assertive" >{{key[$index+3]}}</button>
</span>
</div>
</div>
</div>
Just found out you can set the number of grid-columns by sass in the theme/variables.css directly underneath the colours sass variable.
$grid-columns: 7 !default;
Interestingly rows are automatic and it bloody works. You just need to make sure your data has the right rows and columns. I’m doing weekly display, regardless of how many days in the array it always breaks it to 7 columns and auto moves to the next row. If that makes sense.
Hi Mike, thanks for this. It works like a charm, but if I want to change colours depending on the data how can I do that?
Thank you