I'm trying to adjust FABs in Ionic to make them scrolling with my content. If we refer to the Ionic Exemple :
<ion-fab top right edge>
<button ion-fab mini><ion-icon name="add"></ion-icon></button>
<ion-fab-list>
<button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
</ion-fab-list>
</ion-fab>
The result is the following :
I'd like to make this FAB scroll with the content. I tried to overrider Ionic CSS, but when I change the position attribute it makes my button disappear..
Thank you in advance for any help
You can't because the case here is not css. Ionic adds the FAB button to the fixed-content class, so even knowing you can use css to manipulate both the fab and the fixed-content it does't scroll along with the scroll-content (i've tried here to find a solution for you).
Manipulating the DOM maybe works, taking out the fab from fixed-content and placing it in scroll-content with ElementRef, ViewChild, Renderer from #angular/core (haven't tried this yet).
Along with manipulating the DOM, the other solution is creating your own FAB button, it can be a hard work, but there must be some examples around the internet.
Hope this helps.
Related
Solution for main issue: As vatsal said, the toggle button should be moved above the drawer, then we take the advantage of the open state of the drawer and change the left property of the button in the toggleButton class: left: props => (props.open ? ${drawerWidth - 30}px : '30px')
https://codesandbox.io/s/material-demo-forked-4neblr
Edit 2: Also, how can I prevent the drawer from pushing the appbar and main content?
I want the open state of the drawer to appear above them.
Edit 1: Here's a demo from material ui v4 page, with the issue I'm currently facing:
https://codesandbox.io/s/material-demo-forked-j9e96u
Hello
I'm using Material UI v4 and the drawer mini variant component,I have been trying to get the toggle button as the image below for two days without success:
Here's what I get:
Position absolute is not working, and when I add overflow:visible on the paper component that the drawer is using it, I get the first look but with an issue, where the links/buttons on the sidebar overflow:
It's driving me crazy, any help would be appreciated.
Thank you.
Moved
<IconButton className={classes.toggleButton} onClick={handleDrawerToggle}>
{open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
above drawer now you can add the conditional styles I have made the comment in toggleButton
CodeSandBox
I'm building an app with flip cards with three buttons each. I need to show the text in the button clicked on the back of the card. How can I do this in Svelte?
<section class="front-side">
<button aria-label="Pizza" on:click={flip}>PIZZA</button>
<button aria-label="Donuts" on:click={flip}>DONUTS</button>
<button aria-label="Hot Dogs" on:click={flip}>HOT DOGS</button>
</section>
<section class="back-side">
Great! We like {data} too.
</section>
This can be solved in a number of ways but the easiest is CSS and the class directive. Whenever one of your options is clicked just toggle a flipped variable and bind it to a class of the same name on a div that wraps the front and back of the card.
If you want to inform the parent of the flip component about the option selected for each card you can dispatch the clicked card's data and handle it how you see fit.
Here's a simplified example in the REPL with CSS pretty much scraped from the W3 Schools tutorial on flip cards the only difference would be instead of hover being the trigger the flipped class has the transform inside it.
https://svelte.dev/repl/782718a4f2fe43e3b731822b54aaed78?version=3.38.3
I am new to css and flex. Below is the working url in stackblitz.
https://stackblitz.com/edit/angular-ivy-bh8m8u?file=src/app/app.component.html
I have a left panel and main panel and a click button on the top of the page.
Requirement 1 On the click of the button i want to open the side panel. For some reason the side panel is not opening.
Requirement 2. I want to update the css to use flex if is possible because i am new to flex also
Please help.
Your sidePanelOpen variable isn't updating, and your sidePanel element is translated -150%, so it's off to the left of the screen
Never done any Angular but using the power of logic I've figured out half your answer. Now all you need to do is read a quick CSS tutorial
You originally were just setting this variable true. Using ! you can negate the sidePanelOpen value and get a toggle action going
.ts
openSideBar() {
this.sidePanelOpen = !this.sidePanelOpen;
console.log(this.sidePanelOpen);
}
Here you had the toggled class being set on the wrong element.
.html
<div [ngClass]="{'toggled' : sidePanelOpen}" class="sidebar" id="sidePanel">
<div>
<span id='close'>x</span>
<h4>Bangalore </h4>
</div>
</div>
Lastly, the toggled class won't do anything unless you have some css to hide your side panel
.css
#sidePanel.toggled {
display: none;
}
I have a custon class inside my react js render , it's a style to make 3 buttons inline (2 on the right and one to the left) in the same line.
But the buttons are not responsive to mobile and other screens, I tried to put the style in a custom css stylesheet but it didn't work and the buttons didn't show up inline.
Here is my CodeSandBox.
Many thanks
Please check with the property flex-wrap: wrap on parentStyle. This will make the prev and next buttons move to the next line as you resize. Similarly you can use the same property in this line <div style={{ ...childStyle, justifyContent: "flex-end" }}> as well to move the next button below the prev button if the browser is resized further
Please take a look at this, I want to put each button in new line in this case :
Small screen test
They seem to line up - what is the problem?
I am building a bootstrap-grid column inside of which I have a panel.
Inside this panel I have a datepicker and there must a lot of other controls so I would need to be able to scroll down (y-axis only) inside the panel.
Unfortunately the datepicker popup window is partially hidden because of the overflow-z and overflow-x styling which enables the scrolling :
<div style="height: 480px;overflow-y: scroll;overflow-x:hidden;">
...
</div>
Is it possible to overcome this with some CSS trick?
I have found an answer on SO when the element poping out can be placed outside of the div but in my case I'm using a directive from the Angular-strap library so I need to place it inside.
I have set up a plunker to illustrate the issue (you need full-view to see it) : plunker
Well, since no one bothered to answer, I just found the answer today, which was actually very simple.
I just needed to add this in the attributes :
data-container="body"
Plunker here