Issue
I have this project, where I want to build an admin panel for a site. I use a popup-box that pops up when you click on a special setting.
I want to fill the HTML content with JavaScript code into this popup-box, so that I am able to only use one for all the settings
The problem is, that the html code that I insert in the popup-box before I make it visible does not apply the style from the classes that I want.
Code of how it's opened:
function open_popup_box(heading, content){
$("#popup_box_heading").html(heading);
$("#popup_box_content").html(content);
$("#popup_box").fadeIn();
$("#popup_box_bg").addClass("show");
}
The class that I want to insert an element from is defined in the style.css. The only thing that works is inline style, but that's not an option as I want to use hover and other CSS things
Does somebody know how to fix this?
As requested the CSS:
.custom_select{
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
padding: .5em;
padding-right: 1.5em;
width: 40%;
font-size: 16px;
}
And the HTML:
<!-- Just to let you know in which order I loaded the files -->
<link rel="stylesheet" type="text/css" href="external/css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="external/js/globalfunctions.js"></script>
<div id="popup_box">
<table id="popup_box_table">
<tr id="popup_box_header">
<td>
<table>
<tr>
<td>
</td>
<td width="50px">
<i id="popup_box_close_icon" class="fa fa-times"></i>
</td>
<td id="popup_box_heading">
</td>
</tr>
</table>
</td>
</tr>
<tr >
<td id="popup_box_content">
</td>
</tr>
</table>
</div>
This is the part of the JS that opens the popup-box (with inline style set right now because its the only thing I get to work):
var content='<div id="popup_box_content_div"><select class="custom_select" id="lang_select" style="border-radius: 0; -webkit-appearance: none; -moz-appearance: none; background-position: right 50%; background-repeat: no-repeat; padding: .5em; padding-right: 1.5em; width: 40%; font-size: 16px;">';
$.each(language_list, function(i, lang){
content+='<option>';
content+=lang.showName;
content+='</option>';
});
content+='</select></div>';
open_popup_box("Choose your preferred Language", content);
Solution
Get rid of inline style in the 'content' variable in JS. The only reason why CSS might not work is if the CSS selector is actually a child of some other selector and what you're appending isn't a child of that selector. If you are using SCSS, is that CSS selector nested in some other selector? If you are using vanilla CSS, is that the entire selector or does it have some other elements in front (eg .foo .custom_select {})?
Answered By - l.varga
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.