I am working on a page where there are two rows in the header.
The first row has a "My Account" icon, Company Logo, and Logout.
The second row has a navigation bar.
When the Focus Ring/Focus Indicator highlights an item on the first row, the bottom of the focus ring is cut off by the navigation bar in the second row.
I am not allowed to change the spacing of the elements on the DOM.
Is there a way I can change the layering so that all of the elements on the page are not changed in size or location, but the Focus Ring is not cut off by the navigation bar?
The site built with React.
I've tried googling a number of things, but haven't turned up much specific to this issue.
I'm a little new to programming (my first job, first year). I'm not totally sure where to even start.
You are looking for z-index. The second element is positioned in front of the first element and so it covers the focus indicator.
This allows you to specify how far 'forward' elements are on the page.
Assuming nothing is using fixed or absolute position within the <div>s you are working on this should solve your issue.
i.e.
<div class="container">
<div id="behind" z-index="1"></div>
<div id="infront" z-index="0"></div> <!--The z-index is not really needed here so try without it first, it is to illustrate that the item in front at the moment should have a lower z-index than the one at the back-->
</div>
You may need to play with the z-index in order to get this to work (you can go to 999999 without a problem, but try and use as low a number as possible).
You may also have to fiddle with heights of elements if the site is poorly designed but without a code example I can only offer general advice and gotcha's
Without a code example it is difficult to suggest a solution, but it sounds like your two rows are overlapping, and thereby hiding part of the focus indicator.
Three different solutions come to mind,
Change the height and placement of the two rows to avoid the overlap in the first place
Try using the CSS z-index property to control which element is rendered foremost
Using the CSS outline-offset property, with a negative value, i.e. -5px, to shrink the focus indicator and hopefully making it visible
Related
What is the best way of showing a very long text (in MBs) using ui-scroll ? The text is available in the form of an array but needs to be displayed as a long text document just like a textarea. I'm using ui-scroll as each word in the text is a clickable anchor tag.
Is ui-scroll-td to display each word as a column and lines as row the only way ?
More Information
I have a large array containing > 2000 elements (words) which can be
changed by user dynamically (both the number of elements and the
element itself).
I need to display these elements as a single document where each element (word) is a hyperlink which when clicked performs certain action.
I need it to look like a simple scrollable div which has these words displayed as long free flowing clickable text.
I was using $compile earlier to create html dynamically but the initial compile time and the compile upon element change is very significant (seconds) as I have to compile/render the whole list of elements every single time.
So I thought of using ui-scroll to display which virtualizes and renders only the displayed content.
But ui-scroll always display each element in a separate line like a row which is not the desired behavior for my use case.
Input:
myList = ["Hello", "World", "This", "is", "my", "first", "dream"].
desired Output (each word in same line with auto wrap just like a div):
<div>
<span ng-repeat="w in myList">
<a ng-click="someAction()">myList[$index]</a>
</span>
</div>
Hello World This is my first dream
ui-scroll:
<div>
<span ui-scroll="at in info">
<a id="at-{{$index}}" ng-click="someAction($index, $event)">
myList[$index]}}
</a>
</span>
</div>
ui-scroll output (each word in separate line):
Hello
World
This
is
my
first
dream
Kindly note that each word above is a clickable anchor.
Thanks.
Unfortunately, this is completely impossible with the angular-ui-scroll as it does not support inline/floating elements. There were some attempts to implement this feature in 2015, but now it seems frozen forever.
Infinite approach
The case you are developing is very interesting. As a possible workaround I would advise to try "infinite" approach instead of "virtualizing" one. Infinite scroll could be implemented with no additional libraries, the idea could be broken into following steps:
add N words into the viewport initially
if viewport's scrollHeight === clientHeight, add N more words; make a loop until the scrollbar appears
listen for viewport's scrollTop changing, invoke following when scroll happens
if scrollTop + clientHeight === scrollHeight add N more words; also in a loop until the height of the viewport (scrollHeight) increases or until words are over
This should drastically reduce the cost of the initial render, but since the elements out of the view are not being destroyed, the overall performance will decrease per each new elements injection.
Virtualization
After the "infinite" approach is implemented, I think you may try to turn this particular infinite scroll case into virtual one. Let's think what might be required. First, you'll need two additional elements, say, top and bottom padding elements, which will emulate virtual words. Then you will need to extend the last step of the "infinite" approach by following:
look into the opposite direction and find the first element that is visible in the viewport; this could be done in multiple ways (here and hundreds of other links)
remember scrollHeight, clip off all the elements before the found one, set the height of the top padding element into remembered value to make the the result scrollHeight the same as before clipping
depends on the environment/requirements you also might need to correct scroll position as it might jump up during clipping; I would like not to discuss back-jumping here, just be happy with the default overflow-anchor behaviour (though you'll have to forget about Edge and other sad guys)
the condition scrollTop + clientHeight === scrollHeight in our handler (say, "if we are at the very bottom") should be reconsidered as we may have non-zero bottom padding element; so it should be like "if we are at the very bottom OR if the bottom padding element becomes visible"
if the condition above is fulfilled, you need to add N words again and again until the bottom padding becomes invisible again, and each injection should be accomplished with decreasing of the bottom padding element's height by the value the viewport's scrollHeight is increased with; and only the edge case when "we are at the very bottom" will cause the irrevocable increasing of the viewport's scrollHeight
This way we will properly cover downward scrolling. You obviously will need to take into account upward scrolling and run the similar procedure when "the top padding becomes visible OR we are at the very top". Also the "we are at very top/bottom" and "element becomes visible" conditions could be extended with some UX-friendly deltas, say, "we are almost at..." and "the element is almost visible".
I don't think this plan covers or should cover all possible edge cases and requirements, it's just an idea how this could be done from scratch, and my guess is it's the only way you have, I mean the complete implementation by yourself. I would be happy if I'm wrong and would love to look at someone's ready-made solution.
I have a RichEditControl with a given width and height. It's usually a one page document, but sometimes documents can get longer than that. When that happens, the RichEditControl adds a page to it underneath the current one, and a vertical scroll bar to navigate both.
Is there a way to make the document show only one page at a time, so I see Page 1 by default until I write enough to get a page jump, and then I only see page 2 in screen?
This would probably require some sort of pagination, which I imagine is not built-in, so my derived question is:
Since there is no ability to re-size control based on content size (source), would it be better to just count the number of pages, and make the RichEditControl height a multiple of that number? Since this is all inside a bigger ScrollViewer, I'm trying to avoid more inner scroll bars.
I've been playing around with Zurb Foundation to evaluate it's suitability for my next project. I stumbled upon a characteristic I'm not comfortable with when resizing the width of the browser so I'd like to confirm if there is any way to do it.
Say I have a grid with four images ('columns') per row. As I shrink the width of the browser window my natural expectation would be that the amount of images would shrink down to first three, then two and finally one image per row as the width reduces.
But instead what Foundation seems to do is shrink the divs as much as it can to keep the four columns per row and as it runs out of space to have four it jumps right down to one image per row directly.
This behavior to me is not logical so I assumed there must be a way to do it, but going through http://foundation.zurb.com/docs/grid.php I wasn't able to find a way to do it either with divs or block grids.
I sort of assumed this would be 101 functionality of responsive grids, but I don't have much experience on these css frameworks. So do I have to start writing my own media queries instead to achieve such gradual decrease with amount of columns per row?
Thanks!
I was also having same problem and that's how I found this entry.
I know this has been answered already and solved but I just wanna share my answer.
Block Grid works for me. http://foundation.zurb.com/docs/components/block_grid.html
See Advanced section
In my HTML, I just added the classes to specify how many items I want per row on different screen sizes, like this:
<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3">
<li>
<img src="images/sample1.jpg" width="640" height="480">
</li>
<li>
...
</li>
</ul>
Here, I want 1 item to be displayed in small device, 2 in medium, and 3 in large devices per row. I enabled the "foundation/components/block-grid" in _app.scss. And it worked! :)
Foundation does not force the content to be responsive or fluid, but the grid itself is. It's fluid down to a certain point where the 12 column grid collapses to the mobile grid. (assuming default grid setup)
However, you can get the behavior you are looking for by simply making your all images floating left inside a column.
Like:
img {float:left; width:24%;}
Then try adding min- and max-width to fit your needs.
img {float:left; width:24%; min-width:100px; max-width:300px;}
my problem is the following:
I've got a grid of containers. When you hover one of them, a child element(absolutely positioned) is popping up. I gave this child element a z-index of 100, and everthing works fine. Except in IE7, where img-elements of the parent container lie above the popup.
Now I know that you can give the parent element a higher z-index than the popup to avoid this problem. In my grid layout, this doesn't work, because there are several parent-container over which the popup is floating. Applying this technique, every container lies in front of the popup, even in modern browsers.
Here is a simple sketch of the situatuion:
How can I solve this problem?
Setting a z-index on a div is actually supposed to create a stacking context, not simply bring the div, it's applied to, above another.. so while I do think IE7 didn't get it quite right, (surprise!)
I think it would be better to make the oner divs the ones that create the start of the stack by setting the z-index on them, and what you want it for the first oner to have a higher z-index than the second
I have a Silverlight datagrid with custom code that allows for +/- buttons on the lefthand side and can display a table with a tree structure. The +/- buttons are bound to a IsExpanded property on my ViewModelRows, as I call them. The visibility of rows is bound to an IsVisible property on the ViewModelRows which is determined based on whether or not all of the parent rows are expanded. Straightforward enough.
This code works fine in that if I scroll up and down the grid with PageUp/PageDown or the arrow keys, all the right rows are hidden and everything has the right structure and I can play with the +/- buttons to my hearts content. However, the vertical scroll bar on the right hand side, although it starts off the correct size and it scrolls through the rows smoothly, when I collapse rows and then re-expand them, doesn't go back to its correct size. The scrollbar can still usually be moved around to scroll through the whole collection, but because it is too big, once the bar moves to the bottom, there are still more rows to go through and it sort of jerkily shoots all the way down to the bottom or sometimes fails to scroll at all. This is pretty hard to describe so I included a screenshot with the black lines drawn on to show the difference in scrollbar length even though the two grids have the same number of rows expanded.
I think this might be a bug related to the way the Datagrid does virtualization of rows. It seems to me like it isn't properly keeping track of how tall each row is supposed to be when expansion states change. Is there a way to programmatically "poke" (read hack) it to recalculate its scrollbar size on LoadingRow or something ugly like that? I'd include a code sample but there's 2 c# files and 1 xaml file so I wanted to see if anyone else has heard of this sort of issue before I try to make it reproducible in a self-contained way. Once again, scrolling with the arrow keys works fine so I'm pretty sure the underlying logic and binding is working, there's just some issue with the row height not being calculated properly.
Since I'm a new user, it won't let me use image tags so here's the link to a picture of the problem:
http://img210.imageshack.us/img210/8760/messedupscrollbars.png
This is a known issue according to what I read today (and is apparently still an issue in the as-yet-unreleased Silverlight 4):
http://forums.silverlight.net/forums/p/153997/343790.aspx