Page 1 of 2

Grid left to right

Posted: Fri May 16, 2014 4:51 am
by deveu

I have content in grid cell and i have looping vertically/row
I want to display this horizontally/column

let me know the way

Image

this is vertically by grid
i want to display horrizontally


Grid left to right

Posted: Fri May 16, 2014 5:48 am
by Kateryna Grynko

Hi,

How do you fill the grid with content, using a service?


Grid left to right

Posted: Fri May 16, 2014 5:51 am
by deveu

yes service is easy right?
if not by service then how?


Grid left to right

Posted: Fri May 16, 2014 6:41 am
by deveu

hi,let me know if there is a way to do easily


Grid left to right

Posted: Fri May 16, 2014 9:02 am
by Kateryna Grynko

Hi,

Add this CSS:pre[name=mobilegridName]{
float:left;
width:50px;
}/pre


Grid left to right

Posted: Fri May 16, 2014 9:18 am
by deveu

i tested this copying separately into another html file setting css
this is ok
but when i am trying to app that is not working
my css is in css/custom.css file


Grid left to right

Posted: Fri May 16, 2014 10:29 am
by deveu

was another width 100% with that tag
I think need important


Grid left to right

Posted: Fri May 16, 2014 11:01 am
by Kateryna Grynko

Should work without "!important", but you can try.


Grid left to right

Posted: Fri May 16, 2014 11:56 am
by deveu

I want my grid horizontally and that is ok
but breaking after few item
I want everything in a line by scroller

i am using this code
[name="reward_grid"] {
float:left;
width:250px !important;
}
.Reward_reward_grid{
border:2px solid #FFFFFF;
border-radius:25px;
}

[name="mobilecontainer"] {
overflow:scroll;
}

.Reward_reward_grid_wrapper
{
overflow:scroll;
}

Image


Grid left to right

Posted: Fri May 16, 2014 2:19 pm
by Kateryna Grynko

Hi,

1) Add HTML component (named htmlName) and set property Type=div
2) Drag there your Grid component (named mobilegridName)
3) On service Complete event run:prevar width = 0;
$("[name=mobilegridName]").each(function(){
width += parseInt($(this).width());
});/pre
4) Add custom CSS:preApperyio("mobilegridName").parent().css("width", width);
[name=htmlName]{
height:150px!important;
overflow-x:hidden;
overflow-y:scroll;
width:100%!important;
}
[name=mobilegridName]{
float:left;
width:50px!important;
}/pre