How to limit external css to target only the elements of InboxSDK's modal dialog when creating gmail extenison?
418 views
Skip to first unread message
Mohit Maharjan
Sep 13, 2017, 11:36:04 PM9/13/17
to InboxSDK
Hello, I am creating a gmail extension and using semantic-ui to style my popup. For this i have added a reference to semantic.min.css in the html as shown in code below. Now, when i show the modal popup, styles are reflecting. But the styles are reflecting in gmail UI as well. However, when i close the modal popup. Gmail UI style restores to normal.
I want to limit my external css to target only the modal popup element. How can i achieve this?
<-- html template for modal popup -->
<!DOCTYPE html>
<html>
<head>
<link href="chrome-extension://nadbhohceamehfnnjjphbcefhddfbene/css/semantic.min.css" rel="stylesheet">
</head>
<body>
<div>
<img id="aartha_image" src="chrome-extension://nadbhohceamehfnnjjphbcefhddfbene/images/icon_48.png" />productname
<div>
<div class="ui fluid search selection dropdown" id="search-select">
<input type="hidden" name="gmailContacts">
<i class="dropdown icon"></i>
<div class="default text">Select Gmail Users</div>
<div class="menu" style="visibility: hidden" id="GmailContactList"></div>
</div>
<button class="ui button" id="searchUserButton"><i class="search icon"></i></button>
</div>
</div>
</body>
</html>
Chris Cowan
Sep 14, 2017, 7:48:08 PM9/14/17
to InboxSDK
You should either put a class name on your top-most element and then scope all of your css to under that class name, or you can put your content in an iframe in the modal.
Mohit Maharjan
Sep 17, 2017, 9:03:57 PM9/17/17
to InboxSDK
Hello Chris, I tried to put my content in an iframe in the modal, but when the modal shows up, gmail webpage automatically reloads. How to handle this?
Chris Cowan
Sep 18, 2017, 6:55:50 PM9/18/17
to InboxSDK
That's very unexpected. I'm not sure what would cause that in Gmail or the InboxSDK. I think that may be an issue in your own code.
Reply all
Reply to author
Forward
0 new messages