New answers tagged

0

I've made a better workaround so I can apply theme colors to accordion. Which is what I wanted to do when I opened this thread. Instead of writing the style directly in the DOM.innerhtml, I've create a new CSS file (not SCSS, just CSS) and set colors using theme tokens. AccordionMyStyles.css (for example) .ui-state-default{ background: none; ...


0

Yes, there is a possibility, however, this way will change the upload forms all over your Site Collection. You can add following Code to your masterpage: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { if (window.location.href....


1

I solved this issue using below code: toggle(b) { if (this.state.description === b) { this.setState({ description: null }) } else { this.setState({ description: b }) } } myColor(b) { if (this.state.description === b) { return "#ff9933"; } return ""; } Reference: Change color of selected element - React.


0

Try to use the CSS style below to check if it works. <style> #navmenu > li > a > img { margin-top: 12px !important; } div.searchBox > input { width: 288px; } div.searchBox { margin-top: 32px; } </style>


1

You can wrap the Pivot component inside a div element and add your custom style to it like: <div className={styles.pivotWrapper}> <Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} > <PivotItem headerText="Current" itemIcon="Recent"> <Label></Label> </PivotItem> <...


0

I have found a tricky solution. It's ugly and dirty, but works. What I have done is rewrite JQuery CSS classes right before render the accordion in the html DOM. TypeScript: (Original example from MS Docs) public render(): void { this.domElement.innerHTML = MyAccordionTemplate.templateHtml; const accordionOptions: JQueryUI.AccordionOptions = { ...


0

I added your code into my Site Pages library AllPages.aspx, it could work well. The result is: Which page did you add? Please make sure you are accessing the correct page which has been added the code. In addition, if you just want to hide "Recently Modified" section, you can use the following code: <style type="text/css"> .s4-recentchanges { ...


1

Your TS code looks correct: jQuery('.accordion', this.domElement).accordion("option", "classes.ui-accordion-header", styles.myAccordionHeaderActive); Try using 'important' in your CSS class definition .myAccordionHeaderActive{ background: red !important; }


1

If you want to hide the page title and command bar for all the modern page, we can create an application customizer to inject the CSS style below to achieve it. div[class^='pageTitle_']{ display: none !important; } div.commandBarWrapper { display: none !important; } Source code: SPFx Applications Customiser CSS Injection


1

For your requirement you need to use the custom css on the Modern page (Not good practice though). Try using below CSS: <style> div.commandBarWrapper { display: none !important; } </style> To add this code you will need a script editor web part. Below is the Modern Script Editor web-part created using SPFx: Modern Script ...


Top 50 recent answers are included