Semantic UI in Chrome Extension: issue when displaying in an iFrame

I'm currently working on a Chrome Extension and I'm using Semantic UI to build the interface. When the user activates the extension it will show a popup which is actually an iFrame. In this iFrame I have a table and I'd like this table to take the full width of the iFrame. The iFrame width is fixed (500px). The problem is because the iFrame is 600px the table is displayed as the device is 500px (makes sense since it's a responsive framework.

But I'd like to change this behavior and force the table to display as it would be on a desktop screen.

Today this is what I get

enter image description here
Now I'd like to obtain the following result (fake image :)

enter image description here

Here is the code of my iFrame

<!DOCTYPE html>

<html>



<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

  <script src="js/ext/jquery-3.3.1.min.js"></script>

  <script src="js/ext/semantic-2.4.2.min.js"></script>

  <script src="js/popup.js"></script>

</head>



<body>

  <div>

    <div>

      <table class="ui celled padded collapsing table">

        <thead>

          <tr>

            <th class="single line">#</th>

            <th>Event mapping</th>

            <th>Actions</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>

              1

            </td>

            <td class="single line">

              <div class="ui right action left icon input mini">

                <i class="search icon"></i>

                <input type="text" placeholder="Selector">

                <div class="ui basic floating dropdown button mini">

                  <div class="text">Identify</div>

                  <i class="dropdown icon"></i>

                  <div class="menu">

                    <div class="item">Page</div>

                    <div class="item">Track</div>

                  </div>

                </div>

              </div>

            </td>

            <td class="right aligned">



            </td>

          </tr>

        </tbody>

        <tfoot>

          <tr>

            <th colspan="5">

              <div class="ui left floated">

                <button id="btn-startcapture" class="positive ui button">Start capture</button>

              </div>

            </th>

          </tr>

        </tfoot>

      </table>

    </div>

  </div>

</body>

</html>

And the CSS style I apply to the iframe tag on the caller page

iframe.segmentizor-panel-iframe-toggle {

  left: calc(100% - 500px) !important;

}



iframe.segmentizor-panel-iframe {

    top: 0px;

    left: calc(100% + 10px);

    display: block;

    z-index: 2147483647;

    box-shadow: rgba(0, 0, 0, 0.25) 7px 0px 12px 13px;

    position: fixed !important;

    width: 500px !important;

    height: 100% !important;

    opacity: 1 !important;

    border-width: initial;

    border-style: none;

    border-color: initial;

    border-image: initial;

    transition: left 0.4s ease-in-out 0s !important;

}

Sorry if the question looks quite trivial. Still in the learning curve... Thanks for your help.

edited Nov 21 at 4:05

asked Nov 20 at 23:34

CyrillouPanam

276

add a comment |

But I'd like to change this behavior and force the table to display as it would be on a desktop screen.

Today this is what I get

enter image description here
Now I'd like to obtain the following result (fake image :)

enter image description here

Here is the code of my iFrame

<!DOCTYPE html>

<html>



<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

  <script src="js/ext/jquery-3.3.1.min.js"></script>

  <script src="js/ext/semantic-2.4.2.min.js"></script>

  <script src="js/popup.js"></script>

</head>



<body>

  <div>

    <div>

      <table class="ui celled padded collapsing table">

        <thead>

          <tr>

            <th class="single line">#</th>

            <th>Event mapping</th>

            <th>Actions</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>

              1

            </td>

            <td class="single line">

              <div class="ui right action left icon input mini">

                <i class="search icon"></i>

                <input type="text" placeholder="Selector">

                <div class="ui basic floating dropdown button mini">

                  <div class="text">Identify</div>

                  <i class="dropdown icon"></i>

                  <div class="menu">

                    <div class="item">Page</div>

                    <div class="item">Track</div>

                  </div>

                </div>

              </div>

            </td>

            <td class="right aligned">



            </td>

          </tr>

        </tbody>

        <tfoot>

          <tr>

            <th colspan="5">

              <div class="ui left floated">

                <button id="btn-startcapture" class="positive ui button">Start capture</button>

              </div>

            </th>

          </tr>

        </tfoot>

      </table>

    </div>

  </div>

</body>

</html>

And the CSS style I apply to the iframe tag on the caller page

