Angular material tabs: wrong positioning in safari - safari

I am using angular material tabs. I have 3 tabs and a headline above them. It works fine in firefox and chrome but not i safari, where the headline gets positioned on top of the tabs instead of above them. Does someone know why this happens and how I could solve it?
Firefox and chrome:
Safari:
Thanks!

I found the fault in our code. The text (headline) was in a column that was in a column, that had flex="100". Apparently Safari does not like columns in columns while Chrome and Firefox can handle it fine.
When changing one of the columns to a row the positioning worked in safari.

Related

finding elements in edge and IE with selenium java based

i try to find elements in edge or IE and it look like that these two browsers are not working with Xpath, more over, i tried to launce my automation in parallel with cheome, IE, Edge, and in Xpath its not working at all (just in chrome it works) but when i change it to css.. it start working
second thing that i noticed that at the CTRL+F while looking for elements, its not highlighted like in chrome
so is there any way to work with xpath? also, it can be that elements in chrome are not the same in edge or IE with css for example? and if so, how can i run in parallel test with that browsers?
This xpath should work in all browsers:
"//foo[contains(#bar,'xy')]"
"//a[contains(#href,'xy')]"

Datatable layout is messed up in Firefox

I am using Datatables and I am having an issue with the layout in Firefox. How do I fix my datatables. The select box is pushing my table to the side. The tables work fine in Chrome and Safari, just an issue with FF. Thanks for your help.

Dojo - ScrollingTabControllerMenuButton freezes TabContainer in Firefox

I recently by accident found an issue I have with a web application I have made entirely with dojo.
I have a TabContainer and a toolbar with buttons and each button adds a Tab in the TabContainer.
Each of these new Tabs has as children, created programmatically, one or more of the following BorderContainers, ContePanes, Editors, FilteringSelects, Uploader and Buttons. I should point out that I do not have parseonLoad: true byt false and I call manually the parsers.parse when required. I should point out that in the ContentPanes in the content attribute I put also declarative filteringSelects and ValidationTexts and Uploader I hope that is not a problem.
Everything is working great in all browsers even in IE9 besides one thing in Firefox 12.
When I create many new tabs and the ScrollingTabController gets created (The left/right and dropdown arrows of the tabstrip) when I use the ScrollingTabControllerMenuButton (the down arrow at the far right) the TabContainer behaves wrongly and eventually freezes. Firebug shows weird errors when I select different tabs via this menu of the tab strip. Errors of the buttons that I have in these tabs, weird errors mentioning StackController or ScrollingTabController
[ e.g.
button is undefined
if(this._selectedTab === button.domNode){ StackController.js (line 222) ]
different each time...
This weird behavior only happens in Firefox. IE9 and Chrome do not have any issue at all!
Could anyone have an idea on what might be the problem? Is it a known bug? Is it a problem that I have many widgets in each Tab ?
It seems that it is indeed a browser specific bug and as I was told it should be fixed in the following releases
I first reported it to the dojo community and from there they reported it to the Firefox team
http://bugs.dojotoolkit.org/ticket/15496

contenteditable nested browser differences

From what I read, there are quite a few browser differences in how contenteditable elements are handled. (i.e. link). When a 'contenteditable=true' element contains a 'contenteditable=false' element, the 'contenteditable=false' element can still be removed with a backspace. Firefox won't let you do that, but it is considered a bug link. Is there a cross-browser way to keep elements in a contenteditable container from ever being removed or modified?
May be Medium.js will be helpful, but that depends on what's your purpose of using contenteditable. At least they say "Medium.js is html5 compliant and has been tested in Firefox, Chrome, Safari, Opera, & IE8+. Browser support is constantly improving!" They have some demos with "widgets" (that's how they call insets with contenteditable="false") on the main page.

Extra padding in Chrome and Safari

Safari and Chrome seem to be adding extra padding/margins in regards to the text within the boxes at one of the pages within my website. What can I do to make it appear the same way it does in Firefox and IE?
You have an orphaned closing </p> tag after the link in .boxes. Chrome/Safari add an opening tag; Firefox/IE simply ignore it. You should remove the tag.