Mobile friendly CSS tab functionality

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

edited Nov 17 '18 at 12:41

Bhandari

142213

asked Nov 17 '18 at 12:35

Niel 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 |

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

edited Nov 17 '18 at 12:41

Bhandari

142213

asked Nov 17 '18 at 12:35

Niel 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 |

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

edited Nov 17 '18 at 12:41

Bhandari

142213

asked Nov 17 '18 at 12:35

Niel 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

edited Nov 17 '18 at 12:41

Bhandari

142213

asked Nov 17 '18 at 12:35

Niel Buys

167

edited Nov 17 '18 at 12:41

Bhandari

142213

asked Nov 17 '18 at 12:35

Niel 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

asked Nov 17 '18 at 12:35

Niel Buys

167

asked Nov 17 '18 at 12:35

Niel Buys

167

asked Nov 17 '18 at 12:35

Niel 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 |

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

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 |

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');
});

Post as a guest

Name

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

Name

Required, but never shown

0

active

oldest

votes

0

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk