I am looking for a option to hide the header globally. So, is there any way to add styles globally in sharepoint framework.
Note: Opted Reactjs to build we parts.
You could create a Application Customizer to hide the element for modern view globally.
Use jQuery in SPFx
My test result.
$(document).ready(() => {
$("span:contains('Office 365')").css('display','none');
})
I would inject a custom CSS stylesheet using an application customerizer.
Here the code to inject your custom CSS:
https://github.com/hugoabernier/react-application-injectcss
Here is an article I wrote that explains how to do it:
https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/
The article explains why you should be careful with such customizations.
Let me know if you need help with the CSS.
Related
I want to download one of the free bootstrap templates and add said template to my react app. I tried reading some of the documents but I can't find any documentation on integrating these free templates with react.
I did an npm install for the template I liked but I'm not sure what to do next. I just have the template in my node_modules directory.
I took what was in the body of the html file in the template and threw it in the return for my app.js. Added the css and vendor folder. Then I tried to import the templates css file to my app.js as well as change what was needed in my index.html file. Some of it worked. Other parts didn't.
Just looking to properly integrate these nice looking templates into my react projects.
Any help would be greatly appreciated!
The issue is these templates are built with Bootstrap in mind not React. These templates were created using regular HTML, CSS, JS, jQuery, etc.. and won't work out of the box for a React application. So in order to get one of these templates to work, within the context of React, one will have make manual changes to numerous parts of said template.
For example, in addition to grabbing the pieces of the template desired for your React application one will have to change numerous attributes listed within the HTML pages provided by the template. This is because in React you can't use keywords reserved for JavaScript in JSX.
So what does this mean?
You'll have to change the class attributes in the HTML to className for your CSS style rules to take effect from the template. onchange becomes onChange, onsubmit becomes onSubmit, etc...
The standard is to camelCase reserved JavaScript keywords in JSX.
You can definitely get this template to work in React it will just involve some manual tweaking on your end. However, if you want a template to work out of the box for React I would look into a free template built with React in mind.
Hopefully that helps!
AngularJS 1.4.x is used on my current project. I have to implement tabs section on page. Is it ok to use Bootstrap's JS Tab or I should move to AngularJS based solution, for example UI-Bootstrap or custom tab library?
I think it is totally ok to use Bootstrap JS tab, but as usual angular developers are also divided into two camps, one who want to do everything in angular way(like creating directives or use UI-Bootstrap directives/components), even when it is a very small task and another who wants to mix jquery/bootstrap library with angular and choose one or another depending on the need.
Angular-UI, will also use the same bootstrap library, but you will get an angularized wrapper over it.
My suggestion, use whatever you are comfortable with and don't bind yourself to one opinion or another.
I'm using the Views Accordion module. I would like to disable the use of jQuery UI that it uses and use pure CSS instead.
I first cloned the module and did the necessary modifications, but then I read that it is not recommended to edit contributed modules, that it is better to create a new module that modifies their functionality, correct?
In the Views Accordion module there is this line in the views_accordion_style_plugin.inc:
public function pre_render($result) {
drupal_add_library('system', 'ui.accordion');
What would I put on my module to disable adding that ui.accordion library?
Thanks!
That is right, you should never update a contrib module. It is always recommended to create your own module.
Create a new module, with hook_js_alter() implementation, and try to unset jquery ui javascript file if it does exist.
Code sample:
function MODULE_js_alter(&$js) {
if(isset($js['misc/ui/jquery.ui.accordion.min.js']))
unset($js['misc/ui/jquery.ui.accordion.min.js']);
}
I'm using Angular UI Bootstrap accordion with templates. I'm wanting to know how I can replace the template that's injected by the accordion directive without modifying the UI library itself? Can I override the injection of the template somehow?
Thanks in advance
Sean
I ended up just adding a template after the bootstrap library. From there I was able to do anything I wanted. See this post
Yes you can but you need to override the class that the angular ui library have. In the css files, but not only, you can find a very precise explanation of every class that the accordion uses, if rewrite the class of your interest in another css file, your attribute override the previous one.
I have an extjs application which I embed into an existing HTML template with js plugins/css etc.
Im having CSS conflicts between my template styles and ext's. As a simple solution im wondering whether I can tell ext to only use its own css file when creating its components. I've implemented the following setting before I load my application:
Ext = {
buildSettings:{
"scopeResetCSS": true // Thanks, but I'll do my own scoping please
}
};
Which works to some degree, but the plugins css files are overriding certain ext components (form fields, alignment issues etc).
This is the first time i've tried integrating an ext application into a html template so my knowledge is pretty limited.
Thanks in advance
As far as I know, there is no way to scope CSS in a single page, I wonder how you did it. If you want to avoid conflicts, I'm afraid that you'll have to do some refactoring.
Some advices :
Build your CSS rules with the ExtJS file loaded in the page, which means that you are currently working with the final environnement. Moreover, you can use their own reset rules.
Do not use tag selectors (div, span, input...) - which apply to every element in your page including ExtJS ones - unless the targeted element never host any ExtJS component.
Add a namespace to your own selectors (#my-id, .my-class) as ExtJS does (.x-button, .x-container).
Another solution would be to sandbox ExtJS with iframes, but it depends on the nature of your project. I don't have enough informations to help you more than that.