I'm trying to integrate the Material UI tabs (https://material-ui.com/demos/tabs/#centered), but I get a weird glitch on Safari 12.0.3, Chrome 73.0.36 and Chromium. The blue underline isn't shown at the right place until I click on one tab title:
The code is very simple and directly copied from the documentation:
https://gist.github.com/lcoenen/0f93bd2a2ae3fe9c76135d6b3d73d130
As you can see in the comments, I found a workaround by waiting a second, then setting the state to my default tab.
But is there a more elegant solution or should I create an issue on material-ui GitHub?
In my case the issue was related to a css used:
transform: scale(0.9);
if the scale is different from 1.0 then the tab indicator is at the wrong place...
Related
I am new to Wix and to be honest kind of confused if there is a way to add a horizontal bar in my website.
So I have a multistate box with different states so when you press a button it takes you to that state.
What I want to do, is to somehow fit these buttons in the mobile version. I have seen that there are some components called tabs which could do the trick because they come with a default horizontal scroll bar or arrows when the content does not fit. Is there any alternative or an actual component I can add to my buttons and fix that issue?
Thank you in advance!
I have created a component in my project that is purely an ion-slides UI component. I've injected into the main page of my side-drawer template app and I'm experiencing a number of issues/annoyances:
The content doesn't always center within the main pane. It seems as though the width of the individual ion-slide items all get set with an inline element style width that is greater than the pane width! I've realised that this only happens when the whole app is loaded. If I click on the side menu item of the page to reload it individually, the issue disappears. This leads me to believe it's an issue with the order that components are rendered. Can anyone help me understand what is happening? Is it a bug?
Undesired behaviour
I can't work out how to get navigation arrows to display/work - is this possible?
https://stackblitz.com/edit/angular-ionic4-test-yuppm1?embed=1&file=src/app/app.module.ts
The above Stackblitz should help to give you an idea of my setup but it doesn't show the problem I'm experiencing. It does show one other peculiarity though:
With loop set to true in the options, when you get to the last slide and you go to the next slide, it jumps to second element rather than the first! Any help on understanding why this is happening will be appreciated.
Thanks
I was having the same problem as this question:
jQuery Mobile 1.1.1 Custom Select Menu - Placeholder Text not Visible
The above question solved my problem by telling me to use 'http://code.jquery.com/mobile/latest/jquery.mobile.min.js'. That solved my original problem but caused another.
The select menu is always displayed and doesn't center on the select item like it did before.
After:
Does anyone know how to fix this. I think I might be able to hide and show the menu if that was the only problem that I was having, but even when selected it is not in the right position. It should be centered over the select element both horizontally and vertically (if given enough vertical space).
This is caused by the latest release of JQuery, but I also can't download 1.1.1 because it causes the original problem that I had which was solved in the other question.
Looks like the menu is displaying relative to the rest of the content - Try adding a css line on there
position:absolute;
on the menu structure - Another good way to test this would be to load up your site in google chrome and use firebug to see why the menu is positioning lower than the "click point." Just on glance it appears that the menu is appearing relative.
I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)
I am making a vertical Menu using GWT MenuBar and selection of particular MenuItem shows content on the right, I am trying to make something similar to TabPanel, but with Tabs on left instead of being on top. Now, since I've got the Menu items and actions in place, I want to remove the effect of hovering over and changing color, and keep that menu item selected which was clicked last and whose content is loaded on the right.
I am open to any comments, if you have a better solution to implement this, using some other components(with-in) GWT, please drop in a comment with your suggestions, I'll really appreciate that.
Or if you can just tell me how can I disable this effect, of hovering and sticking to only that selection, That would be awesome too..
Thanks to everyone, taking time to read this and suggesting a solution.
It's all defined in the CSS of your GWT's theme (probably the default one), so it's a matter of overriding those styles - make sure it's not the other way around :) Inspect the code with a tool like Firebug to see what's exactly being set and change that.