-
Notifications
You must be signed in to change notification settings - Fork 4.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Swipeable tabs showing half-page width #4148
Comments
I found this in materialize.css to be causing the problem: |
I just changed that width value you suggested to "100%" and it's now working. Haven't figured out how to correct the height value, though |
Exactly the same problem here. |
I managed to do like that: |
my solution for swipeable tabs in modal (jQuery): $('.modal').modal({
ready : function(modal, trigger){
// initialize tabs
$('ul.tabs').tabs({
swipeable : true
});
// remove materialize default 200px and 400px carousel height
var modalH = pixelsToNumber($(modal).css('height'));
var swipeH = pixelsToNumber($(modal).find('.tabs').css('height'));
var footerH = pixelsToNumber($(modal).find('.modal-footer').css('height'));
var carouselHeight = modalH -swipeH -footerH;
$('.modal .carousel').css('height', carouselHeight+'px');
$('.modal .carousel').css('overflow-y', 'auto');
}
});
var pixelsToNumber = function(pixels){
return Number(pixels.substring(0,pixels.length-2));
}; |
BugExpected behavior |
@donacross use the right markup and do not forget the wrappers https://codepen.io/anon/pen/KqapbE?editors=1000 |
that codepen shows the exact same problem as described by @donacross ... how is that a fix? |
if one replaces the content of the offical docs with something that has a big height it also get's truncated btw |
What exactly do you mean? He used the wrong markup. The codepen that I gave shows the expected behavior. |
in your codepen: paste 4 times the current text into the div for the tab. You'll notice the height is limited and no scrollbar appears. Try the same with the official demo and you'll see the same problem again. If the text is too long, it is hidden with no scrolling possible. One could use a height with xxx px, but if the content of the different tabs differs, than that is not an option, as it is for me on the site i'm currently trying to develop. check this: http://test.listoire.be/discipline/2 It seems my css skills are lacking, because i cannot trace the root of the issue. I've tried adding clearfix classes, setting pretty much everything to height 100%, adding overflow hidden to several elements, nothing works. The only thing that does work is using absolute px values for the height, but that is not an option. |
added overflow-y: auto which at least gave me a scrollbar. But it looks far too ugly and doesn't resolve the height issue, just a dirty hack atm. |
@DanielRuf Sorry for forgetting the IssueThe original issue was unfortunately not fixed. I guess it's what @Badlapje is trying to say too. The problem concerns the height of the inner carousel. It doesn't fit the size of the content, it's not vertically responsive, it's fixed to 200px. InvestigationFurther investigation shows that That's why Materialize sets the @triskill idea was to reset the carousel height based on its context but it still have some flaws. From my point of view, it's a design problem which leads to a dead in.
Solution
@DanielRuf Thank you for your time. Long live Materialize 🎉 |
@donacross thx for pointing out absolute positioning has height implications for the parent. I did not know this. |
Flexbox might be indeed a great solution in the near future and make such calculations / estimations in components obsolete. |
@DanielRuf Does legacy browser support prevents Materialize to move forward ? Flexbox support seems good enough. What should we do meanwhile ? |
IE is still a bit problematic. We could use flexbox for this component but keep a fallback for IE and other browsers. |
For Full Width For Auto Height Instead of 200px |
@atemiz that is definitely a much cleaner solution. Maybe we could add some classes for this. |
I stumbled across this issue as well and I figured I would leave my workaround here. The Problem: Having tabs with images will cause the tabs-content to be resized to the size of the image.
Example Notes:
|
Description
On my website I had some tabs in header. I just added {swipeable:true} to the tab init function, but now the tab divs are displayed not in full width.
The text was updated successfully, but these errors were encountered: