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

up vote
1
down vote

favorite

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 2 days ago

asked Nov 20 at 23:34

CyrillouPanam

256

add a comment |

up vote
1
down vote

favorite

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 2 days ago

asked Nov 20 at 23:34

CyrillouPanam

256

add a comment |

up vote
1
down vote

favorite

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 2 days ago

asked Nov 20 at 23:34

CyrillouPanam

256

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 2 days ago

asked Nov 20 at 23:34

CyrillouPanam

256

edited 2 days ago

asked Nov 20 at 23:34

CyrillouPanam

256

edited 2 days ago

asked Nov 20 at 23:34

CyrillouPanam

256

asked Nov 20 at 23:34

CyrillouPanam

256

asked Nov 20 at 23:34

CyrillouPanam

256

add a comment |

3 Answers
3

active

oldest

votes

up vote
1
down vote

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 2 days ago

Nick Beall

112

New contributor

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
2 days ago

add a comment |

up vote
1
down vote

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 2 days ago

answered 2 days ago

Erubiel

1,790318

add a comment |

up vote
0
down vote

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 2 days ago

CyrillouPanam

256

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',
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

up vote
1
down vote

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 2 days ago

Nick Beall

112

New contributor

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
2 days ago

add a comment |

up vote
1
down vote

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 2 days ago

Nick Beall

112

New contributor

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
2 days ago

add a comment |

up vote
1
down vote

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 2 days ago

Nick Beall

112

New contributor

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 2 days ago

Nick Beall

112

New contributor

answered 2 days ago

Nick Beall

112

New contributor

answered 2 days ago

Nick Beall

112

answered 2 days ago

Nick Beall

112

New contributor

Nick Beall is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

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
2 days ago

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
2 days ago

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
2 days ago

add a comment |

up vote
1
down vote

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 2 days ago

answered 2 days ago

Erubiel

1,790318

add a comment |

up vote
1
down vote

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 2 days ago

answered 2 days ago

Erubiel

1,790318

add a comment |

up vote
1
down vote

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 2 days ago

answered 2 days ago

Erubiel

1,790318

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 2 days ago

answered 2 days ago

Erubiel

1,790318

edited 2 days ago

answered 2 days ago

Erubiel

1,790318

answered 2 days ago

Erubiel

1,790318

answered 2 days ago

Erubiel

1,790318

add a comment |

up vote
0
down vote

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 2 days ago

CyrillouPanam

256

add a comment |

up vote
0
down vote

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 2 days ago

CyrillouPanam

256

add a comment |

up vote
0
down vote

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 2 days ago

CyrillouPanam

256

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 2 days ago

CyrillouPanam

256

answered 2 days ago

CyrillouPanam

256

answered 2 days ago

CyrillouPanam

256

answered 2 days ago

CyrillouPanam

256

add a comment |

draft saved

draft discarded

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

搜尋此網誌

Htykuut