css
14 TopicsWordpress additional CSS customization to a theme does not work on Edge
Hello, I have some additonal CSS customization for my Wordpress theme that addresses some menu item colors that I was having issues with. Originally it blended into the background, so I had to force the theme to change these colors from the background color. The fixes function properly on every browser I've tried (Chrome, Firefox, Safari) except for Edge. Attached is an example of the issue. Upon inspecting one of the menus, it seems it IS running the custom CSS, but it is not displaying?? In the attached photo, the menu item of the current page displays the same color as the background color, and the drop down menu that is being hovered over also displays this way. I appreciate any help, Thanks!922Views0likes0CommentsLoad predefined data from columns and update field with possible selection with Javascript
I am struggling with piece of code. I am working on SharePoint 2013 and I am trying to set 2 fields fixed when creating a new item in list. All 3 fields are lookup columns, but the red highlighted fields I want to set as fixed and the yellow highlighted field is conditioned by the field Vyberova_Skupina_Sluzba Also Vyberova_Skupina_Sluzba is conditioned by the field Vyber_Oblast I used the part of the code below, the fields are fixed Vyber_Oblast and Vyberova_Skupina_Sluzba but third column is not updated. function nastavSluzba(){ $('#Produktova_Skupina_Sluzba').find('select').val('Hypotekárne úvery'); $('#Vyber_Oblasti').find('select').val('Úverové produkty pre FO') $('#tableNapoveda').remove(); $("#Vyber_Oblasti").find('select').attr("disabled", true); $("#Produktova_Skupina_Sluzba").find('select').attr("disabled", true); $("#Vyber_Oblasti").find('select').css({"background-color": "white","color": "black"}); $("#Produktova_Skupina_Sluzba").find('select').css({"background-color": "white","color": "black"}); var allOptions = document.querySelectorAll("[title=Vyber_Oblasti] option"); [].some.call(allOptions, function(option) { if (option.innerHTML == "Úverové produkty pre FO") { option.selected = "Úverové produkty pre FO"; return true; } }); var allOption = document.querySelectorAll("[title=Produktova_Skupina_Sluzba] option"); [].some.call(allOption, function(option) { if (option.innerHTML == "Hypotekárne úvery") { option.selected = "Hypotekárne úvery"; return true; } }); Can you help me make sure that the third field is loaded automatically and that the user can select an option that falls under Produktova_Skupina_Sluzba ?698Views0likes0CommentsNews Web Part rendering issues
Is anyone noticing major rendering issues with the SharePoint Online News web part? The issues are similar to this post... https://techcommunity.microsoft.com/t5/sharepoint/changes-to-top-story-news-web-part/m-p/2586536 ...but the impact is also on other 'Layout' types. It is almost as if Microsoft have broken their CSS or something, as the images used in news item banners are rendering as full size, rather than being cropped and having a gradient applied (to ensure text is readable in the web part). My configuration of the web part is as shown below (or attached), and I can confirm that this issue is happening in multiple tenants, and mulitple site collections. In fact, I can't find any site collection where this issue ISN'T occurring. Be very keen to hear of others experiencing this, and would be grateful if others could test this in their own tenants to see how widescale the problem is. Thanks, Joe7.5KViews3likes22CommentsEdge Stable version 89.0.774.50 introduces a bug in css Transform
On Edge version 89.0.774.50 all css transform: translate properties like: transform: translate(3px, 3px); transform: translateY(3px); transform: translate3D(3px, 3px, 0); applied to svg elements (e.g. path) when used with a transition create a flicker. You can see the issue on stripe.com website or on my codepen which isolates the issue: https://codepen.io/micu22/pen/vYybWWW.1.6KViews1like4CommentsSharePoint : Workflow > Send an Email > Customizations (CSS)
Hello everyone, I'm customizing the body of an email send by SharePoint's Workflow action "Send an Email". Knowing that this action does not support what's inserted in the <style></style> tags and the only way is to do it inline within the target html tags, I'm currently facing the following issue: somewhere in my email's body text, I'm getting the value of a specific item's field (example: [%CurrentItem:Body%] which can contain images in between of the text. How can I apply the css in order to set this images' width? Thanks in advance! Kind regards, Duarte549Views0likes0CommentsHow to stop CSS to be applied to a part of layout on the samepage, (wikipage)
I have created a SharePoint Page using Wiki page option. - I used the two column option and created the page. Added the html code for accordions using the Js and some css style I did that by using Insert-> Embedded code -> added the code in the box and it was added as a webpart and it solved my purpose. - But here is a new problem, I don't want the CSS to be applied to the other column of the page. How to avoid that. Also, I want to change the color of the alternate header to grey, any code for that would really help, thank you. please help Best Regards <script src="..//SiteAssets/jquery-2.0.2.min.js"></script> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <title>Untitled</title> <style> /*** CSS for collapsable headers ***/ /*** Expanded h2 ***/ #DeltaPlaceHolderMain h2:before { display: inline-block; margin-right: .5em; border-radius: 2em; padding: 0 .05em .05em ; background: black; color: #fff; cursor: pointer; vertical-align:middle; font: bold 0.8em/0.8 verdana, sans-serif; content: '\2212'; /* math operators minus sign */ } /*** Collapsed h2 ***/ #DeltaPlaceHolderMain h2.expand:before { content: '\2b'; /* basic latin plus sign */ } </style> </head><body> <div id="DeltaPlaceHolderMain"> </div> Vishnu754Views0likes0CommentsStyling HTML Message from Graph in Teams
Hi, Is there any guidance or recommended CSS styles that can be used when posting HTML messages to Teams via the Graph API? We are running into issues trying to make a message pleasing but also work in the different available themes on multiple devices. We found a color scheme that worked for light and dark in the client/browser version but it is not being respected in iOS. thanks, MarySolved5.8KViews0likes1CommentSet width for `PivotItem` in Office UI Fabric
I am using Pivot and PivotItem from Office UI Fabric to display my content in tabs. Currently when the tab renders, all the tabs are left aligned. I need to display the tabs with equal width so that they occupy the 100% width of the page. Below is the code for Pivot. <Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} styles={pivotStyles}> <PivotItem headerText="Foo"> <Label>Pivot #1</Label> </PivotItem> <PivotItem headerText="Bar"> <Label>Pivot #2</Label> </PivotItem> <PivotItem headerText="Bas"> <Label>Pivot #3</Label> </PivotItem> <PivotItem headerText="Biz"> <Label>Pivot #4</Label> </PivotItem> </Pivot> Below is the code that I could figure out to add styles to Pivot. But we do not have styles attribute for PivotItem. const pivotStyles:IPivotStyles = { link: {}, linkContent: {}, linkIsSelected: {}, text: {}, icon: {}, count: {}, root: { //background: DefaultPalette.greenDark } }; How can I apply style to PivotItem so that I can add width to it?2.2KViews0likes0CommentsList View Format Stopping at 10 items
I am trying to implement the Profile Card view (https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/profile-card) onto a list of people with about 100 items. However, when I apply it it only loads the first 10 items. It works okay if I remove the float:left but then I just have one long column, which is not what I'm going for. Has anyone else experienced this? I'm not a CSS master unfortunately. Here is a shortened version: { "schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>", "hideSelection": true, "hideListHeader": true, "rowFormatter": { "elmType": "div", "style": { "display": "flex", "flex-wrap": "wrap", "flex-direction": "column", "align-items": "center", "justify-content": "space-around", "min-width": "300px", "min-height": "200px", "border-radius": "8px", "margin-right": "10px", "margin-bottom": "10px", "box-shadow": "2px 2px 4px darkgrey" }, "attributes": { "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover" }, "children": [ { "elmType": "div", "children": [ { "elmType": "img", "style": { "display": "block", "height": "auto", "max-height": "96px", "max-width": "96px", "border-radius": "50%" }, "attributes": { "src": "= @currentWeb + '/_layouts/15/userphoto.aspx?size=L&accountname=' + [$Person.email] + '&UA=0&size=HR48x48'", "title": "[$Person.title]" } } ] }, { "elmType": "div", "style": { "text-align": "center" }, "children": [ { "elmType": "div", "style": { "font-weight": "500", "font-size": "1.5rem" }, "txtContent": "[$Person.title]" } ] } ] } }1.4KViews0likes3Comments