last day (14 days later) » 

6:12 PM
0
A: Creating a group of vertical buttons - Ionic

Radu DascăluIf I understood everything right, you want position: fixed; on your div that contains all the icons. Try these styles on that div: position: fixed; top: 0; bottom: 0; left: 0;

 
Thank you for replying: I did the following as per your instruction. I got this result imgur.com/a/OAdty I'm attaching my code - for your reference. View Code - pastebin.com/jFcVd0dw CSS - pastebin.com/YNmfz9Eg Kindly help.
 
If .left_band is the main container of your left sidebar, you should add these css properties to that div.
Also place your sidebar div outside of your grid
 
The issue I'm facing is that - if I make height 100%, the last item (exit button) goes to bottom of scroll view. I want this whole div to be fixed while only right layout to be scrolled. Is it possible? If I set ion-content scroll="false" it becomes so for entire view. Please help me.
 
Don't make height 100%. Make it position: fixed; top: 0; bottom: 0;
Can I have a jsfiddle/codepen with your code, working example if possible.
 
Actually, I'm working in a team. They don't allow me full access. Please, if possible, can you guide me on some chat? I won't consume much of your time.
Hello sir
 
6:13 PM
hey there
 
I can't thank you enough for sparing your time.
 
can you tell me what you have so far?
what did my suggestions change?/
 
Yes sure. Can I share my screen with you - on teamviewer?
 
i am using linux, i don't have it :D
 
Oh, any other software?
I will quickly download?
 
6:14 PM
i don't know, don't use this type of software
is it ok for you to sent screenshots?/
 
Yes. Okay. Wait.
I've done the following:
$scope.viewHeight = window.screen.height;
I calculate height.
 
ok
but are you sure you need this?
this can be done with vanilla css
 
il send you a jsfiddle
 
I'm not sure. If it can be done. It'll be great.
This is my HTML.
Now I'm getting this
But if I change view - it becomes useless unless I refresh the page.
Now Only issue is this - How I make this bar floating?
Because as you can see in my code - Ionic takes scrolling for entire content view
<ion-content>
I want right side to scroll but entire menu div to stay afloat.
 
6:20 PM
take a look there
 
Yes. You're correct.
But Ionic adds
Some classes -
Which makes this div float too.
 
make all !important
 
Can you make a codepen, please with Ionic as example?
 
position: fixed !important;
 
Yes. I made it.
 
6:21 PM
also regarding what you said here: it becomes useless unless I refresh the page. You need an event listener, on resize, change the value of your $scope.height
 
Okay. Will do that.
Can you please make an example in ionic. Please?
Because this scroll view is giving me headache.
If I understand one time, It will be helpful.
Here's a created pen.
Can you extend it just to show me how to do this
It has scroll enabled.
 
do you think you can make this codepen a working example?
with the piece of code that you have?
so i can edit directly your code?
 
This is the issue. My code has too many libraries and Asset files . And I'm in team project - they don't give full access. I'm in office and can't copy it to server. But if you give me example on this pen, I will understand how to do it.
Then I can apply that to my project.
 
6:40 PM
check your codepen
sorry that it's taking so long to answer
busy a little bit now
 
which one?
I'm just waiting to solve this issue in office. I will wait for your answer.
I'm really thankful :)
 
Awesome. I will check this right away.
Is there any way that right content doesn't get overlapped with the sidebar?
 
check again :D
 
ion-content {
margin-left: 50px;
}
:D
Is this a good thing to do
:p
 
6:47 PM
yes its only css
it does not break js
if you want you can do <div style="margin-left:50px"><ion><stuff><here></div>
 
Okay. Thank you. I will try. If there is an issue, I will reply to you on same thread.
Will try to get code online. Thank you so much for your help, Radu. I am so grateful.
 
ok, to close the question, you have to mark it answered
 
Sure. Thank you sir.
 
you are welcome friend
 

last day (14 days later) »