Semantic is a UI component framework based around useful principles from natural language. Forkable JSFiddle: https://jsfiddle.net/ca0rovs3/
message: 'Cannot create property \'_index\' on string \'!important\' in file /Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables line no. 1',
stack: undefined,
type: 'Syntax',
filename: '/Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables',
index: NaN,
line: 1,
column: -1,
callLine: NaN,
callExtract: undefined,
extract:
[ undefined,
'/*******************************',
' Table' ],
lineNumber: 1,
fileName: '/Users/deveshverma/educators-dashboard/semantic/src/themes/default/collections/table.variables',
name: 'Error',
plugin: 'gulp-less',
showProperties: true,
showStack: false,
__safety: { toString: [Function: bound ] } }gulp build
Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. For more info please read the following issues Semantic-Org/Semantic-UI#6109 Semantic-Org/Semantic-UI#6413
I am using the npm installation of semantic ui v 2.4.2. Everything works beautifully except for
<select class="ui dropdown">. They render as expected on Chrome but on Firefox, they seem to be using Firefox's scrollbar and dropdown background. Any pointers would be appreciated! The selects on the Semantic UI website render fine even though I'm on Firefox. Thank you!
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!
