I use jsf, richfaces version:v.3.3.1.GA. I want to reduce height style of rich:editor tag (use tinyMCE) but it's not change.
<rich:editor id="transactionResult" style="height: 10px;" height="10"
value="#{transactionsHome.instance.transactionResult}"
theme="simple" viewMode="visual">
</rich:editor>
How can i change height or other style of rich:editor tag ?
Use important to override the style.
style="height: 10px !important;"
For highlighted classes, add the following into your CSS:
.mceLayout {
height: 10px;
}
And for iframe:
#iframeID {
height: 20px;
}
Replace iframeID with your iframe id.
Related
Using angular, I am using p-calendar in a component and created a CSS class that is called from my component. No matter what I do I am unable to override the style.
CSS
.ui-calendar .ui-calendar-button {
height: 34px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
width: 900em;
border-left: 0 none;
}
HTML
<div class="form-group col-xs-3 col-md-3"
[ngClass]="{
'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
!ersaForm.get('effectiveDt').valid
}">
<label for="effectiveDtId" class="control-label">Effective Date</label><br />
<p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
inputStyleClass="form-control "
class="ui-calendar ui-calendar-button"
[style]="{'width': '100%','display': 'inline-flex','height':'34px'}" ></p-calendar>
</div>
****************************************************UPDATE****************************************
I changed my SCSS File to
::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
height: 34px !important;
border-top-left-radius: 0 !important;
}
HTML
<div class="form-group col-xs-3 col-md-3 only-style-this"
[ngClass]="{
'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
!ersaForm.get('effectiveDt').valid
}">
<label for="effectiveDtId" class="control-label">Effective Date</label><br />
<p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
inputStyleClass="form-control"
styleCalss=".ui-calendar .ui-calendar-button"
[style]="{'width': '100%','display': 'inline-flex','height':'34px'}" ></p-calendar>
</div>
warning
Validation (CSS 3.0): "::ng-deep" is not a valid pseudo-element.
You can't tweak a child component's css, it breaks encapsulation. This will work but is deprecated:
::ng-deep .ui-calendar .ui-calendar-button {
height: 34px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
width: 900em;
border-left: 0 none;
}
This is essentially the same as adding it to your global stylesheet. However, the global styles will be applied only when the component has loaded for the first time, making it uber crappy. For safety, you can wrap your component in an "only-style-this" class and do:
::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
...
}
Alternatively, prime-ng usually allows you to pass styles in with most its components.
If you look at the docs you will find that there is a style property you can use. There are also other properties you might want to play with like inputStyle.
As in the following answer https://forum.primefaces.org/viewtopic.php?t=53756 just put your style as list item in the array of styles in the file angular.json
"styles": [
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/fullcalendar/dist/fullcalendar.min.css",
"../node_modules/quill/dist/quill.snow.css",
"../node_modules/nanoscroller/bin/css/nanoscroller.css",
"styles.css"
],
then you can use your css freely
I use prime ng ver 12.xx
override this ok for me on file style.css (Angular cli
.p-datepicker table td{ padding: 0px; }
.p-datepicker table td > span { height: 45px;width: 50px; }
I created collapsible sidebar.In side the sidebar that content automatically taken ant design padding value(16px)at the top,right,bottom and left .I need to remove this automatic padding
render() {
return (
<div className="common-coll-bar">
<Collapse >
<Panel header="Present Staffs" style={customPanelStyle}>
<p style={{ height: 550, color: '#131D43', background: '#607B7E', padding: 0 , margin: 0 }}> {text}</p>
</Panel>
</Collapse>
</div>
);
}
Can you help me?
You would have to manually overwrite the styling.
You can add a custom class to panel:
<Panel header="This is panel header 1" key="1" className="custom">
and Add less:
.custom {
.ant-collapse-content-box {
padding: 0;
}
}
https://codepen.io/kossel/pen/gooQqv
You need to theme antd. Doing the proposed solution by Yichaoz will just work for element that holds that class. Which will be harder to maintain, will require extra work, as you need to add that class to every element.
You need to read this https://ant.design/docs/react/customize-theme for a proper solution.
Using CSS modules:
.collapsePanel {
:global(.ant-collapse-content-box) {
padding: 0 !important;
}
}
import the file and use like:
<Collapse className={css["collapsePanel"]}>
...
For me worked only like this with antd#v5.x
I am creating an email flyer and I have multiple images that I want at 140px by 140px but some are originally 300x300 or 400x400. I don't want to go resize each image as there can be quite a few and the flyer will be a weekly update so is it possible to use CSS to tell all images (or images that have classes) to resize to 140px?
I was going to post some code but it's quite a vague request so there no relevant code I can show to help my question.
maybe if I <span>...</span> and then give the span a class, would it be possible this way?
if your markup is for a newsletter you may force dimensions both with style attribute and with inline width and height attribute, e.g.
<img src="..." style="width:140px; height:140px" width="140" height="140" />
but, anyway, I strongly suggest to perform some kind of batch task for automatic resize of the images (e.g. using GruntJS), so you could save some precious bandwidth on the server in which you store your static assets. (conversely, if you embed images into the email, users will appreciate a lighter size)
Yeah add class to span and then:
span.yourclass img {
width: 140px;
}
I think I might be understanding this, but some simple css should work :
css :
img.small {
width: 140px;
height: 140px;
}
OR if you want to do all img's under a specific element :
.thumbs img {
width: 140px;
height: 140px;
}
html :
<img src="pic.jpg" class="small">
<div class="thumbs">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>
Or if they are dynamically generated, you can eliminate the css and just go :
<img src="pic.jpg" width="140" height="140">
You can set width and height for all images. Add "max" keyword to be sure.
img{
max-width:140px !important;
max-height:140px !important;
}
If you simply want ALL images on the page to resize, add the following into your CSS:
img{ width: 140px; }
This will proportionally set the height/width and I'm assuming all you images are square ?
If not, add 'height: 140px' but this will distort an image that isn't square.
wrap your images with div.class then write a single css to resize all the images which are wrapped by that div
MARK-UP::
<div class="imageWrapper">
<img src="/path/to" />
<img src="/path/to" />
<img src="/path/to" />
</div>
CSS::
.imageWrapper{
overflow:hidden;
}
.imageWrapper img{
width:400px;
height:400px;
}
I am trying to find out the rule on how to target a class inside cascaded ids and classes so that I will be able to style specific area of a page when I need to modify things. Specifically wordpress child themes.
I have search for a while and so far results are giving me specifics to a particular situation. I like something general that will help me read html and target specific classes to style.
For example in this HTML.
<div class="one-third">
<div id="nav_menu-4" class="widget widget_nav_menu">
<h1 class="title">
<cufon class="cufon cufon-canvas" alt="About " style="width: 72px; height: 24.05px;">
<canvas width="91" height="27" style="width: 91px; height: 27px; top: -2px; left: -1px;"></canvas>
<cufontext>About </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="us" style="width: 27px; height: 24.05px;">
</h1>
<div class="menu-about-us-container">
</div>
</div>
I am trying to change font of H1 Title when it is within a side bar. I tried this but didn't work.
.one-third .title {
font-family: Impact;
}
What is the rule/formula to get specific selector to target specific classes.
Thanks
Try using a selector before the pseudo-class, see:
http://www.w3schools.com/css/css_pseudo_classes.asp
On CSS Syntax
you need to add h1 tag .one-third h1.title {font-family: Impact;}
I'm using a dojo ContentPane to render an openlayers map. When the DOM is ready and the map is inserted the sytle of the dijit is overwritten. I've tried specifiying the height and width in a CSS by class and id, and also inline in my html.
My html:
<div id="map-id"
class="centerPanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center', style: 'width: 1468px;'">
</div>
my CSS:
#map-id {
width: 1468px;
height: 471px;
}
.centerPanel {
width: 1468px;
height: 471px;
}
my actual html from firebug:
<div id="map-id" class="centerPanel dijitContentPane dijitBorderContainer-child dijitBorderContainer-dijitContentPane dijitBorderContainerPane dijitAlignCenter olMap" data-dojo-props="region: 'center', style: 'width: 1468px;'" data-dojo-type="dijit.layout.ContentPane" title="" role="group" dir="ltr" style="width: 1455px; left: 252px; top: 48px; right: auto; bottom: auto; height: 456px;" widgetid="map-id">
As you can see my data-dojo-props styling is ignorded and the new height and width are inserted...any ideas?
I have tried this in dojo grid and it also does not work. I suggest that you try doing it on javascript code.
add a style object with width and height attribute in the container object instead.
myGrid = new DataGrid({
store: myObjectStore,
structure : myStructure,
style: {
width: '1000px',
height: '500px',
},
}, "myGrid");
I believe that the declarative way does not work.
The center region of a BorderContainer gets sized to fill up any remaining space available. If you want your center region to be a particular size then you need to style the BorderContainer rather than the widget that occupies the center region.
You might need to add a doLayout:false on your container, if any :)