I am trying to use the Pivot component from the Office UI Fabric JS library but I have found that it does not have functionality to deal with link items overflow.
The documentation shows the overflow as ellipsis however this does not have any functionality behind it. It is just for presentation.
As anyone modified this component so that it automatically resize and show all the links correctly?
There is a known issue with the Pivot control. In order to get it to work, you need to override the overflow-x: hidden that is set in the default stylesheet. Adding the following to your page's CSS seems to fix it:
.ms-Pivot{
overflow-x: visible;
}
You'll also need to make sure you wire up the JavaScript for Pivot and Context Menu. This includes the script to swap the is-hidden and is-open classes when clicking on the ellipsis.
At the moment there isn't any automatic sizing of tab or automatically moving the overflowed elements into a context menu.
Related
What I am trying to do ?
I have a custom Menu in my app with some options (say 8 options)
Based on some logic I need to disable some options in the menu (say last 4 options)
If the user hovers over any disabled option, I need to show a popup explaining why the option was disabled
Issue :
Since the number of options in the menu are not known before-hand, the menu should be scrollable to accommodate for more options (if required)
However, the popup upon hovering on a disabled option should overflow the menu boundaries (if required)
This basically boils down to having overflow-x: visible and overflow-y: auto which is not possible as per the specs
Some of the posts that I referred use absolute positioning to get around this issue but that does not seem to help here
References :
How do I enable scrolling only in one direction in CSS?
Break out of overflow:hidden
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
I tried to create my dummy custom menu that reproduces the issue : https://codepen.io/adiltan/pen/BaJJzOb
I have tried using absolute positioning but I could not get it to work
A DOM method getboundingclientrect will solve this for you.
This method returns selected element's placement so you don't need to nest the tooltip inside your menu.
Make a wrapper that will contain your tooltips as direct child of body and give them placement you got from getboundingclientrect.
I am a paid user of the Ninja Slider responsive image slider script (CSS/Javascript) and it always has worked pretty well. Unfortunately, though, Google now is warning that it is causing an unacceptably large CLS (Cumulative Layout Shift) placed in a responsive layout. I am optimistic that someone on Stackoverflow has tweaked this code — or similar code — and can help.
This slider loads quickly enough on my connection that it is difficult for me to even see this shift, but I agree that any shift could be troublesome and I would like to fix it accordingly. Essentially, I would like to modify the code so it quickly outlines a dynamic box the size of the image that will be loaded before loading the image so the following text doesn’t shift down should the user scroll past and start reading before the first image in the slider loads.
In Google’s default Optimize Cumulative Layout Shift advice, the company recommends adding the width and height of an image — like in the pre-responsive days — and adding height: auto to the img code in CSS like so:
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
This works for images displayed directly in the dynamic layout, but not for images within the slider code because the images are not presented as an img tag, but instead presented as links (a href tags) within list items in an unordered list.
I nevertheless tried dutifully adding height: auto in the applicable CSS file where I thought it could be relevant, within the #ninja_slider div and slider-inner classes. This didn’t break anything, but it didn’t solve the issue, either. Default CSS code is here.
As requested, I believe this this the relevant code, but I could be wrong, and viewing the full code might be useful:
#ninja-slider {
width:100%;
background:#191919;
padding: 30px 0;
margin:0 auto;
overflow:hidden;
box-sizing:border-box;
}
#ninja-slider .slider-inner {
max-width:600px;
margin:0 auto;/*center-aligned */
font-size:0px;
position:relative;
box-sizing:border-box;
}
This post on StackOverflow is the only relevant one I was able to dig up, and the answer suggests that adding display: none on “blocks” using CSS classes would resolve the issue.
Based on my understanding of how display:none works, I assumed this would just prevent the slider from appearing, but I nevertheless tried adding it to the ninja_slider div as well as the slider_inner classes and ul and li elements. It did not work. My code is similar to the default, but if a live implementation is helpful, it is here.
What am I overlooking? How can I alter the slider code to quickly display a box that will soon hold the image so that subsequently placed text will remain in place and not be pushed down when the image loads? Thank you.
Your CLS score is essentially telling you that the layout is shifting as its loading. The best advice one can give in a situation like this is
Hit F12 on the page in question to open Developer Tools
Navigate to the network Tab
Set the Network Speed Select value to 3G
Refresh the page with Developer Tools still open to see a slow motion load of the page which allows you to identify Which elements are "shifting" the layout and changing size as page loads.
You want to be able to define all your element sizing early on in the head of the page using a style tag in the of that page or within the stylesheet (if you must,I believe putting too much inside the stylesheet and depending on things like grid sizes to load defeat this purpose due to sheer size of the css files eventually negates any positive or it wont be seen quick enough as the User is still waiting for the CSS File to load).
Using the above method you can then try to apply CSS that will prevent the Size Shifts , and example of this is with image attribute heights.
This is a tricky topic because you have to also understand CSS casscading (the understanding of style application heirachy essentially) to prevent causing new responsive image issues because the width and height attribute will most like override the current image styling on your page.
What I would honestly suggest is a click function that initates or accesses the slider on click only because the waiting of the entire slider to load and then it shifting the container to a different size is what is causing the actual problem.
TinyMCE floatpanels (mce-floatpanel) and tooltips (mce-tooltip) are set as children of <body> with position: absolute. I understand the necessity with regard to z-index etc, but it also creates a problem with scrolling in certain circumstances.
If TinyMCE is the child of a container which scrolls, the menus and tooltips become unmoored. For example:
A <div> with height: #px and overflow: auto → jsbin
A <div> with position: fixed → jsbin
I've seen the following two solutions suggested:
To specify the editor float elements' container, as in these TinyMCE issues:
Dropdown panel is not properly affixed
How to change floatPanel's parent?
To close or hide the menu by manipulating the DOM onscroll or onmouseleave etc, as in this SO answer
Specifying the editor container is seemingly not yet available.
The trouble with the second suggestion is twofold. First, it feels hacky and has hard to account for edge cases. Second, I'm using react.
The React component doing the scrolling is far up the hierarchy, with hundreds of descendants. Monitoring scroll from there with the onScroll SyntheticEvent works, but scroll event fires extremely rapidly, including during initialization as data loads into sub-components altering their size.
I don't know where to go from here. Any help is greatly appreciated.
It turns out specifying the UI container is somewhat available, as an undocumented feature, as requested in this bug and implemented in this commit. This is not the solution I hoped it would be, having various unexpected side effects and bugs.
At this point I'm considering bypassing React entirely and monitoring the DOM directly for scroll events from the TinyMCE wrapper.
Ionic Version: 1.x
Platform: all
I have an ionic app which uses an ionic popover. However, when the popover is active (open), I can no longer interact with things in the background, for example scroll down my list of items. I have tried looking for existing answers for this question, but did not see the question being asked.
The popover itself does not have to be bound to any active element on the page, since it currently has position:fixed and will always appear in the same position.
So basically the question is, is there a way to prevent the popover from preventing me interacting with everything in the background?
I found this codepen someone put up:
https://codepen.io/ionic/pen/GpCst
This may do the trick?
.popover-backdrop {
display:none;
}
I have found an answer, however, not sure if there is a better way to do this, perhaps an option that turns interacting with the background on and off, but for now the answer seems to be as follows:
Ensure the .popover-backdrop class is the same size and position (height and top margin in my case) as the actual fixed popover element. The default is height 100%.
Ensure that for the .popover-open class (applied to the body) you disable pointer-events: none;
Keep in mind that this will change the behaviour where if you click outside of the popover that it will close it by default. So in ionic, I will have to make sure that on the event where I leave the view that closes the popup if active.
I am trying to adjust the soundcloud embed widget but am having some difficulty. I would like to do two things:
1) Override the CSS for the div.sc-truncate ( overflow: hidden; white-space: nowrap ) which contains the text "Wanderlust Basement Tapes" but will currently not display the entire text due to the aforementioned text. I have added my own style to the site stylesheet with !important but they seem to have no effect which I think has to do with the widget being an iframe.
2) Force the widget layout proportions to show full song list by default. Normally this requires scrolling to the bottom of the list. Ex:
vs
I'm guessing that the proportions change after scrolling via some javascript but all the javascript being used by the widget is minified as far as I can tell and is thus difficult to analyze and/or modify. For this reason I am hoping that a developer of the widget will be able to recommend a possible method.
Thanks!
It's not possible to modify the styles of any page in an iframe from the containing document (including the SoundCloud widget).
Having it spread over two lines does look pretty fine in this case, but obviously title lengths of all sizes also need to be considered. I will pass on the request to investigate removing the truncation.