Electron: Problems with Modal and Custom Menu Bar
Question
I am working with electron to produce an app but my menu bar doesn't seem to work. I have applied some CSS on it to produce the desired output. I checked the thing on other HTML outside Electron and it seemed to work.
If anybody can look into my code and say what's wrong.. The thins is that I have the navigation bar set up. When the user hovers upon the innermost anchor tags, the font-weight should be bold. However, that doesn't seem to work.
And also, the other thing is that the anchors are linked to some modals but those don't seem to work as well. The whole nav-bar works perfectly outside of electron though.
I know it might be a little hectic to look at so much of code... But if someone could help me out. I am going to paste the HTML with over here and I will be linking the CSS
So the two files of concern are mainWindow.html and dock.css
mainWindow.html :
<nav class="navy-main">
<div class="logo">T-Mordern</div>
<ul>
<li>
<a href="#" class="navy-item">File</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a href="#">New File</a>
</li>
<li>
<a href="#">New Project</a>
</li>
<li>
<a href="#">Open File</a>
</li>
<li>
<a href="#">Save</a>
</li>
<li>
<a href="#">Save As</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="navy-item">Edit</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a href="#">Cut</a>
</li>
<li>
<a href="#">Copy</a>
</li>
<li>
<a href="#">Pate</a>
</li>
<li>
<a href="#">Undo</a>
</li>
<li>
<a href="#">Redo</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="navy-item">Settings</a>
<div class="navy-content">
<div class="navy-sub">
<ul>
<li>
<a data-toggle="modal" href="#ThemeSet">Theme Settings</a>
</li>
<li>
<a data-toggle="modal" href="#FontSet">Font Settings</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<span class="close-my">×</span>
<span class="close-my">═</span>
<span class="close-my">−</span>
</nav>
<!--Modals-->
<div class="modal" id="ThemeSet">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Change Theme</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group modal-body">
<p>
<label for="theme" id="text-theme">Please Select Your Theme form here:</label>
<select class="form-control" id="theme">
<option value="pastel-on-dark" selected>Pastel On Dark</option>
<option value="default">Standard</option>
<option value="darcula">Darcula</option>
<option value="cobalt">Cobalt</option>
<option value="solarized">Solarized</option>
<option value="shadowfox">ShadowFox</option>
<option value="seti">Seti</option>
<option value="rubyblue">RubyBlue</option>
<option value="railcasts">RailsCasts</option>
<option value="paraiso-light">Paraiso-Light</option>
<option value="paraiso-dark">Paraiso-Dark</option>
<option value="panda-syntax">Panda Syntax</option>
<option value="oceanic-next">Oceanic Next</option>
<option value="night">Night</option>
<option value="neo">Neo</option>
<option value="neat">Neat</option>
<option value="monokai">Monokai</option>
<option value="midnight">Midnight</option>
<option value="mdn-like">MDN Like</option>
<option value="mbo">MBO</option>
<option value="material">Material</option>
<option value="lucario">Lucario</option>
<option value="liquibyte">Liquibyte</option>
<option value="lesser-dark">Lesser Dark</option>
<option value="isotope">Isotope</option>
<option value="idea">IDEA</option>
<option value="icecoder">IceCoder</option>
<option value="hopscotch">Hopscotch</option>
<option value="gruvbox-dark">Gruvbox Dark</option>
<option value="erlang-dark">Erlang Dark</option>
<option value="elegant">Elegant</option>
<option value="eclipse">Eclipse</option>
<option value="duotone-light">Duotone Light</option>
<option value="duotone-dark">Duotone Dark</option>
<option value="colorforth">ColorForth</option>
<option value="blackboard">BlackBoard</option>
<option value="bespin">Bespin</option>
<option value="base16-light">Base16 Light</option>
<option value="base16-dark">Base16 Dark</option>
<option value="ambiance">Ambiance</option>
<option value="ambiance-mobile">Ambiance Mobile</option>
<option value="abcdef">ABCDEF</option>
<option value="3024-night">3024 Night</option>
<option value="3024-day">3024 Day</option>
<option value="zenburn">Zenburn</option>
<option value="yeti">Yeti</option>
<option value="xq-light">XQ Light</option>
<option value="xq-dark">XQ Dark</option>
<option value="vibrant-ink">Vibrant Ink</option>
<option value="twilight">Twilight</option>
<option value="ttcn">TTCN</option>
<option value="tomorrow-night-eighties">Tomorrow Night Eighties</option>
<option value="tomorrow-night-bright">Tomorrow Night Bright</option>
<option value="the-matrix">The Matrix</option>
<option value="ssms">SSMS</option>
</select>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="save">Save Changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="FontSet">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Change Font Settings: </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group modal-body">
<p>
<p class="lead" id="intext">Change Font-Size: <select class="form-control" id="fontval">
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option selected value="28">28</option>
<option value="32">32</option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="108">108</option>
</select>
</p>
<hr class="my-4">
<p class="lead" id="intext2">Change Font Face: <select class="form-control" id="fontval2">
<option value="Arial">Arial</option>
<option value="Calibri">Calibri</option>
<option value="Consolas" selected>Consolas</option>
<option value="Courier">Courier</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Segoe UI">Segoe UI</option>
<option value="Times New Roman">Times New Roman</option>
</select>
</p>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="fsave">Save Changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have linked jquery and other required stuff as well.
Here is the link to the CSS file: https://pastebin.com/d5aLqApy
And yeah, I am aware that the CSS contains a lot of !important in it... The z-index is there because I have a textarea below the nav bar.....
And here is how the thing should function: https://jsfiddle.net/Sid2018/uthqv36o/1/
2 answers
solution1
0 2018-11-09 22:00:07
Have you looked at implementing this natively in the main thread? Your users may find this more intuitive as well.
solution2
0 ACCPTED 2018-11-10 14:13:33
It seems to me that the files I had downloaded were in some way not functioning properly. Those worked in the browser but not in Electron. But that was fixed when I re-downloaded them....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.