#StackBounty: #html #css #reactjs #iframe Layout Shrinking When The Page Has An Iframe

Bounty: 50

I have a React website (based on Next.js) for which I wrote a React component to embed Tweets. But when a page contains a tweet, the layout shrinks. I have figured out that it happens when there is an iframe on the page as the Twitter API loads an iframe.

I have no clue what is happening and why my viewport settings are not being respected.

Viewport

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"/>

Ideal Layout

Ideal layout

Shrunken layout (when there is a tweet on the page). Notice the toolbar and text size(s).

Shrunken layout

PS: The same thing happens, if I embed a YouTube video.


Get this bounty!!!

#StackBounty: #html #css #html5 Example of responsive webpage

Bounty: 50

So I’m doing a coursera asignment on a html-css course. The assignment is to do a simple responsive page, which can be found here.

I think I came up with a solution, but I ended up having around 100 lines for the stylesheet, so I suppose that there is some ways to achieve the desired layouts in a more intuitive and easy way. I want a little bit of feedback on what I can improve here.

* {
    font-family: "Comic Sans MS", cursive, sans-serif;
    box-sizing: border-box;
}

h1{
    text-align: center;
}


.sign_fs{
    position: relative;
    width: 50%;
    min-width: fit-content;
    padding: 5px 10px 5px 10px;
    border: 5px solid black;
    float: right;
    font-size: 20px;
    text-align: center;
    margin-top: -2px;
    margin-right: -2px;
}

#chicken {
    background-color: pink;
}

#beef {
    background-color: slateblue;
}

#sushi{
    background-color: skyblue;
}

@media (min-width: 992px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_fs {
        background-color: grey;
        border: 2px solid black;
        width: 31.2%;
        margin: 1%;
        float: left;
    }

}

@media(max-width: 992px) and (min-width:768px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_tablet_top {
        background-color: grey;
        border: 2px solid black;
        width: 48%;
        margin: 1%;
        float: left;
    }

    .div_tablet_bot {
        background-color: grey;
        border: 2px solid black;
        width: 98%;
        margin: 1%;
        float: left;
    }

    #sushi{
        width: 20%;
    }
}

