CSS Iframe problems with width and scroll

2018-03-13 20:22 Mintendo imported from Stackoverflow

I have some problems in IOS devices with an iframe inside a modal. The modal should be (only in mobile devices) fullscreen and also the iframe. This last should to be scrollable in y axis but not in x. The content of iframe is rendered by javascript by a data-attribute. If I removed the width: 0 on iframe, the scroll works but the iframe isn't responsive. Instead, if I insert width: 0 the iframe is responsive but the scroll bar not showing

<!-- Modal Editorial -->
<div class="modal modal-iframe" id="modal-editorial">
    <span class="close cursor">&times;</span>
    <div class="row">
        <div class="ten offset-by-one columns">

            <div class="modal-content">
                <iframe src="javascript:void(0)" frameborder="0"></iframe>
            </div>

        </div>
    </div>

</div>
<!-- /Modal Editorial -->

<style>
.modal-iframe .modal-content iframe {
    width: 100%;
    height: 100vh;
    background-color: #fff;
}

@media screen and (max-width: 450px) {
    .modal-iframe {
        padding-top: 0;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .modal-iframe .modal-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .modal-iframe .modal-content iframe {
        width: 0px;
        height: 0px;
        max-height: 100vh;
        max-width: 100vw;
        min-height: 100vh;
        min-width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
    }
}
</style>

See also questions close to this topic

How to make a link that is not the focus looked faded?

So I have two html forms that are combined into one view and can be selected through tabs (I'm using bootstrap panel-tabs to accomplish this). I was wondering how to via css if possible make the inactive tab link look faded and then when you click on it and it becomes the focus the other tab becomes faded.

HTML:

<div class="col-12 col-sm-6 form card z-depth-3">
    <div class="panel with-nav-tabs panel-default">
        <div class="panel-heading">
            <ul class="nav nav-tabs">
                <li class="active find-pad-border"><a href="#findPartTitle" data-toggle="tab" class="find-tab"><h4>Find a participant</h4></a></li>
                <li class="find-pad"><a href="#findTeamTitle" data-toggle="tab" class="find-tab"><h4>Search for a team</h4></a></li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane active" id="findPartTitle">
                    <div>
                        <form id="findFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
                            <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode" value="basic">
                            <input type="hidden" name="fr_search_type" id="fr_search_type" value="participant">
                            <input type="hidden" id="fr_id_participant" name="fr_id" value="[[S334:fr_id]]">
                            <input type="hidden" id="pg" name="pg" value="pfind">
                            <input type="hidden" id="submit" name="submit" value="true">
                            <i>First Name</i>
                            <input class="form-control" type="text" size="20" name="searchFirstName" id="searchFirstName" maxlength="50">
                            <br />
                            <i>Last Name</i>
                            <input class="form-control" type="text" size="20" name="searchLastName" id="searchLastName" maxlength="50">
                            <br />
                            <button class="btn btn-yellow" id="fr_find_search" name="fr_find_search" value="Search" type="submit">Search</button>
                        </form>
                    </div>
                </div>
                <div class="tab-pane fade" id="findTeamTitle">
                    <div>
                        <form id="teamFindFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
                            <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode_team" value="basic">
                            <input type="hidden" name="fr_search_type" id="fr_search_type_team" value="team" size="" />
                            <input type="hidden" id="fr_id_team" name="fr_id" value="[[S334:fr_id]]" />
                            <input type="hidden" id="teamPg" name="pg" value="pfind" />
                            <input type="hidden" id="teamSubmit" name="submit" value="true" />
                            <i>Team Name</i>
                            <input class="form-control" type="text" size="20" name="searchTeam" id="teamSearchTeam" maxLength="50">
                            <br />
                            <button class="btn btn-yellow" id="fr_find_search_team" name="fr_find_search" value="Search" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.panel.with-nav-tabs .panel-heading {
    padding: 5px 5px 0 5px;
}

.panel.with-nav-tabs .nav-tabs {
    border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
    margin-bottom: -1px;
}

.find-tab {
    text-decoration: none !important;
}

li.find-pad-border {
    padding: 5px;
    border-right: solid 1px #eeeeee;
}

li.find-pad-border:hover {
    background-color: #eeeeee;
}

li.find-pad{
    padding: 5px;
}

li.find-pad:hover {
    background-color: #eeeeee;
}

li.find-pad:inactive {

}

I thought maybe :inactive was a real thing, turns out it's not lol. I've added a screen shot so you know what the search form looks like.

Hoping someone can give me some direction. Please let me know if there are additional information you need that I have over looked!

Thanks!

CSS Keyframes fade in HOLD and fade out

Whats a simple way to fade in, HOLD for a few sec, and fade out. Code here fades in nice, just not sure how to hold.

HTML

<div class="arrow_case"></div>

CSS

.arrow_case {
   width: 100%;
   height: 20vh;
   opacity: 0;
   animation-delay: 1s;
   -webkit-animation: arrowInOut 4s linear forwards;
   animation: arrowInOut 4s linear forwards;
}

@-webkit-keyframes arrowInOut {
   0%,100% {opacity: 0;}
   50% {opacity: 1;}
}
@keyframes arrowInOut {
   0%,100% {opacity: 0;}
   50% {opacity: 1;}
}

Also would like a few sec delay before it starts.

Thanks!

vertical align in inline-block list grid layout
I have tried to put vertical align middle in list (li tag) which has display inline-block.But images are not aligned middle.

When I tried to give same height "li" and inner section middle. Its not working.

My issue:

My CSS:
```
.home_page_list .woocommerce ul.products li.product {
    display: inline-block;
    text-align: center;
    width: 24%;
    vertical-align:middle;
}
```
My link: Click here

Related questions

CSS Iframe problems with width and scroll

See also questions close to this topic