I am trying to implement PrimeNg Steps in my application. Is there any way to delete or replace the numbering?
PrimeNg doesn't support that.
But you can hide the numbers with css. Add to your root css file the following css:
.ui-steps .ui-steps-number {
display: none;
}
#media (max-width: 40em) {
.ui-steps .ui-steps-item .ui-steps-title {
display: block;
}
}
Working stackblitz example.
Related
I am using the #draft-js-plugins/image to display image in my react application. It is working but I can't seem to understand how to style the plugin so as the style my images that are displayed. I read through the documentation and I read that:
The plugin ships with a default styling available at this location in the installed package: node_modules/#draft-js-plugins/image/lib/plugin.css
When I checked this location, the plugin.css is empty. How do I apply style to the images that are displayed by the plugin? My images are covering the entire page.
You can target the images inside the draft.js editor on your component stylesheet. Here is an example screenshot using scss:
Screenshot: targeting draft.js editor using scss
Here is the code block
.DraftEditor-root {
figure {
margin-block-start: .5em;
margin-block-end: .5em;
margin-inline-start: 0;
margin-inline-end: 0;
}
img {
width: 100%;
// height: 200px;
object-fit: cover;
}
}
I am using <style jsx> in Next JS to style my components. When that code is compiled #media query isn't executed successfully.
Here is my <style jsx> part of the code
.post__card .summary {
width: 351px;
}
#media screen and(max-width: 1142px) {
.post__card .summary {
width: 80%;
}
}
When code is compiled I have jsx-2993501484 post__card and jsx-2993501484 summary and JS is looking for
#media screen and(max-width:1142px) {
.post__card.jsx-2993501484 .summary.jsx-2993501484 {
width: 80%;
}
}
(see image below)
But for some reason style from #media-query is not applied to the element. That part of CSS is not even available in Inspect element in the browser
System information
OS: Manjaro Linux
Browser: Chrome
Version of Next.js: ^9.1.8-canary.13
I also asked this question here
This is the current code
#media screen and(max-width: 1142px) {
.post__card .summary {
width: 80%;
}
}
This is fixed code
#media screen and (max-width: 1142px) {
.post__card .summary {
width: 80%;
}
}
The problem was there there was no space between and and ( in media query.
I am very new to saleforce and playing around to get to know how things work.
How do i remove that home button there and can i move that cases and products menu items to right side?
Can you please help check
You can use a CSS hack to hide the Home icon and option
Click on the Pen icon in the builder and then the CSS button next to the word Branding at the top.
.navigationMenuNode:first-child {
display: none;
visibility: hidden;
}
In the latest version of Salesforce/Experience Builder the following can be used to hide just the home tab or the entire navigation menu which is what I needed.
Home tab
.themeNavContainer:first-child {
visibility: hidden;
display: none;
}
Entire nav menu
nav {
display: none;
visibility: hidden;
}
GO to builder > Theme > Top Right corner > Edit CSS
Here it is source image
.forceCommunityGlobalNavigation .slds-list__item a, .forceCommunityGlobalNavigation .slds-list__item button {
display: none;
}
What I've used and did the trick:
.forceCommunityThemeNav .mainNavItem:first-child {
visibility: hidden;
display: none;
}
Angular material allows us to configure themes to give a custom colour to <md-tabs>, or for that matter any of it's components.
Is there any way I can make these tabs look transparent so that I can view the background image?
Applying an inline style doesn't help.
Is this what you mean? CodePen
CSS
#background {
background-image: url("http://images.photowall.com/products/44352/rural-forest?h=700&q=92");
height: 100%;
}
.tabsdemoDynamicHeight md-content md-tabs {
background: transparent;
border: none;
}
#myTabs md-tabs-wrapper {
background: transparent;
}
#myTabs md-tab-content {
background: white
}
Markup
<md-tabs id="myTabs" md-dynamic-height="" md-border-bottom="">
Having tried just about everything Im at a loss how to change the color of splitter bars using SASS for Ext JS 4.2.2 - they always appear as a white bar.
Say I have a hbox or vbox layout with two flex items and a splitter, the bar created by the splitter to allow the components to be resized proportionately to one another is always white- is there anyway this can be changed through a SASS config?
Many thanks!
/resources/themes/stylesheets/ext4/default/util/_splitter.scss indicates that it doesn't use a variable
#mixin extjs-splitter {
.#{$prefix}splitter {
.#{$prefix}collapse-el {
position: absolute;
cursor: pointer;
background-color: transparent;
background-repeat: no-repeat !important;
}
}
}
You'll have to override it in CSS, or create your own theme.
CSS
.x-splitter-vertical {
background-color: #abc;
}