@media (max-width: 768px) {
    section {
        margin: 10px;
        padding-top: 0px;
    }

    .div_mobile{
        background-color: grey;
        border: 2px solid black;
        margin: 1%;
        margin-top: 20px;
        padding: 10px;

    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 2 solution</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Our Menu</h1>
    <section>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="chicken">Chicken</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="beef">Beef</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>        
        <div class="div_fs div_tablet_bot div_mobile">
            <div class="sign_fs" id="sushi">Sushi</div>
            <div class="text_fs">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </section>
</body>
</html>


Get this bounty!!!

#StackBounty: #css #internationalization #page-flow How does CSS writing mode interact with page flow

Bounty: 50

The CSS Writing Modes Level 3 specification establishes logical terms such as "block dimension", which would be vertical for horizontal writing modes (as I’m writing now). Thus "block size" in Western writing would correspond to the physical dimension "height". I understand that part fine.

The specification also defines the "block flow direction" as "the direction in which block-level boxes stack and the direction in which line boxes stack within a block container", and says that the writing-mode property determines the block flow direction. So if Japanese were using a vertical-rl writing mode, the block flow direction would be horizontal (right to left). And elsewhere when discussing abstract dimensions, the specification defines "block axis" as equivalent to the vertical axis in Western right modes (on this page on which I’m writing, blocks flow vertically), and to the horizontal axis in vertical writing modes.

And this is where I’m not clear about the distinction (if any) between the writing mode logical axes and the overall page flow. Is the overall page flow layout (of the CSS box model) equivalent to the block flow determined by the writing mode?

Here is an example to illustrate my doubt. If there is a page written in Japanese vertically using the vertical-rl writing mode, the "block axis" is the horizontal axis. So does that mean the page flows horizontally? Rather than scrolling down, would a user scroll left to see the rest of the page? Consider a typical landing page with a "hero" at the top of the screen and then various sections below it, with a footer at the bottom. In the vertical-rl writing mode, would the user scroll left to see the sections under the hero?

I guess the question comes down to: is the overall page flow really equivalent to the block flow direction, or does ultimately the page always flow and scroll down regardless of the writing mode?


Get this bounty!!!

#StackBounty: #css #video #background-image #gif #background-repeat Position video and make it repeat in background like images

Bounty: 50

Is there a way to position a video that I put in the background of my html page and make it repeat as I would do with an image/gif using the background-* css properties? I’m sure this isn’t possible with the current version of CSS but maybe there is a way to do it with JavaScript. The video was originally a gif, and what I am trying to do works with a gif, but I converted it to a webm and mp4 to improve load performance and save bandwidth. Below is code of what I would do if my video was a gif and then there is code of what I have currently and want to replicate the code for "Video as Gif".

Video as Gif

body {
    background: url('https://media3.giphy.com/media/KZFrf9JusXzmpnPsT6/giphy.gif?cid=ecf05e47nlo6zhk89xm58aaee38kzq5tddoko195kri6hv0e&rid=giphy.gif') center center;
  background-repeat: repeat;
  position: relative;
  background-size: auto;
  overflow: hidden;
    width: 100%;
}
<html>
<body>
</body>
</html>

Gif as Video

#video-background {
    top: 0;
    left: 0;
  position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    overflow: hidden;
}
  <div id="video-background">
    <video aria-hidden="true" playsinline="" autoplay="" muted="" loop=""> <source src="//starlink.ua/media/mod_starlink/car-blur.webm" type="video/webm"> <source src="//starlink.ua/media/mod_starlink/car-blur.mp4" type="video/mp4"></video>
  </div>


Get this bounty!!!

#StackBounty: #css create a responsive grid where the elements occupy the available space to be located according to their size

Bounty: 50

With this code, I get the following result:

enter image description here

I want to know how I can make the container > divs fit into the available space, just like in this image:

enter image description here

how can I do it?

.container{
  display:flex;
  flex-wrap:wrap;
  border:3px solid black;
}

.container > div{
  margin:5px 15px;
}

.son1{
  border:1px solid red;
  width:400px;
  height:400px;
}

.son2{
  border:1px solid blue;
  width:250px;
  height:220px;
}

.son3{
  border:1px solid blue;
  width:200px;
  height:270px;
}
<div class="container">
    <div class="son1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum cum totam voluptates, molestias aliquid quod, placeat harum inventore assumenda sed itaque perferendis eligendi tempore ullam, incidunt qui. Hic, recusandae, iste.
  
  </div>
  <div class="son2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam porro, aperiam facilis, optio illum molestiae. Doloribus, dolores numquam voluptatum at quae ducimus pariatur! Esse ullam facere aperiam veniam error tempora!
  </div>
  <div class="son3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
  </div>
  
  <div class="son3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
  </div>
  
</div>

NOTE: this is my real problem, with this example I know that I can solve my problem

enter image description here


Get this bounty!!!

#StackBounty: #javascript #jquery #css #zoom #pinchzoom How to prevent Pinch IN Zooming of Image using Pinchzoom.js

Bounty: 50

So I have this scenario where I am using Pinchzoom.js library for zooming images. It is perfectly working and the library is very good. But I have a scenario where the PINCH IN gesture (on mobile) also makes the image zoom OUT. To see a working demo, you can refer to their working demo link. When you will PINCH IN, you will observe that the image zooms OUT but after the gesture has ended, it retains its original size. I wanted to ask if there is a way to disable this zooming out effect? My PinchZoom settings are as:

    Array.from(document.querySelectorAll('.myimages')).forEach(function (el) {
        new PinchZoom.default(el, {
            tapZoomFactor: 5,
            maxZoom: 10,
            use2d: true,
            verticalPadding: 1,
            draggableUnzoomed: false
        });
    });


Get this bounty!!!

#StackBounty: #javascript #html #css #iframe #scrollbar How to remove Iframe scrollbar but full page should load?

Bounty: 50

After adding Iframe inside contentArea, I am getting two scroll bars. I wanted to hide iframe scrollbar without hiding any content of external website link. How can I do that?
I added the below snippet code and tried couple of things like scrollbar="no" but didn’t work.
Help me on this and thank you in advance.

I need contentArea scrollbar. Just wanted to hide iframe scrollbar without hiding external website content.

body{margin:0;padding:0;}
.contentArea{height:100%; width:100%; position:absolute; top:0;left:0;overflow-y:scroll;}
iframe{height:100%; width:100%; position:absolute; top:0;left:0;border:0;}
<div class="contentArea">
https://ajaymalhotra.in
</div>


Get this bounty!!!

#StackBounty: #css #position #overflow Relative position and overflow auto

Bounty: 100

I have a problem with overflow: auto and position relative? Example of my code is:

div {
  border: 3px dashed #ccc;
  padding: 20px;
}

div::before { content: attr(class); }

.grandparent { overflow: auto; }
.parent { position: relative; }
.child { position: absolute; height: 60px; background: black; color: white; }
<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

I want the div.child go over div.grandparent but because of div.parent and his position: relative that causes overflowing.

Please note that I need to absolutely position elements inside .parent – the position being relative to .parent – (which is why I need position: relative here), and I also need a scrollable .grandparent.

Expected result:

enter image description here


Get this bounty!!!

#StackBounty: #html #css #angular-material #angular8 how to get active tab highlighted in mat-tab?

Bounty: 50

I am using angular material for angular development.

HTML Component

<mat-tab-group headerPosition="above" [selectedIndex]="1">
    <mat-tab label="Home" routerLinkActive="active-link"> <app-homer></app-home></mat-tab>
    <mat-tab label="Orders" routerLinkActive="active-link"> <app-order></app-order> </mat-tab>
    <mat-tab label="Contact Us" routerLinkActive="active-link"> <app-contact></app-contact> </mat-tab>
    <mat-tab label="Profile" routerLinkActive="active-link"> <app-profile></app-profile></mat-tab>
  </mat-tab-group>

CSS

.mat-tab-label{
    margin-top: 20px;
    border: 2px solid black; 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 10vw;
    height: 4vh !important;
    background-color: black;
    font-size: 12px;
    font-weight: bold;
    opacity: 1;
    color: yellow;
}

I have customized default tab which comes in white color by giving specific color and border as shown in the css.
When I load the page I am getting selected component but the tab is not active and looks like disabled. But If I click I can see the difference , the given highlighted color shows when I click it. Is there any way to make the tab look active on load.

in mat-tab-link routerLinkActive="active-link" was there but no such feature in mat-tab ?

I decided to go with mat-tag-group and mat-tab because of the animated screen loading feature.

stackblitz link


Get this bounty!!!