iframe.segmentizor-panel-iframe-toggle {

  left: calc(100% - 500px) !important;

}



iframe.segmentizor-panel-iframe {

    top: 0px;

    left: calc(100% + 10px);

    display: block;

    z-index: 2147483647;

    box-shadow: rgba(0, 0, 0, 0.25) 7px 0px 12px 13px;

    position: fixed !important;

    width: 500px !important;

    height: 100% !important;

    opacity: 1 !important;

    border-width: initial;

    border-style: none;

    border-color: initial;

    border-image: initial;

    transition: left 0.4s ease-in-out 0s !important;

}

Sorry if the question looks quite trivial. Still in the learning curve... Thanks for your help.

edited Nov 21 at 4:05

asked Nov 20 at 23:34

CyrillouPanam

276

add a comment |

But I'd like to change this behavior and force the table to display as it would be on a desktop screen.

Today this is what I get

enter image description here
Now I'd like to obtain the following result (fake image :)

enter image description here

Here is the code of my iFrame

<!DOCTYPE html>

<html>



<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

  <script src="js/ext/jquery-3.3.1.min.js"></script>

  <script src="js/ext/semantic-2.4.2.min.js"></script>

  <script src="js/popup.js"></script>

</head>



<body>

  <div>

    <div>

      <table class="ui celled padded collapsing table">

        <thead>

          <tr>

            <th class="single line">#</th>

            <th>Event mapping</th>

            <th>Actions</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>

              1

            </td>

            <td class="single line">

              <div class="ui right action left icon input mini">

                <i class="search icon"></i>

                <input type="text" placeholder="Selector">

                <div class="ui basic floating dropdown button mini">

                  <div class="text">Identify</div>

                  <i class="dropdown icon"></i>

                  <div class="menu">

                    <div class="item">Page</div>

                    <div class="item">Track</div>

                  </div>

                </div>

              </div>

            </td>

            <td class="right aligned">



            </td>

          </tr>

        </tbody>

        <tfoot>

          <tr>

            <th colspan="5">

              <div class="ui left floated">

                <button id="btn-startcapture" class="positive ui button">Start capture</button>

              </div>

            </th>

          </tr>

        </tfoot>

      </table>

    </div>

  </div>

</body>

</html>

And the CSS style I apply to the iframe tag on the caller page

iframe.segmentizor-panel-iframe-toggle {

  left: calc(100% - 500px) !important;

}



iframe.segmentizor-panel-iframe {

    top: 0px;

    left: calc(100% + 10px);

    display: block;

    z-index: 2147483647;

    box-shadow: rgba(0, 0, 0, 0.25) 7px 0px 12px 13px;

    position: fixed !important;

    width: 500px !important;

    height: 100% !important;

    opacity: 1 !important;

    border-width: initial;

    border-style: none;

    border-color: initial;

    border-image: initial;

    transition: left 0.4s ease-in-out 0s !important;

}

Sorry if the question looks quite trivial. Still in the learning curve... Thanks for your help.

edited Nov 21 at 4:05

asked Nov 20 at 23:34

CyrillouPanam

276

But I'd like to change this behavior and force the table to display as it would be on a desktop screen.

Today this is what I get

enter image description here
Now I'd like to obtain the following result (fake image :)

enter image description here

Here is the code of my iFrame

<!DOCTYPE html>

<html>



<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

  <script src="js/ext/jquery-3.3.1.min.js"></script>

  <script src="js/ext/semantic-2.4.2.min.js"></script>

  <script src="js/popup.js"></script>

</head>



<body>

  <div>

    <div>

      <table class="ui celled padded collapsing table">

        <thead>

          <tr>

            <th class="single line">#</th>

            <th>Event mapping</th>

            <th>Actions</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>

              1

            </td>

            <td class="single line">

              <div class="ui right action left icon input mini">

                <i class="search icon"></i>

                <input type="text" placeholder="Selector">

                <div class="ui basic floating dropdown button mini">

                  <div class="text">Identify</div>

                  <i class="dropdown icon"></i>

                  <div class="menu">

                    <div class="item">Page</div>

                    <div class="item">Track</div>

                  </div>

                </div>

              </div>

            </td>

            <td class="right aligned">



            </td>

          </tr>

        </tbody>

        <tfoot>

          <tr>

            <th colspan="5">

              <div class="ui left floated">

                <button id="btn-startcapture" class="positive ui button">Start capture</button>

              </div>

            </th>

          </tr>

        </tfoot>

      </table>

    </div>

  </div>

