I'm using antD modal to show an editor, the popup window should be fixed size to prevent size changing when collapsing/expanding sections inside.
So I customized:
.ant-modal-content {
max-height: 700px;
height: 700px;
width: 1000px;
/*overflow-y: auto;*/
/*overflow-x: auto;*/
}
but it's affecting other popups!
I tried using style={{height: '700px', width: '1000px'}} of that specific modal but it didn't take affect.
How can I control the size of only one modal?
Sandbox:
https://codesandbox.io/s/antd-reproduction-template-ci559?file=/index.css
(try to change the size o the syntax textarea as example for changing the size)
CSS styles defined in index.css file are global styles, meaning they affect every element/component in each file.
If you want to apply some styles on a specific element/component, you have 2 options:
use CSS Modules. They allow you to restrict styles to specific component and reuse class names without worrying about name clashes or css styles affecting other components or element.
As your popup window is a div element with a class named wrapper, apply the styles on wrapper class in RuleEditor.css file
.wrapper {
max-height: 400px;
}
but keep in mind that if you use wrapper class somewhere else, these styles will affect those components/elements as well.
you also have to prevent textarea from resizing as well otherwise it will overflow. To do this, inside RuleEditor.js file, change the styles applied on TextArea component from
style={{ width: "100%", resize: "auto" }}
to
style={{ width: "100%", resize: "none" }}
Related
There is a main CSS file (style .css) in my WordPress theme. I'm trying to reduce the height of an image banner by reducing the value oh the height: 100vh; to height: 50vh;
I changed it to 50vh but the banner height doesn't change. But when I right-click on Chrome->Inspect and change it there, then it works. Can anybody tell me if it works in the chrome inspect then why doesn't it work in the actual CSS file? Is any other way in which I can reduce the 100vh to 50vh?
You need to add !important to the end of the style.
element {
height: 50vh!important;
}
I am trying to stylize this frame in the image above on this website here by taking off the scroll bars, both horizontally and vertically, Also, i'm trying to increase the width, but all efforts seems futile.
#scrapeazon-wrapper {
position: relative;
width: 100%;
overflow: hidden !important;
-webkit-overflow-scrolling: touch;
}
#scrapeazon-iframe {
width: 100%;
height: 90%;
border: none;
}
nothing over here can be overwritten for some reason?
HTML shortcode for integration on wordpress;
[scrapeazon asin="B074TBRMZK" width="800" height="300" border="false" country="US"]
You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
But, you can edit CSS at Scrapeazon plugin settings.
There are several ways that you can style the scrapeazon-reviews iframe: by editing your theme’s stylesheet, by adding parameters to each shortcode, or by using the plugin’s built-in responsive style sheet.
To style the iframe in your theme’s stylesheet, add classes named scrapeazon-reviews and scrapeazon-api to your stylesheet, then add the width, height, border, and other parameters you want to style to those classes. For example, copy and paste the following into your stylesheet to make the iframe a 540×540 pixel square with no border:
.scrapeazon-reviews {
width: 540px;
height: 540px;
border: none;
}
.scrapeazon-api {
width: 540px;
}
To style the iframe by using the shortcode, add width, height, and border as parameters to the shortcode. For example, to accomplish the same formatting as above in shortcode format, use the following shortcode:
[scrapeazon asin="<your asin>" width="540" height="540" border="false"]
Append a percent (%) symbol to the width and height values if you are specifying your those values in percentages rather than pixels. You can optionally append ‘px’ instead of the percent symbol to use pixels. If you specify digits only, ScrapeAZon will default to pixels.
To style the iframe by using the built-in responsive style sheet (if your site has a responsive design/theme), select the «Use Responsive Style» checkbox on the ScrapeAZon Settings page.
2 issues plnkr
http://plnkr.co/edit/uGSGtK6FtiICc1HbYy5i?p=preview
margin-left breaks
flex-grow breaks
and some other rules too due to components tags.
Styles provided by other team, they stored separately and some of them are related to media-query, so i can't use uglyhack with :host { margin-left: auto; }. Also some styles (flex-grow e.x.) have numerical values and can't be easily tracked and changed on real styles changes.
How this can be solved without writing angular-specific styles?
margin-left doesn't not move user to the right. if you want it be there then use a style
.header-user {
position: absolute;
right: 16px;
...
}
flex layout works if you use a style on <flex-item> element. Yes, angular created this element inside the container that should be 1st child of the parent div.
I am using ngDialog in AngularJS to create pop-up dialogs in my webapp. ngDialog provides CSS that contains a width parameter. If I override the paramater with width: initial, the block expands to be full-width. I would expect (and desire) it to take up the minimum size necessary to show its contents.
Here is a minimally working ngDialog exmaple on jsfiddle. Click on the text to open the dialog and see it expand to full-width.
How can I adjust the css so that the div is just large enough to fit its contents?
Becuase the css by default is:
.ngdialog.ngdialog-theme-plain .ngdialog-content {
max-width: 100%;
width: 450px;
}
If you override the width: 450px, then as a div - a block level element - it defaults to full width.
You can change it to display: inline-block to make it "just fit"
You can use css property display
display:table;
if you just want to show html table in ngDialog, this will work perfectly and will fit your table into it.
Make sure your table width!
In your JSFiddle, .ngDialog is attached to a div and doesn't overwrite it's CSS display: block; property, which is why box spans across the entire screen; it has nothing to do with the width property. Set .ngDialog to include display: inline-block; and remove any properties for width.
You can customize the ngDialog theme as below:
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-mine,
scope: $scope
});
I copyed the "ngdialog-theme-default" block from ngDialog-theme-default.css to mine.css, then change "width" and rename it to "ngdialog-theme-mine".
It works.
I have an image that should stretch proportionally using only the HTML attributes. The default behaviour with no css set is that if the height attribute is set to half the natural height, then the width will automatically be half the natural width as well.
Example:
<img height="path/to/image.jpg" height="{half natural height}" />
The problem is that I am inheriting styles from an external library that i do not want to hack in that changes this behaviour.
I am trying to reverse the styles back to the browser default behaviour so that it would appear that the element has not been styled at all.
http://jsfiddle.net/23Hz4/2/
Failed attempts:
Setting width: auto; height: auto does not work. Setting width:
initial; height: initial does not work.
Setting element.style.width and element.style.height to null or empty strings does not work.
delete element.style.width and delete element.style.width does not
work
Any ideas?
You can make it works by using the style attribute instead of height
<img src="path/to/image.jpg" style="{height: half height};" />
The problem is the height: auto; css rule of bootstrap. The height attribute can't override this rule. So only a css rule can override this css rule.