Mobile friendly CSS tab functionality
1
I have successfully from examples created an CSS only tab functionality. The code works perfect on a pc screen, but on mobile the tabs go below each other and then they can't be pressed.
My CSS knowledge is limited to fix the problem. There is an "position: absolute;" div inside an "position: relative;" container.
If anyone can help change the code so the functionality can be affective on mobile also.
CSS for tab functionality.
.wietabs {
position: relative;
min-height: 600px;
clear: both;
margin: 25px 0;
}
.wietab {
float: left;
}
.wietab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
display: inline;
font-size: 14pt;
}
.wietab [type=radio] {
display: none;
}
.wietabcontent {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: auto;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
font-weight: bold;
}
[type=radio]:checked ~ label ~ .wietabcontent {
z-index: 1;
}
HTML for tab functionality
<div class="row-fluid">
<div style="min-height: 300px;" class="wietabs">
<div class="wietab">
<input type="radio" id="wietab-1" name="wietab-group-1" checked>
<label for="wietab-1">Tab1 Content</label>
<div class="wietabcontent">
<p>
Tab1
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-2" name="wietab-group-1">
<label for="wietab-2">Tab2 Content</label>
<div class="wietabcontent">
<p>
Tab2
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-3" name="wietab-group-1">
<label for="wietab-3">Tab3 Content Lang</label>
<div class="wietabcontent">
<p>
Tab3
</p>
</div>
</div>
</div>
</div>
JS Fiddle working example
html css
edited Nov 17 '18 at 12:41
Bhandari
142213
asked Nov 17 '18 at 12:35
Niel BuysNiel Buys
167
add a comment |
1
I have successfully from examples created an CSS only tab functionality. The code works perfect on a pc screen, but on mobile the tabs go below each other and then they can't be pressed.
My CSS knowledge is limited to fix the problem. There is an "position: absolute;" div inside an "position: relative;" container.
If anyone can help change the code so the functionality can be affective on mobile also.
CSS for tab functionality.
.wietabs {
position: relative;
min-height: 600px;
clear: both;
margin: 25px 0;
}
.wietab {
float: left;
}
.wietab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
display: inline;
font-size: 14pt;
}
.wietab [type=radio] {
display: none;
}
.wietabcontent {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: auto;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
font-weight: bold;
}
[type=radio]:checked ~ label ~ .wietabcontent {
z-index: 1;
}
HTML for tab functionality
<div class="row-fluid">
<div style="min-height: 300px;" class="wietabs">
<div class="wietab">
<input type="radio" id="wietab-1" name="wietab-group-1" checked>
<label for="wietab-1">Tab1 Content</label>
<div class="wietabcontent">
<p>
Tab1
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-2" name="wietab-group-1">
<label for="wietab-2">Tab2 Content</label>
<div class="wietabcontent">
<p>
Tab2
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-3" name="wietab-group-1">
<label for="wietab-3">Tab3 Content Lang</label>
<div class="wietabcontent">
<p>
Tab3
</p>
</div>
</div>
</div>
</div>
JS Fiddle working example
html css
edited Nov 17 '18 at 12:41
Bhandari
142213
asked Nov 17 '18 at 12:35
Niel BuysNiel Buys
167
The same happens in the fiddle when you make the output pane narrower. So what is your goal? What should happen on narrow screens?
– Mr Lister
Nov 17 '18 at 13:40
I am not sure what possibilities there are, I see 2 options in my mind. 1. The tabs is under each other and content is 100% 2. The tabs scroll and contents is 100%
– Niel Buys
Nov 17 '18 at 13:47
Have you tried implementing one of these?
– Mr Lister
Nov 17 '18 at 18:29
No success yet.
– Niel Buys
Nov 17 '18 at 20:00
add a comment |
1
1
1
I have successfully from examples created an CSS only tab functionality. The code works perfect on a pc screen, but on mobile the tabs go below each other and then they can't be pressed.
My CSS knowledge is limited to fix the problem. There is an "position: absolute;" div inside an "position: relative;" container.
If anyone can help change the code so the functionality can be affective on mobile also.
CSS for tab functionality.
.wietabs {
position: relative;
min-height: 600px;
clear: both;
margin: 25px 0;
}
.wietab {
float: left;
}
.wietab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
display: inline;
font-size: 14pt;
}
.wietab [type=radio] {
display: none;
}
.wietabcontent {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: auto;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
font-weight: bold;
}
[type=radio]:checked ~ label ~ .wietabcontent {
z-index: 1;
}
HTML for tab functionality
<div class="row-fluid">
<div style="min-height: 300px;" class="wietabs">
<div class="wietab">
<input type="radio" id="wietab-1" name="wietab-group-1" checked>
<label for="wietab-1">Tab1 Content</label>
<div class="wietabcontent">
<p>
Tab1
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-2" name="wietab-group-1">
<label for="wietab-2">Tab2 Content</label>
<div class="wietabcontent">
<p>
Tab2
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-3" name="wietab-group-1">
<label for="wietab-3">Tab3 Content Lang</label>
<div class="wietabcontent">
<p>
Tab3
</p>
</div>
</div>
</div>
</div>
JS Fiddle working example
html css
edited Nov 17 '18 at 12:41
Bhandari
142213
asked Nov 17 '18 at 12:35
Niel BuysNiel Buys
167
I have successfully from examples created an CSS only tab functionality. The code works perfect on a pc screen, but on mobile the tabs go below each other and then they can't be pressed.
My CSS knowledge is limited to fix the problem. There is an "position: absolute;" div inside an "position: relative;" container.
If anyone can help change the code so the functionality can be affective on mobile also.
CSS for tab functionality.
.wietabs {
position: relative;
min-height: 600px;
clear: both;
margin: 25px 0;
}
.wietab {
float: left;
}
.wietab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
display: inline;
font-size: 14pt;
}
.wietab [type=radio] {
display: none;
}
.wietabcontent {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: auto;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
font-weight: bold;
}
[type=radio]:checked ~ label ~ .wietabcontent {
z-index: 1;
}
HTML for tab functionality
<div class="row-fluid">
<div style="min-height: 300px;" class="wietabs">
<div class="wietab">
<input type="radio" id="wietab-1" name="wietab-group-1" checked>
<label for="wietab-1">Tab1 Content</label>
<div class="wietabcontent">
<p>
Tab1
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-2" name="wietab-group-1">
<label for="wietab-2">Tab2 Content</label>
<div class="wietabcontent">
<p>
Tab2
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-3" name="wietab-group-1">
<label for="wietab-3">Tab3 Content Lang</label>
<div class="wietabcontent">
<p>
Tab3
</p>
</div>
</div>
</div>
</div>
JS Fiddle working example
html css
html css
edited Nov 17 '18 at 12:41
Bhandari
142213
asked Nov 17 '18 at 12:35
Niel BuysNiel Buys
167
edited Nov 17 '18 at 12:41
Bhandari
142213
asked Nov 17 '18 at 12:35
Niel BuysNiel Buys
167
edited Nov 17 '18 at 12:41
Bhandari
142213
edited Nov 17 '18 at 12:41
Bhandari
142213
edited Nov 17 '18 at 12:41
Bhandari
142213
142213
asked Nov 17 '18 at 12:35
Niel BuysNiel Buys
167
asked Nov 17 '18 at 12:35
Niel BuysNiel Buys
167
asked Nov 17 '18 at 12:35
Niel BuysNiel Buys
167
167
The same happens in the fiddle when you make the output pane narrower. So what is your goal? What should happen on narrow screens?
– Mr Lister
Nov 17 '18 at 13:40
I am not sure what possibilities there are, I see 2 options in my mind. 1. The tabs is under each other and content is 100% 2. The tabs scroll and contents is 100%
– Niel Buys
Nov 17 '18 at 13:47
Have you tried implementing one of these?
– Mr Lister
Nov 17 '18 at 18:29
No success yet.
– Niel Buys
Nov 17 '18 at 20:00
add a comment |
The same happens in the fiddle when you make the output pane narrower. So what is your goal? What should happen on narrow screens?
– Mr Lister
Nov 17 '18 at 13:40
I am not sure what possibilities there are, I see 2 options in my mind. 1. The tabs is under each other and content is 100% 2. The tabs scroll and contents is 100%
– Niel Buys
Nov 17 '18 at 13:47
Have you tried implementing one of these?
– Mr Lister
Nov 17 '18 at 18:29
No success yet.
– Niel Buys
Nov 17 '18 at 20:00
The same happens in the fiddle when you make the output pane narrower. So what is your goal? What should happen on narrow screens?
– Mr Lister
Nov 17 '18 at 13:40
The same happens in the fiddle when you make the output pane narrower. So what is your goal? What should happen on narrow screens?
– Mr Lister
Nov 17 '18 at 13:40
I am not sure what possibilities there are, I see 2 options in my mind. 1. The tabs is under each other and content is 100% 2. The tabs scroll and contents is 100%
– Niel Buys
Nov 17 '18 at 13:47
I am not sure what possibilities there are, I see 2 options in my mind. 1. The tabs is under each other and content is 100% 2. The tabs scroll and contents is 100%
– Niel Buys
Nov 17 '18 at 13:47
Have you tried implementing one of these?
– Mr Lister
Nov 17 '18 at 18:29
Have you tried implementing one of these?
– Mr Lister
Nov 17 '18 at 18:29
No success yet.
– Niel Buys
Nov 17 '18 at 20:00
No success yet.
– Niel Buys
Nov 17 '18 at 20:00
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53351321%2fmobile-friendly-css-tab-functionality%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53351321%2fmobile-friendly-css-tab-functionality%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The same happens in the fiddle when you make the output pane narrower. So what is your goal? What should happen on narrow screens?
– Mr Lister
Nov 17 '18 at 13:40
I am not sure what possibilities there are, I see 2 options in my mind. 1. The tabs is under each other and content is 100% 2. The tabs scroll and contents is 100%
– Niel Buys
Nov 17 '18 at 13:47
Have you tried implementing one of these?
– Mr Lister
Nov 17 '18 at 18:29
No success yet.
– Niel Buys
Nov 17 '18 at 20:00