I'm working on a micro frontend proof of concept app using single-spa, react, and material-ui. I've run into an issue where the generated class names from Mui are stomping on each other because there are multiple separate apps being registered with the parent app, and each child app has it's own Mui class name generator.
Example
Child app one is a Drawer for left navigation, and is adding the following <style /> element to the head:
<style data-jss="" data-meta="MuiDrawer">
...
.jss3 {
left: 0;
right: auto;
}
...
</style>
Child app two is an AppBar providing top navigation, and is adding the following <style /> element to the head:
<style data-jss="" data-meta="MuiAppBar">
...
.jss3 {
top: 0;
left: auto;
right: 0;
position: absolute;
}
...
</style>
These clobbering names result in that class (among others) to end up looking like this when I inspect the MuiDrawer element:
.jss3 {
top: 0;
left: auto;
right: 0;
position: absolute;
}
I've been through the Mui documentation and issues trying to figure out if there is a way to customize the naming in each app, so one might generate .app1-jss3 and the other might generate .app2-jss3. So far I haven't found anything that seems to address this. Looking for some direction.
Solution:
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
seed: 'app1'
});
function App() {
return (
<JssProvider generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
https://material-ui.com/customization/css-in-js/ explains all your questions (why the names look like this, how to get deterministic names in production, how to prefix).
If you encounter conflicting class names it might be good to wrap a jss provider around all apps (available in react-jss).
Related
I want create a drop down menu or popover within ionic toolbar. I tried with several ways but can not solve. Its always hidden like bellow,
I trying css like bellow,
.popover{
border: 1px solid black;
height: 350px;
width: 150px;
position: absolute;
z-index: 99999999;
background: yellow;
}
ion-header{
contain: none;
}
ion-toolbar{
contain: none;
}
Please give me a suggestion or an alternative idea. Please do not give any predictive answer if you are not familiar with ionic.
I don't know about Ionic 4 but on Ionic 5, a solution would be this when you debug on the console :
ion-toolbar {
contain: none;
.toolbar-container {
overflow: visible;
contain: none;
}
}
However, the .toolbar-container is an element in the shadow dom of the <ion-toolbar> component and its overflow and contain properties are not css variables and there is no part attribute on this element neither. So there is actually no way to override those properties.
I'm considering using this package, but for me it seems like overkill to use js and timeout for setting a pretty simple style... :
https://www.npmjs.com/package/shadow-dom-inject-styles
I had a similar problem when I had to make a searchbar overflow underneath the header (design thing). I was struggling a while and it popped in place suddenly when I place the searchbar outside of the toolbar and gave it position absolute:
<ion-head>
<ion-toolbar>
<!-- My stuff here -->
</ion-toolbar>
<ion-searchbar></ion-searchbar>
<ion-header>
My css looks like this:
ion-toolbar {
display: flex; // I need this for something else, but maybe has an influence
}
ion-searchbar {
padding: 0 1em .5em 1em;
transform: translateY(-50%);
z-index: 99999;
position: absolute;
}
Hope it helps somebody.
In case anyone is still looking for the solution. Here is how I managed to fixed it in react. It's a bit hacky solution, but most likely the only one ATM.
First we need to style the toolbar (pass a className or style to component:
.your-toolbar-classname {
overflow: visible!important;
contain: none!important;
}
Then we have to also style the shadow-root parts. Se we can use the useEffect after the header is mounted and set the style
// Header.tsx
...
useEffect(() => {
const style = document.createElement('style');
style.innerHTML =
'.toolbar-container { overflow: visible!important; contain: none!important; }';
toolbarRef.current.shadowRoot.appendChild(style);
}, []);
...
Just use ion-menu, its a build in ionic component
https://ionicframework.com/docs/api/menu
There is also ion-popover
You should look at the ionic docs before posting on stack
I'm trying to implement ng-class in my angularJs application but for some reason expression in the ng-class is not getting applied, any thoughts?
<span>{{prod.item.count}}</span>
<div ng-class="{'show-error-box' : prod.item.length< 1}" class="hide-error-box">
prod is my controller alias in the view and item is the scope object in my controller
I want the class 'show-error-box' when the number of items is less than 1 otherwise apply the class hide-error-box. As I don't have any test data to test this with 0 length i'm replacing the expression with ng-class="{'show-error-box' : 0< 1}" in which case show-error-box should get applied, but it is not happening.
CSS:
.hide-error-box {
display:none;
}
.show-error-box {
float: left;
width: 100%;
background: #fff;
text-align: center;
padding: 10% 0;
height: 700px;
position: absolute;
}
ng-class does not serve as a replacement to "class". It will add any classes whose name is a key in your object if the associated value is true.
The only two options this div will have as a result are:
class="hide-error-box"
or
class="hide-error-box show-error-box"
To acheive the desired effect you would could put the opposite condition as a value of your hide class.
ng-class="{hide-error-box: prod.item.length >= 1, show-error-box: prod.item.length < 1}"
However, it is often recommended that you keep your templates as free from logic as possible. It may be worth considering placing this in a controller function:
HTML
<div class="{{getSizeClass()}}">
JS
this.getSizeClass = function() {
if (item.length >= 1) {
return 'hide-error-box'
}
return 'show-error-box'
}
Is it required to use bootbox.alert("message",function(){example.show("another message")};or bootbox.prompt/confirm to use show? Also is there a way to change the position of where show displays? By default it displays close to the bottom right.
If I'm correct, show is just to get the Example object to show itself (jquery show ). If that is the case, no you do not need to use the bootbox methods to use show as it is a method found in jquery. As to whether the position the Example object is displayed, it is definitely possible. I'm not sure but one way could be to write custom css. When I check the style for the 'show', this is what came up:
.bb-alert {
position: fixed;
bottom: 25%;
right: 0;
margin-bottom: 0;
font-size: 1.2em;
padding: 1em 1.3em;
z-index: 2000;
}
You could change the position of the Example object by changing the 'bottom' or the 'right' elements in the css.
I'm using GWT. I see that the gwt "clean" theme (the default one?) makes our body element have a 10px margin:
body {
color: black;
margin: 10px; <------
border: 0px;
padding: 0px;
background: #fff;
direction: ltr;
}
In my own css file, I set the margin to 0px, but it seems that GWT's keeps winning (maybe because it gets loaded last?).
What's the right way to override their setting?
Thanks
There are several possibilities:
You can use margin: 0px !important (this is the "brute-force" approach).
Or you can give your body a class like <body class="myApp">...</body>, and then in your CSS, use body.myApp { ... }. This will take precedence, because body.myApp is a more specific selector than body.
Or you can simply not use any theme at all (which is often a good idea if you want to create a fresh layout without worrying which attributes you'll have to override)
Another option is to load your css file by using clientbundle. (assume that playground.css is your css file)
public interface Resources extends ClientBundle {
public static Resources INSTANCE = GWT.create(Resources.class);
#Source("playground.css")
CssResource getPlaygroundCSS();
}
Note: playground.css is located in the same package as the Resources interface.
in the onmoduleload:
public class Playground implements EntryPoint {
#Override
public void onModuleLoad() {
Resources.INSTANCE.getPlaygroundCSS().ensureInjected();
Label lblHelloWorld = new Label("Hello World");
RootPanel.get().add(lblHelloWorld);
}
}
In the CSS:
body {
background-color: #FFFFD2 !important; }
works fine to change the background color.
I know, there are at least 3 dozen questions like this on stackoverflow and still, I could not make this happen:
A simple table where thead is sticked/fixed at the top, and the tbody is scrolled.
I tried so much in the past days and now I ended up here crying for help.
A solution should work in IE8+ and newest FF, Chrome & Safari.
The difference to other "possible duplicates like this one is that I don't want to use two nested tables or jQuery (plain javascript is fine though).
Demo of what I want:
http://www.imaputz.com/cssStuff/bigFourVersion.html.
Problem is it doesn't work in IE, and I would be fine to use some JS.
Ok i got it:
You need to wrap the table in two DIVs:
<div class="outerDIV">
<div class="innerDIV">
<table></table>
</div>
</div>
The CSS for the DIVs is this:
.outerDIV {
position: relative;
padding-top: 20px; //height of your thead
}
.innerDIV {
overflow-y: auto;
height: 200px; //the actual scrolling container
}
The reason is, that you basically make the inner DIV scrollable, and pull the THEAD out of it by sticking it to the outer DIV.
Now stick the thead to the outerDIV by giving it
table thead {
display: block;
position: absolute;
top: 0;
left: 0;
}
The tbody needs to have display: block as well.
Now you'll notice that the scrolling works, but the widths are completely messep up. That's were Javascript comes in.
You can choose on your own how you want to assign it. I for myself gave the TH's in the table fixed widths and built a simple script which takes the width and assigns them to the first TD-row in the tbody.
Something like this should work:
function scrollingTableSetThWidth(tableId)
{
var table = document.getElementById(tableId);
ths = table.getElementsByTagName('th');
tds = table.getElementsByTagName('td');
if(ths.length > 0) {
for(i=0; i < ths.length; i++) {
tds[i].style.width = getCurrentComputedStyle(ths[i], 'width');
}
}
}
function getCurrentComputedStyle(element, attribute)
{
var attributeValue;
if (window.getComputedStyle)
{ // class A browsers
var styledeclaration = document.defaultView.getComputedStyle(element, null);
attributeValue = styledeclaration.getPropertyValue(attribute);
} else if (element.currentStyle) { // IE
attributeValue = element.currentStyle[vclToCamelCases(attribute)];
}
return attributeValue;
}
With jQuery of course this would be a lot easier but for now i was not allowed to use a third party library for this project.
Maybe we should change a method to archieve this goal.Such as:
<div><ul><li>1</li><li>2</li></ul></div> //make it fixed
<table>
<thead>
<tr><th>1</th><th>2</th></tr>
</thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
Of course, this is not good to sematic.But it is the simplest way without js or jq.
Don't you think so?