</body>

</html>

And the CSS style I apply to the iframe tag on the caller page

iframe.segmentizor-panel-iframe-toggle {

  left: calc(100% - 500px) !important;

}



iframe.segmentizor-panel-iframe {

    top: 0px;

    left: calc(100% + 10px);

    display: block;

    z-index: 2147483647;

    box-shadow: rgba(0, 0, 0, 0.25) 7px 0px 12px 13px;

    position: fixed !important;

    width: 500px !important;

    height: 100% !important;

    opacity: 1 !important;

    border-width: initial;

    border-style: none;

    border-color: initial;

    border-image: initial;

    transition: left 0.4s ease-in-out 0s !important;

}

Sorry if the question looks quite trivial. Still in the learning curve... Thanks for your help.

javascript html css google-chrome-extension semantic-ui

edited Nov 21 at 4:05

asked Nov 20 at 23:34

CyrillouPanam

276

edited Nov 21 at 4:05

asked Nov 20 at 23:34

CyrillouPanam

276

edited Nov 21 at 4:05

asked Nov 20 at 23:34

CyrillouPanam

276

asked Nov 20 at 23:34

CyrillouPanam

276

asked Nov 20 at 23:34

CyrillouPanam

276

add a comment |

3 Answers
3

active

oldest

votes

Have you tried editing the max-width css? Althought you may be setting the width to be 800px, if the max is only 600 it would only get to that.

answered Nov 21 at 3:01

Nick Beall

112

Thanks Nick for taking the time I've updated my post I got confused with all the tests. Size of the iframe is 500px.
– CyrillouPanam
Nov 21 at 4:08

add a comment |

First, remove the collapsing class

https://semantic-ui.com/collections/table.html#collapsing

Collapsing

A table can be collapsing, taking up only as much space as its rows.

Also, I think you could add some additional style inside the iframe's head section.

After

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

Add some style like you would on any page...

<style>

   table{

       width: 100%;

   }

</style>

Or you could add some classes, or other css styling for your needs.

edited Nov 21 at 7:21

answered Nov 21 at 7:14

Erubiel

1,867319

add a comment |

Thanks for your guidance I managed to do it by:

Adding the following class in my iFrame style

min-width: 800px !important;

Then in my iFrame page I added a new div with the size of the iFrame and used a width of 100% for the table

<div style="max-width: 450px">

    <table class="ui celled padded unstackable collapsing table" style="width:100%">

answered Nov 21 at 22:56

CyrillouPanam

276

add a comment |

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%2f53403208%2fsemantic-ui-in-chrome-extension-issue-when-displaying-in-an-iframe%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Have you tried editing the max-width css? Althought you may be setting the width to be 800px, if the max is only 600 it would only get to that.

answered Nov 21 at 3:01

Nick Beall

112

Thanks Nick for taking the time I've updated my post I got confused with all the tests. Size of the iframe is 500px.
– CyrillouPanam
Nov 21 at 4:08

add a comment |

Have you tried editing the max-width css? Althought you may be setting the width to be 800px, if the max is only 600 it would only get to that.

answered Nov 21 at 3:01

Nick Beall

112

Thanks Nick for taking the time I've updated my post I got confused with all the tests. Size of the iframe is 500px.
– CyrillouPanam
Nov 21 at 4:08

add a comment |

Have you tried editing the max-width css? Althought you may be setting the width to be 800px, if the max is only 600 it would only get to that.

answered Nov 21 at 3:01

Nick Beall

112

Have you tried editing the max-width css? Althought you may be setting the width to be 800px, if the max is only 600 it would only get to that.

answered Nov 21 at 3:01

Nick Beall

112

answered Nov 21 at 3:01

Nick Beall

112

answered Nov 21 at 3:01

Nick Beall

112

answered Nov 21 at 3:01

Nick Beall

112

Thanks Nick for taking the time I've updated my post I got confused with all the tests. Size of the iframe is 500px.
– CyrillouPanam
Nov 21 at 4:08

