Can someone please let me know why the elements are not aligned with the columns in the designer ? What causes this ?
The same view when used in an embedded container has scrollbar. Not sure why scrollbar is appearing as it's supposed to resize. I have configured 3 separate views based on the breakpoints of the column container.
Checking the silly stuff:
Yes
Is there something in your stylesheet or theme files ?
I can make it look weird with some margins:
Maybe there's some css somewhere that's messing with your components.
There are no such individual margins. I also don't understand why scrollbar is coming when I embed this view in another column container. Has anybody faced something like this ? It should auto-adjust based on the defined break points.
No idea. I tried the column container once but decided I'd rather just use flex and breakpoint containers.
Hello
I use column containers often.
The only reason I find for a horizontal scrollbar is that the size of the content is bigger than the actual size of the column. To fix this you should put the size of the content smaller.
On the Interface the design appears with scrollbars because it adjust to the size of the fixed interface size.
If I make the screen small enough so the content of that column is larger than the column itself then the scrollbar appears:
So the point is to change the size of the content or adjust the number of columns you let for that content on a given Breakpoint
There is no other reason I can find for horizontal scrollbars. Column containers work fine.
When you Launch Perspective you can see the real design on the browser for different screen sizes.
On the development interface you just seeing the same screen size all the time.
Cheers.
Hello,
This is correct. But I'm seeing the same scrollbar on the browser which should not appear unless I'm missing something.
You seeing the scrollbar because the size of the content is larger than the avaliable space.
I recomend you to start over with this menu and don´t use any css until works fine. It´s hard to tell from a screenshot what is the problem.
If you start over item by item you will find in what point the scrollbar appears so you know where is the error.
I usually use Flex Containers inside Column Containers fro complex menus and it work fine.
It takes time to make everithing look fine without scrollbars for different breakpoints.
Cheers.
Ok. So I think I have narrowed down the issue. It seems negative margins are getting added for .row css class which are used in column containers. I tried to find where these are defined but couldn't find it. I also tried to override it using the advanced stylesheet feature but it's not taking effect. Does anybody know where this could be defined as .row looks like a default css class for column container ?
Edit:
This is resolved. Was able to override the default css using !important.
I don´t know where those negative margins come from. I´m using column containers all day long and haven´t had this issue.
Good to know you found a work around for your problem.
The fact that the class is defined by ignition doesn't mean the styles applied to it are built-in. You can apply custom styles to built-in classes.
I just checked and there are no margins configured on the column container's rows by default in 8.1.43. I can check other versions, but I doubt I'll find a difference.
Check your stylesheet again and see if there are rules modifying .row.
Also check perspective style classes in case there's css injection done in one of them.
style.css is only used in one place: the advanced stylescheet
check this file, @Lahaul_Seth
Agreed as I have not seen this in other projects. I will see if I can find out where it's coming from.
Was editing the post maybe you didnt see, pinging again:)
@victordcq Yes, I used this to override the negative margins. I'm yet to find the source of the negative margins.
why is that greyed out, do you have a master project? Check this file in there
Yes, I couldn't find the negative margins there as well.
can you find any other sources that are named this way?
show what it shows in sources if you click on this style.css
@victordcq No, I think this is coming from sepasoft which is installed in the master project.
The negative margins are there in the bootstrap css being used by sepasoft.
In fact, just above I can see that some code is commented out so that they don't cause issues in the designer.
