I have a MudSelect on a MudPopover but I encounter a somewhat weird behavior when using the select. The select dropdown will not appear over everything else as it should, but instead, it will be layered behind /underneath other components and is unclickable. The confusing thing about this is that a simple reload (when opening the page) fixes the issue. Does somebody know what triggers the "broken" behavior and how it is then fixed by reloading? Or does somebody know how to fix it without forcing a reload upon entering the page?
when it is broken
how it should normally look
<MudPopover Open="#_open" RelativeWidth="true" Fixed="true">
<div class="d-flex flex-column">
<EditForm Model="#items" Context="itemUpload">
<MudSelect #bind-Value="selectedH" Margin="Margin.Dense" Variant="Variant.Outlined" Label="whatever" AnchorOrigin="Origin.BottomCenter">
#foreach (var item in items)
{
<MudSelectItem Value="#item.id">#item.name</MudSelectItem>
}
</MudSelect>
</EditForm>
<MudButton Disabled="#uploading" OnClick="Upload" Variant="Variant.Filled" Color="Color.Primary">
#if (uploading)
{
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
<MudText Class="ms-2">Processing</MudText>
}
else
{
<MudText>Upload</MudText>
}
</MudButton>
<MudButton OnClick="#ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Schließen</MudButton>
</div>
</MudPopover>
#InCo placed this in the comments, but it appears to be the best solution I have seen, so I pulled this out into an answer. Instead of using MudPopover, use MudDialog. It solves the Z-Index issue for MudSelect as well as MudDatePicker
Related
The picture is worth a thousand words, basically what bothers me is the following issue:
I'm sorry for the blurred text but the company policy doesn't allow me to reveal much... As you can see from the screenshot, I have a dropdown menu (set to dropup) which isn't completely visible. This isn't the issue for most of the rows when the data grid is huge with lots of data, but it's always the issue for the first few rows or when there is just a few data in the data grid.
I have added some code used to the JSBin (not a working example) but only the parts of it because, well, company policy. I hope the code provided will be at least a little bit useful. Please note that this is built with React Bootstrap. I have included some of the JSX used as well as the CSS classes relevant to the data grid and HTML visible when the project is compiled.
https://jsbin.com/wuvuhemewo/edit?html,css,js,output
I cannot even remember everything I've tried, starting from adjusting z-index almost everywhere (desperate times require desperate measures) to trying every possible solution I could find on google and here on Stack Overflow.
Here is what I get once I expand the shy Options "dropup" menu:
<div class="datagrid__options-btn show dropup">
<button aria-haspopup="true" aria-expanded="true" id="dropdown-basic-button" type="button" class="dropdown-toggle btn btn-link">Options</button>
<div x-placement="top-start" aria-labelledby="dropdown-basic-button" class="dropdown-menu show" style="position: absolute; top: auto; left: 0px; margin: 0px; right: auto; bottom: 0px; transform: translate(2.4px, -16px);" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="top-start">
Option1
Option2
Option3
Option4
Option5
Option6
Option7
</div>
UPDATE:
what I figured out in the meantime is that overflow-x is what is "eating" away the dropdown menu. When I remove it from these two:
<div class="dg-table__wrapper">
<div class="table-responsive">
the dropdown becomes visible, but now the datagrid is too wide and any try in adding the overflow just eats out the dropdown. I have found this on Stack Overflow: https://stackoverflow.com/a/6433475
Could it be that that is somehow the issue here?
You are correct, this issue is because of the overflow CSS property. It's not really elaborated in the docs, but you can utilize the prop popperConfig of Dropdown.Menu and make the menu have the CSS property position: fixed and have dynamic positioning thanks to Popper.js which is utilized by React Bootstrap.
const popperConfig = {
strategy: "fixed"
};
return (
<div style={containerStyle}>
<Row>
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Fixed Popper
</Dropdown.Toggle>
<Dropdown.Menu popperConfig={popperConfig}>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Item href="#/action-4">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
...
CodeSandBox: https://codesandbox.io/s/react-bootstrap-fixed-dropdown-popper-fqdnu?file=/src/App.js
Drop Directions: https://react-bootstrap.netlify.app/components/dropdowns/#drop-directions
On the same Popper.js documentation I linked, there are also other useful techniques such as Using Modifiers like Prevent Overflow - which can be an alternative solution to the issue. It boils down to the developer's UX perspective.
In addition, here is alternate solution I've written about recently using reactstrap instead of react-bootstrap: Reactstrap DropdownMenu bottom overflow issue
995faf8e76605e973 answer https://stackoverflow.com/a/63633030/14181063 helped! This is how it looks after modifying my code:
const popperConfig = {
strategy: "fixed"
};
<Dropdown id="dropdown-basic-button" drop="up" className="datagrid__options-btn">
<Dropdown.Toggle variant="link">Options</Dropdown.Toggle>
<Dropdown.Menu popperConfig={popperConfig}>
{row.options.map((action, i) => {
return (
<Dropdown.Item
key={i}
onClick={(e) => {
e.preventDefault();
functions.doAction(action, row.originalIndex);
}}
>
{action}
</Dropdown.Item>
);
})}
</Dropdown.Menu>
</Dropdown>
Also, in the meantime, I have figured out that adding style={{position: "static"}} to the DropdownButton element works too! However, I will stick to the solution posted by 95faf8e76605e973 as it seems more correct :)
<DropdownButton
id="dropdown-basic-button"
title="Options"
variant="link"
drop="up"
style={{ position: "static" }}
className="datagrid__options-btn"
>
I have a dynamically created <a> tags:
$(".categoryChoice").hover(
(eventObj)=>{
id = eventObj.target.id
$("#subCategories").empty()
if(id === "clothing") {
$("#subCategories").append(`<div id="col1" class="col-6" style="border-right: 1px solid grey"></div>`)
$("#subCategories").append(`<div id="col2" class="col-6"></div>`)
clothing.map((val,i)=>{
$("#col1").append(`<a class="subCat nav-link" href="products/featured.html?type=clothing&subType=${val.replace(/\s/g, '')}">${val.toUpperCase()}</a>`)
})
}
...
}
)
They work on android devices when I tap on the link and across all browsers, but not on iPhones.
When I try to tap on the link it won't do anything, but it only works when i press it for longer. I don't understand the behaviour.
I've checked similar questions and tried putting target="_self"in the tag as well, but it wouldn't change anything.
I'm kinda stuck here. I thought of creating a function instead that would get me to desired page, but if there is any simpler way of fixing it, that would be great.
Instead of using a tag I changed it to li with function that fires when onclick and ontouchstart and sends the user to the page. It works well on iphone now.
I developing a login page and i wouldn't like to show my menu in this page. Currently im calling the component menu in app-component. I would like to know what is the best practice to hide it.
<app-toolbar></app-toolbar>
<div class="row d-flex justify-content-center">
<div class="col-md-8">
<router-outlet></router-outlet>
</div>
</div>
Thanks!
For me, I simply did an *ngIf on my menu bar element. The ngIf referenced a function that would check if the user was logged in or not.
getLoggedInStatus() {
if (localStorage.getItem('userToken') != null) {
return true;
}
else {
return false
}
}
You can see I'm checking local storage for a token that is set on login
<div class="col hide-on-med-and-down l2 no-padding" *ngIf="getLoggedInStatus()">
And there is the menu element wrapper with the if statement. Should be said that I don't know if this is best practice, but I was new when writing my app and by the time I got to login/authentication I was WAY too far down the rabbit hole to re-write things
The best way to hide/show any element in Angular is to use the *ngIf directive. Do note that the component/element will bee hidden/shown based on a condition which you will have to provide.
I have a couple upcoming posts where I have multiple versions of the same poem all translated. I was thinking of giving two buttons to reveal each of them. I thought of implementing this as a double spoiler, but that would mean the poem could also be completely hidden (both spoilers closed) or be shown simultaneously in both versions (both spoilers open), whereas I would like to have one version and one only displayed at all times. Something like Edcel spreadsheets, where you have the buttons at the bottom to switch between sheets but cannot view multiple sheets simultaneously or not view any of the sheets. Can that be done in HTML? And if so, how?
Update
A now-deleted answer suggested Bootstrap Panels. I tried them out, but the following code:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Vulgate version</div>
<div class="panel-body">pefanthi</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Campbell version</div>
<div class="panel-body">Abanthi</div>
</div>
</div>
This is merely a test post to try out "Boostrap Panels". It is not meant to make any sense, but only to be able to click on buttons, which previews do not (or at least, spoilers and links don't work in previews, which is why I'm posting this).
produces this:
Is that the expected output, in which case this is not what I'm after, or is there something wrong with the code?
I cannot think of a website with this kind of thing implemented. What I want to achieve is to have a row of (in this case two) buttons at some point in the page (in this test post the point would be the top, in the actual blog posts it will be after a short introduction which is nothing more than a <div style="text-align: justify"> and a couple <br>s) which, when clicked on, will either change a part of the page below them, or, if I click the already active one, not change it. In particular, in the above code, I want two buttons, with "Vulgate version" on the leftmost one and "Cambpell version" on the other one, so that the former is automatically activated and shows "pefanthi", whereas the latter can be activated by clicking and that means "pefanthi" goes away and is replaced by "Abanthi", and then if I click on "Vulgate version" again I get pefanthi back and Abanthi leaves. Just like happens with tabs from a single window of a browser like Firefox:
So in this comparison, I want a "Vulgate version" tab that shows the "pefanthi" and a "Campbell version" which shows the "Abanthi", while the text about that being a test post stays below whatever is displayed, like that "It looks like you haven't started Firefox in a while […]" text in the picture, but with no X to make it disappear.
Update 2
Just figured out a way to do almost what I want. Here it is:
<button title="Vulgate version" type="button" onclick="if(document.getElementById('Vspoiler') .style.display=='none') {document.getElementById('Vspoiler') .style.display=''; document.getElementById('spoiler') .style.display='none'}">Vulgate version</button>
<button title="Campbell version" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''; document.getElementById('Vspoiler') .style.display='none'}">Campbell version</button>
<div id="Vspoiler" style="display:">pefanthi</div>
<div id="spoiler" style="display:none">Abanthi</div>
This way, if I click on a button and its content is shown, nothing happens, whereas if its content is not shown, it gets shown and the other button's content is hidden. The Vulgate version button has its content shown by default, so it is now impossible to have more or less than one button's contents shown.
There are two problems with this:
If the spoilers are more than two - and one of the posts I'm planning to use this on will have from 3 to 5 - the code gets pretty complex, so I'd like to know if there is a way to make the buttons hide the other buttons' contents when clicked without having to place a display:none for each of the other buttons: can the buttons "talk to each others" the way Firefox tabs to?
Having buttons that seem to do nothing is not good-looking IMO, so is there a way to make the button change look when it's pressed? For example, changing its color to the background color so it becomes almost invisible?
Update 3
Just found out how to change the color of a button:
style="background-color:<insert color>"
in the button tag. Implemented at this page, which is the rendered version of the above code. Now one question remains: how do I make each button change the other button's color, along with its own?
Update 4
This is exactly what I want. Except I tried adapting the code to my needs:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#vulg">Vulgate version</a></li>
<li><a data-toggle="tab" href="#C">Campbell version</a></li>
</ul>
<div class="tab-content">
<div id="vulg" class="tab-pane fade in active">
<p>pefanthi.</p>
</div>
<div id="C" class="tab-pane fade">
<p>Abanthi.</p>
</div>
</div>
and the result is this, which is just not right. What am I doing wrong?
Update 5
Just tried copy-pasting the whole part over here, and the result can be seen here, and is not what the page says it should be, so is the page misguided or is there a problem of HTML versions that makes the code work on that page but not on my Blogger blog?
Update 6
Following #crapier' comment, I looked at "BS get started" (what an unfortunate initialism :) ), and found the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I added it to my page, and something happened. The tabs appeared, but they do not work. What is going on? Should I add another one of the code lines here?
Update 7
Apparently it only works when all three of the lines here are added, but why?
Update 8
Moved the matter over to here, so this question merits a closure.
I really feel like this is a therapy because I wouldn't post here if I wasn't seriously struggling. I can't figure out what's going wrong but my menu title and icon seem to start overlapping randomly when I switch views. In addition, sometimes even the main content in the view disappears making the app useless.
I cannot click on the icon once this happens.
Screens:
in my menu.html, I believe this is the relevant part
<ion-side-menu-content drag-content="false">
<ion-nav-bar align-title="center" class="header" ng-show="isInApp()">
<!-- Hamburger Menu Button -->
<ion-nav-buttons side="left">
<button class="c-hamburger" menu-toggle="left" ng-class="{'is-active': isActive === true}">
<span>toggle menu</span>
</button>
</ion-nav-buttons>
<!-- Settings -->
<ion-nav-buttons side="secondary">
<img src="icons/settings.png" alt="Settings Icon" class="nav-button-icon" ng-click="goToSettings()" ng-class="{'settings-button-is-active': settings_isActive === true}" ng-if="isUsersOwnProfile()">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainView">
</ion-nav-view>
</ion-side-menu-content>
I then define the view name in separate template files like so
<ion-view view-title="CMON NOW">
Any advice what might be happening here? I tried copying laborously the same menu code into each view and defining the view there as well through ion-nav-title but the result was the same.
Thanks
The original question was posted on the Ionic forum. Since then, I have removed all but one ion-content elements as I found a similar question with the marked answer saying to not ddefine new ion-content directives inside of my view html, but no luck still.
I had a similar problem with an app I'm developing. The title alignment was initially working on all pages at app launch. I have the title alignment set globally with
$ionicConfigProvider.navBar.alignTitle('center');
Found from the ionic documentation: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
The default value should be centered anyway.
After some long hours trying to figure out this problem I noticed that the title alignment problem always started with one particular page in my app. After visiting this page the title alignment was wrong randomly - not even always happening and happening in random pages of the app. I noticed in the development tools console that I was getting an error in this particular page (with $ionicNavBarDelegate stuff). After fixing this error the title alignment issue was fixed.
So in your case I would make sure there are no other errors in the code itself and this could fix and hopefully fixes your problem.
This is just a long shot and might not be the case in your app but hey, it could help debugging this problem for you and hopefully you get it fixed.
EDIT: Also came across this discussion which might be a cause to the problem and plausible fix.
https://github.com/driftyco/ionic/issues/2881
From the discussion I made a solution which ultimately solved the issue.
$scope.$on('$ionicView.afterEnter', function (event, viewData) {
$timeout(function() {
$ionicNavBarDelegate.align('center');
}, 100);
});
Try it out! Unfortunately this seems to be an angular issue rather than a ionic problem.
SECOND EDIT:
If nothing else helps you can disable the translate3d css attribute which is used to animate in the titles since it seemed that this was sometimes broken in my app. (there could be a better solution to disable the animation but I did not investigate since I was in a hurry with the fix). The css:
.title {
transition-duration: 0ms !important;
transform: translate3d(0px, 0px, 0px) !important;
text-align: center !important;
}
This ultimately solved the problem for me.
Ionic link for doc
http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
You can set it using application config
appname.config(function($ionicConfigProvider)
{
$ionicConfigProvider.navBar.alignTitle('center');
});
You can use z-index property, for you button.
.button {
position: relative;
z-index: 9999;
}