I have a CSS that contains elements that should appear conditionally.
For most elements, this is easy: I have an attribute attached to the body element, and I can use that in the CSS:
body[data-var-draft=Draft] .heading1 {}
That doesn't seem to work for #page elements though:
body[data-var-draft=Draft] #page {}
leads to an error message in Antennahouse Formatter (6.6).
I've seen more constraints for #page rules:
#page titlepagesection, #page tocsection, #page chaptersection {}
doesn't seem to work either.
Is it/should it be possible to combine #page with other selectors?
An #page rule is selected by the page property value. To select a particular named page in a particular context, set the page property value in the rule for that context:
#page draft {
background-image: url('draft-watermark.svg');
}
body[data-var-draft=Draft] {
page: draft;
}
There is an illustrated example in Chapter 3, Page Layout, in 'Introduction to CSS for Paged Media' available at https://www.antennahouse.com/css/.
Related
I am using Material-UI in my react application. Recently, I updated my packages to the latest version. Now, when I open a dialog in my application, padding-right: 17px; will be added to the body tag.
I also checked the Material-UI site, and this is happening on their website too with dialogs.
Is this a bug with the new version of Material-UI?
How can I remove this padding from the body tag when opening a dialog?
Update: This padding will be added to the body tag with Drawer, Menu, Dialog, and Popover components.
as it was mentioned by #Reins you can use disableScrollLock property. The thing is sometimes this property is nested on components's input so you need to use inputProps in order to set it. Here is an example with Select component:
<Select
className={classes.select}
inputProps={{MenuProps: {disableScrollLock: true}}}
...
/>
Sometimes you may want to dig into MUI codebase in order to figure out how to apply some nested element's properties.
Just give disableScrollLock={ true }.
I think it will solve the issue because I had the same.
I added disableScrollLock prop to my Dialog Component.
It worked.
You can use a mui-fixed class for handling this issue, it's helpful for me.
Here is a link for material UI mui-fixed document :
https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened
Hope this will help anyone.
For me the solution was to add
overflow: auto;
to the #root selector:
#root {
... other css that was there before
overflow: auto;
}
I add in my main css file the following snippet of code and I get rid of body margins:
body {
margin: 0;
}
I realized this came from a parent Container. I just added this and it worked for me. Also realized this is adaptive to screen size, so this code is applied to all the sizes from xs and up breakpoints.
sx={{
[theme.breakpoints.up("xs")]: {
padding: 0
},
}}
My company is running Wagtail as a headless API, using it more as a way to store bits of content rather than entire pages. As such there's the occasional feature that doesn't make sense for us. In this case it's the "internal link" feature. Since we don't manage "pages" per se I'd like to remove this option from the chooser found on the rich text field, as seen below.
I've identified several admin templates which could be overridden to remove this functionality, but I wanted to first see if there's something which can simply disable this "internal link" option so that it just doesn't even show up.
The _link_types.html template would allow me to remove Internal Link as a choice, but it appears Wagtail defaults to Internal Link which means that even if the option is gone, the Internal Link chooser still shows up. Barring a simple option that can be toggled off, where should I be looking to default selection to External Link?
Below is an approach, it kind of feels a bit hacky and it would be great if there was a more natural way to do this but hopefully this helps.
See the documentation for an explanation of the Wagtail Hooks.
Step 1 - hide the internal link option
Use the hook insert_editor_css to inject some css to 'hide' the first link.
This achieves the same goal as the _link_types template override you have attempted but 'scopes' this to the editor modal only.
This is important as you want to avoid breaking the 'move page' and scenarios where the page chooser will be shown. The css feels a bit hacky but hopefully gets the job done.
Step 2 - override the internal link option to external link for modals
Use the hook insert_editor_js to override the window.chooserUrls.pageChooser value, this will again be on the editor page only & for the modals only.
Set this value to the new 'default' you want, in the code below we have set this to the external link option.
You can see how these values are set globally in the editor_js.html template.
Code
# file: wagtail_hooks.py
from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.html import format_html
from django.urls import reverse
from wagtail.core import hooks
#hooks.register('insert_editor_css')
def editor_css():
"""Add /static/css/admin.css to the admin."""
return format_html(
'<link rel="stylesheet" href="{}">',
static("css/admin.css")
)
#hooks.register('insert_editor_js')
def editor_js():
return format_html(
"""
<script>
window.chooserUrls.pageChooser = '{}';
</script>
""",
reverse('wagtailadmin_choose_page_external_link')
)
/* file: static/css/admin.css */
.modal-content .link-types :first-child {
/* hide the 'internal' link option from the page chooser */
display: none;
}
.modal-content .link-types {
/* ensure the 'before' element can be positioned absolute */
position: relative;
}
.modal-content .link-types::before {
/* hide the left '|' bar */
background: white;
bottom: 0;
content: '';
left: 0;
position: absolute;
top: 0;
width: 5px;
}
I have a simple ng-class that switches two classes based on the condition. When the class is switched, the order of the classes is messed up not sure why. Has anyone a solution for this?
<div class="ui" ng-class="{'two column grid' : submitNow, 'one column grid' : defaultState}"></div>
Rendered HTML when submitNow is true. This works as expected
<!-- submitNow is true -->
<div class="ui ng-scope two column grid"></div>
Rendered HTML when defaultState is true. This messes up the order of classes added by ng-class
<!-- defaultState is true -->
<div class="ui ng-scope column grid one"></div>
*** Edit ****
Quite strange because it works on jsfiddle. But here's the screenshot of my rendered html code
Here is a demo
https://codepen.io/vibwaj/pen/KKPBdNp
OK...looking at the style rules in elements inspector, semantic ui uses selectors like .ui[class*="two column"].grid > .row > .column
Not sure why they do it that way which is unusual and does make the order important.
Also not sure if it is angular or the browser that sorts the order of those classes. I suspect it is the browser, but that is a guess.
Rather than try to figure out what causes the sort you can add the following rule to fix layout for non specific class order.
.ui.two.column.grid > .row > .column,
.ui.two.column.grid > .column:not(.row){
width:50%!important;
}
Working codepen
Update:
I didn't notice the semantic UI framework that is using this approach.
If you still need the same approach, you can check the forked Codepen which I created a custom directive to be alternative than the original NgClass directive.
app.directive("myNgClass", function() {
return {
link: function(scope, element, attrs) {
scope.$watch(
function() {
return attrs.isExpand;
},
function(isExpand) {
element.removeAttr("class");
if (JSON.parse(isExpand)) {
element.addClass("two column grid");
} else {
element.addClass("one column grid");
}
}
);
}
};
});
Original Answer
So diving deep into the NgClass directive implementation in Angularjs source code and checking how they update the classes, there is a function called updateClasses.
In this function, it finds which classes should be removed and added.
Instead of replacing all the classes when the Boolean flag gets inverted, NgClass keeps the overlapping classes and checks which classes should be added / removed.
So in your case,one column grid (the default case) and two column grid have the column grid classes in common, so it will keep them, but remove the one from the start and add two at the end. So the result will be column grid one.
I really don't suggest to use the order of the classes as CSS selectors. This will make it more harder to select elements and make things more complex.
I also have a comment regarding the CSS selectors that you are using. I really suggest you to read Keep your CSS selectors short article so you can have a better practice of using shorter selector and why keeping the CSS selectors short can help with many things.
For example, If you don't need the one, column and grid classes seprately, you can just use .one-column-grid as a class name / CSS Selector instead of .one.column.grid.
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}
I have an element with the following styles
<ul class="textboxlist-bits" style="background-color: transparent;">
Now I want to select the element based on the style attribute.
The css selector ul [style="background-color: transparent;"] does not work there.
Kindly suggest an appropriate selector to identify such element.
I think you only have to remove the first space:
ul[style="background-color: transparent;"]
Now it is searching all ul-tags which have this style; with the space between it tries to select all dom elements in(!) a ul-tag which have this sytle.
Here an example with the querySelector for javascript, it should work with selenium too.
A possible solution is to select all elements with matching class name, then the first of those with the correct style attribute. You haven't said which language the test is written in, but an example in C# would be:
IWebElement element = driver.FindElements(By.CssSelector("ul.textboxlist-bits")).First(e => e.GetAttribute("style").Contains("background-color: transparent;"));
Maybe this http://reference.sitepoint.com/css/elementtypeselector
not sure if you mean something like an if statement in c?
[ { attribute | attribute { = | |= | ~= } attribute value } ] {
declare stuff here..
}
or
this matches any type input that matches 'submit'
input[type="submit"] {
declarations
}