Semantic is a UI component framework based around useful principles from natural language. Forkable JSFiddle: https://jsfiddle.net/ca0rovs3/
Modal module doesn't work inside the popover content (using the data-html tag).
<html>
<div id="cbinfo-modal-content" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="https://semantic-ui.com/images/avatar2/large/rachel.png">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<div class="cbinfo_popover" data-html="<div class='popover_content'>Lorem Ipsum is simply dummy text of the printing and typesetting industry..<a class='popover_message' id='cbinfo-modal' href='#/'>Modal Link <i class='sign out alternate icon'></i></a></div>"> <a class="cbquery" href="#/"> Popover Text</a></div>
<br>
<br>
<a id="cbinfo-modal" class="popover-text" href="#/"> Test me, I'm working without POPOVER data-html</a>
</html>
<style>
.cbinfo_popover {
font-size: 18px;
margin-left: 100px;
margin-top: 30px;
}
.popover_content a {
font-weight: bold;
color: #000;
font-size: 14px;
float: right;
margin: 10px 8px 0;
}
.popover-text {
font-size: 18px;
margin-left: 100px;
}
</style>
<script>
$(document).ready(function(){
$('#cbinfo-modal').click(function(){
$('#cbinfo-modal-content').modal('show');
});
});
$('.cbinfo_popover')
.popup({
hoverable: true
})
;
</script>Can someone help me to fix it.?
Here is the JSFiddle link for the code: https://jsfiddle.net/PremGanga/t4gmofx0/23/
Hey everyone I was trying to use semantic
@hammy2899 Excellent! Thank you. This will take me a lot further. I got a bit spoiled using the Predix Sketch template:
https://www.predix-ui.com/#/about/start-designing
Which is quite comprehensive, but largely abandoned. (Which is why I'm adopting Fomantic.)
Hello all:
Sorry, I am quite new to this but I have some questions about Semantic UI and project structure.
- Is it correct that the Semantic folder should sit outside of the node_modules folder?
- When deploying for production, do we really only need
dist/semantic.min.css?
Thank you!
All, I've got what could be either Newbie bad luck or a Bug.
I'm trying to add a top label to a row, but when I do so, the label is appearing in the next parent up instead.
imgur link of what i see: https://imgur.com/a/JnmUST5
gist of the code in question: https://gist.github.com/Daenks/854623f22edb1d5c2425836d7a559841
The issue can be created by uncommenting the only commented line.
Am i doing something wrong?
Hey folks, I want to replace the google fonts with some other URL. I googled it and found this out(https://github.com/Semantic-Org/Semantic-UI/issues/6435#issuecomment-398339397). But I don't want to download the links and reference it. I just want to change the URL from google fonts cdn to some other one. Is there any way to do this?
Thanks!
Hi all, I am struggling to work out a way to skip validation rules when submitting a form for 1 button, but not for another. e.g. If I have a submit, preview and save button, I do not want validation for the save button as this is just a "work in progress" save (which avoids work being lost). Is there a straightforward way of doing this?
