CSS Tabs with Textarea - Click in textarea causes strange behavior with scrollbars in container
Hello, all.
I have been banging my head to resolve an issue.
In this portion of my code.
.tabs .tab-content {
width: 95%; /*% causes scrollbars at the bottom*/
/*width: 500px;*/ /* also causes scrollbars */
}
Here is the demo page of the issue.
https://ee.cffcs.com/Tabs/9-5.asp
(All code is visible through right-click and view source, nothing hidden)
If you click on the [HTML] Button
Then click on the textarea, and the scrollbars appear at the bottom.
And the scrollbar will scroll far past the textarea.
Any ideas on how to resolve this issue?
Thanks, Wayne
Scott Fell
What browser are you on? The only way I could get a scroll bar is to the right by adding a lot of lines of text. No scrollbars on the bottom though.
Keep in mind that when you add borders like you have for the .tabs .tab-content in green and the .wrapper and I think the text area, your calculations need to be adjusted for fitting one element inside of another.
One issue I did see is when the browser is narrowed like a phone, the HTML button gets hidden.
The reason is you have that part in your .wrapper and then the rest is inside of .tabs. Typically you would put everything inside the .wrapper except sometimes you may see people adding separate wrappers for each of the header, main content and footer. All three having the same class will put all the child content in the same position.
The reason is you have that part in your .wrapper and then the rest is inside of .tabs. Typically you would put everything inside the .wrapper except sometimes you may see people adding separate wrappers for each of the header, main content and footer. All three having the same class will put all the child content in the same position.
You do not have a complete web page. With no DOCTYPE, rendering is not predictable. The DOCTYPE specifies the rules for rendering. Also the <html>, <head>, and <body> sections need to be there to make it all act predictably. This is the minimum for a complete web page:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>ASKER
Sorry guys.
Should have made it clear what I was experiencing.
This is a video demonstrating the issue.
Dave, This is a demo, so it does not matter if the HTML is wrapped.
This issue happens on my main project site and it is HTML Compliant.
This code is actually stripped out of that site to try and correct the issue.
Issue-with-Scrollbar.mp4
Should have made it clear what I was experiencing.
This is a video demonstrating the issue.
Dave, This is a demo, so it does not matter if the HTML is wrapped.
This issue happens on my main project site and it is HTML Compliant.
This code is actually stripped out of that site to try and correct the issue.
Issue-with-Scrollbar.mp4
ASKER
Scott, the issue with the phone and the page, is only due to the demo.
I only created it for this main issue, not for working on everything, at least, not right now.
I only created it for this main issue, not for working on everything, at least, not right now.
Earlier today I was using Google Chrome on Windows 10. Now I am on Google Chrome on a Mac and can not recreate the issue in your video.
What happens if you go back to that article https://css-tricks.com/functional-css-tabs-revisited/ and use the code as is? do you get the same issue?
ASKER
Out of everything I've tested, it still shows the scrollbar at the bottom, as demonstrated in the video.
The revisited code shows the scrollbar as well when the textarea is added.
It will NOT show if I have the width of the textarea either
UP TO - width:233px or width:29%;
Anything from and over width:234px; or width:30%;
Will show the scrollbars when the textarea is clicked in.
This is downright bizarre.
The revisited code shows the scrollbar as well when the textarea is added.
It will NOT show if I have the width of the textarea either
UP TO - width:233px or width:29%;
Anything from and over width:234px; or width:30%;
Will show the scrollbars when the textarea is clicked in.
This is downright bizarre.
ASKER
This fixed the issue in the revisited code and with the scrolling tab code.
Only showing what was editing to make work.
However, the issue still exists in the design code.
So, still working on it.
But, does work correctly in Edge.
Only showing what was editing to make work.
.tabs .tab-content
{
width: 80%;
}
.tab-content, #HTMLCode {
width: 95%;
}However, the issue still exists in the design code.
So, still working on it.
But, does work correctly in Edge.
Did you try going back to the original article? I am thinking you have pieces of what you found at what you show in your css
https://css-tricks.com/functional-css-tabs-revisited/ Updated code by Dan Bray https://stackoverflow.com/a/46046436/2031172
https://jsfiddle.net/63pfz23s/
The stack overflow link was asking about adding scroll bars underneath.
What I suggest is to use a grid/component system like https://getbootstrap.com/ or https://get.foundation/ or https://tailwindcss.com/ Like the old debate of vhs vs beta, ,bootstrap is the vhs and most widely used. All will have a short learning curve, but after that, you will wish you used it all the time previously. It makes building everything easier because you are not starting from scratch each time and reinventing the wheel.
I personally have been using KendoUI lately and there is a tab component there as well https://demos.telerik.com/kendo-ui/tabstrip/index There is an open source, free version https://www.telerik.com/open that has the majority of the components available.
Overall, I think using bootstrap is the best option. It is free and widely used. The grid will prevent the types of issues you are experiencing and the tabs component is there. The downside is you will have a couple of weeks of frustration but like I said, you will kick yourself for not getting into it sooner.
https://css-tricks.com/functional-css-tabs-revisited/ Updated code by Dan Bray https://stackoverflow.com/a/46046436/2031172
https://jsfiddle.net/63pfz23s/
The stack overflow link was asking about adding scroll bars underneath.
What I suggest is to use a grid/component system like https://getbootstrap.com/ or https://get.foundation/ or https://tailwindcss.com/ Like the old debate of vhs vs beta, ,bootstrap is the vhs and most widely used. All will have a short learning curve, but after that, you will wish you used it all the time previously. It makes building everything easier because you are not starting from scratch each time and reinventing the wheel.
I personally have been using KendoUI lately and there is a tab component there as well https://demos.telerik.com/kendo-ui/tabstrip/index There is an open source, free version https://www.telerik.com/open that has the majority of the components available.
Overall, I think using bootstrap is the best option. It is free and widely used. The grid will prevent the types of issues you are experiencing and the tabs component is there. The downside is you will have a couple of weeks of frustration but like I said, you will kick yourself for not getting into it sooner.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I always say, there are many ways to the same visual experience.
Typically, you see HTML for tabs more like below. This one is from w3schools https://www.w3schools.com/howto/howto_js_tabs.asp. This is similar jquery tabs https://jqueryui.com/tabs/ or bootstrap https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior and same with kendoui. I suspect that the issue you had with bootstrap orignally is like most others, the learning curve of using bootstrap and updating perhaps how you are used to working with something new. It sure tripped me up at the start and I see it does others too.
On your solution, you should adjust the width of the tab area because I am getting a scroll https://jsbin.com/lakevigisu/edit?html,output
Typically, you see HTML for tabs more like below. This one is from w3schools https://www.w3schools.com/howto/howto_js_tabs.asp. This is similar jquery tabs https://jqueryui.com/tabs/ or bootstrap https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior and same with kendoui. I suspect that the issue you had with bootstrap orignally is like most others, the learning curve of using bootstrap and updating perhaps how you are used to working with something new. It sure tripped me up at the start and I see it does others too.
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>On your solution, you should adjust the width of the tab area because I am getting a scroll https://jsbin.com/lakevigisu/edit?html,output