add a comment |

Thanks Nick for taking the time I've updated my post I got confused with all the tests. Size of the iframe is 500px.
– CyrillouPanam
Nov 21 at 4:08

Thanks Nick for taking the time I've updated my post I got confused with all the tests. Size of the iframe is 500px.
– CyrillouPanam
Nov 21 at 4:08

add a comment |

First, remove the collapsing class

https://semantic-ui.com/collections/table.html#collapsing

Collapsing

A table can be collapsing, taking up only as much space as its rows.

Also, I think you could add some additional style inside the iframe's head section.

After

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

Add some style like you would on any page...

<style>

   table{

       width: 100%;

   }

</style>

Or you could add some classes, or other css styling for your needs.

edited Nov 21 at 7:21

answered Nov 21 at 7:14

Erubiel

1,867319

add a comment |

First, remove the collapsing class

https://semantic-ui.com/collections/table.html#collapsing

Collapsing

A table can be collapsing, taking up only as much space as its rows.

Also, I think you could add some additional style inside the iframe's head section.

After

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

Add some style like you would on any page...

<style>

   table{

       width: 100%;

   }

</style>

Or you could add some classes, or other css styling for your needs.

edited Nov 21 at 7:21

answered Nov 21 at 7:14

Erubiel

1,867319

add a comment |

First, remove the collapsing class

https://semantic-ui.com/collections/table.html#collapsing

Collapsing

A table can be collapsing, taking up only as much space as its rows.

Also, I think you could add some additional style inside the iframe's head section.

After

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

Add some style like you would on any page...

<style>

   table{

       width: 100%;

   }

</style>

Or you could add some classes, or other css styling for your needs.

edited Nov 21 at 7:21

answered Nov 21 at 7:14

Erubiel

1,867319

First, remove the collapsing class

https://semantic-ui.com/collections/table.html#collapsing

Collapsing

A table can be collapsing, taking up only as much space as its rows.

Also, I think you could add some additional style inside the iframe's head section.

After

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

Add some style like you would on any page...

<style>

   table{

       width: 100%;

   }

</style>

Or you could add some classes, or other css styling for your needs.

edited Nov 21 at 7:21

answered Nov 21 at 7:14

Erubiel

1,867319

edited Nov 21 at 7:21

answered Nov 21 at 7:14

Erubiel

1,867319

answered Nov 21 at 7:14

Erubiel

1,867319

answered Nov 21 at 7:14

Erubiel

1,867319

add a comment |

Thanks for your guidance I managed to do it by:

Adding the following class in my iFrame style

min-width: 800px !important;

Then in my iFrame page I added a new div with the size of the iFrame and used a width of 100% for the table

<div style="max-width: 450px">

    <table class="ui celled padded unstackable collapsing table" style="width:100%">

answered Nov 21 at 22:56

CyrillouPanam

276

add a comment |

Thanks for your guidance I managed to do it by:

Adding the following class in my iFrame style

min-width: 800px !important;

Then in my iFrame page I added a new div with the size of the iFrame and used a width of 100% for the table

<div style="max-width: 450px">

    <table class="ui celled padded unstackable collapsing table" style="width:100%">

answered Nov 21 at 22:56

CyrillouPanam

276

add a comment |

Thanks for your guidance I managed to do it by:

Adding the following class in my iFrame style

min-width: 800px !important;

Then in my iFrame page I added a new div with the size of the iFrame and used a width of 100% for the table

<div style="max-width: 450px">

    <table class="ui celled padded unstackable collapsing table" style="width:100%">

answered Nov 21 at 22:56

CyrillouPanam

276

Thanks for your guidance I managed to do it by:

Adding the following class in my iFrame style

min-width: 800px !important;

Then in my iFrame page I added a new div with the size of the iFrame and used a width of 100% for the table

<div style="max-width: 450px">

    <table class="ui celled padded unstackable collapsing table" style="width:100%">

answered Nov 21 at 22:56

CyrillouPanam

276

answered Nov 21 at 22:56

CyrillouPanam

276

answered Nov 21 at 22:56

CyrillouPanam

276

answered Nov 21 at 22:56

CyrillouPanam

276

add a comment |

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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

搜尋此網誌

Tukukkk