I try to make a form validation, but if I hit submit, the form disapears before giving me the feedback:
<div class="ui right aligned grid">
<div class="ui three wide column">
<div class="ui center aligned inverted orange segment">
<div class="ui animated fade large inverted button" onclick="contact()">
<div class="visible content">Say Something!</div>
<div class="hidden content">Express yourself ;)</div>
</div>
</div>
</div>
</div>
<div class="ui first coupled modal">
<i class="close icon"></i>
<div class="header">
tell me something
</div>
<div class="content">
<form class="ui form" method="post" action="/msg">
<h4 class="ui dividing header">What do you think</h4>
<div class="field">
<label><i class="write icon"></i></label>
<textarea name="txt" class="field" placeholder="write something" required></textarea>
<input class="ui green button" type="submit" value="gtt"/>
</form>
</div>
</div>
</div>
<div class="ui small second coupled modal">
<div class="header">
<i class="red heart icon"></i>
</div>
<div class="content">
<div class="description">
<h1>Thank you</h1>
</div>
</div>
<div class="actions">
<div class="ui approve inverted blue button">
<i class="checkmark icon"></i>
Bye ^_^
</div>
</div>
The JS:
function contact(){
$('.coupled.modal')
.modal({
allowMultiple: false
})
;
// attach events to buttons
$('.second.modal')
.modal('attach events', '.first.modal .button')
;
// show first now
$('.first.modal')
.modal('show')
;
}
And here is how the first windows diseapears without letting me validate.
Update: I added the validation, but it doesent work:
$('.ui.form')
.form({
message: {
identifier : 'msg',
rules: [
{
type : 'empty',
prompt : 'Please enter a message'
}
]
},
})
;
Where are the onApprove and onDeny callbacks to perform the logic?
The fact that the modal fades but that the dimmer stays on the screen suggests an error in the js. Go to the debugger and find out.
Related
semantic ui modal ptint using printjs library. but the result is not
correctly showing the expected modal print.
help ?
$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet"/>
<div id="modaldiv" class="ui modal">
<button type="ui button" id="button" onclick="printJS({ printable:
'modaldiv',type: 'html',showModal:true, printContainer:
true,copyTagClasses: true})">
Print
</button> //print button and printjs command active
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="img/bmw5.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="#"
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 button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<a class="item ui button" id="logIn">
<i class="user icon"></i> Log In
</a> // modal open login button
The issue printing this modal is not related to print.js. The modal has a negative margin-top applied style which is the cause of issue when printing it.
In this fiddle, you can test using the Print2 button, it will print another html element content inside the same modal, without any issues.
https://jsfiddle.net/crabbly/y8e4ga8p/
Hello fellow internet strangers :) If any of you has some time to spare and knows Semantic UI I'd apreciate some help...
I'm building a form and on large screens it looks perfect...
but the problem ocures when I start displaying it on smaler screens... the elements start ovelaping each other like on the two images bellow:
My HTML code is:
<h1>Računi (2017)</h1>
<div class="ui form" style="padding: 20px">
<div class="ui stackable equal width grid">
<div class="row">
<div class="column">
<div class="field">
<label>Št. računa</label>
<div class="ui left icon input">
<input type="text" name="racun_id" placeholder="št. računa">
<i class="hashtag icon"></i>
</div>z
</div>
</div>
<div class="column">
<div class="field">
<label>Ime in priimek</label>
<div class="ui left icon input">
<input type="text" placeholder="Vnesi...">
<i class="user icon"></i>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Naslov</label>
<div class="ui left icon input">
<input type="text" name="kupec_naslov" placeholder="Vnesi...">
<i class="marker icon"></i>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Začetni datum</label>
<div class="ui left icon right labeled input">
<i class="calendar icon"></i>
<input type="text" name="zac" value="14.9">
<div class="ui basic label">
2017
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Končni datum</label>
<div class="ui left icon right labeled input">
<i class="calendar icon"></i>
<input type="text" name="kon" value="14.9">
<div class="ui basic label">
2017
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="field">
<label>Referent</label>
<div class="ui selection dropdown">
<input type="hidden" name="referent_id">
<i class="dropdown icon"></i>
<div class="default text">Izberi...</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
<div class="item" data-value="1">Spaceman</div>
<div class="item" data-value="0">Spiderman</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Odprt račun</label>
<select class="ui dropdown">
<option value="">--</option>
<option value="N">Odprt TRR</option>
<option value="C">Odprt Plačilna kartica</option>
</select>
</div>
</div>
<div class="column">
<div class="field">
<label>Filter plačilnih kartic</label>
<div class="ui selection dropdown">
<i class="payment icon"></i>
<input type="hidden" name="referent_id">
<i class="dropdown icon"></i>
<div class="default text">Izberi...</div>
<div class="menu">
<div class="item" data-value="">--</div>
<div class="item" data-value="isicvisa">ISIC Visa</div>
<div class="item" data-value="maestro">Maestro / BA</div>
<div class="item" data-value="visa">Visa</div>
<div class="item" data-value="mc">MasterCard</div>
<div class="item" data-value="karanta">Karanta</div>
<div class="item" data-value="diners">Diners</div>
<div class="item" data-value="amex">American Express</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Zaključeni odprti računi</label>
<div class="ui slider checkbox">
<input type="checkbox" name="newsletter">
<label> </label>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label>Izpiši račune:</label>
<button class="fluid ui primary button"><i class="terminal icon"></i>Izpis</button>
</div>
</div>
</div>
</div>
</div>
BTW I havent written any of my own CSS... using purely the Semantic one
So if anyone has a solution to this or if anyone sees a problem in my code id apreciate some help :)
P.S. Sorry for bad english... it's not my native language
Don't use grids. Stick with the multiple field classes that semantic ui provides.
Semantic-UI multiple fields in forms
<div class="ui form">
<div class="three fields">
<div class="field">
<label>First name</label>
<input type="text" placeholder="First Name">
</div>
<div class="field">
<label>Middle name</label>
<input type="text" placeholder="Middle Name">
</div>
<div class="field">
<label>Last name</label>
<input type="text" placeholder="Last Name">
</div>
</div>
</div>
This bit me too but make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> in your header.
Source: https://github.com/Semantic-Org/Semantic-UI/issues/3152
I had this problem, and with all the changes suggested here, the problem still persisted exclusively for the dropdown fields.
The solution for me was to change <select name="name" class="ui dropdown"> to <select name="name" class="ui dropdown fluid"> (adding the fluid class). This prevented the dropdown from jumping over the other fields, as in OP's example.
The structure of the HTML was the same as in the #VtoCorleone's answer, and the dropdown was previously initialized with $(".ui.dropdown").dropdown().
My page is basically split in two parts:
<div *ngIf="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
Use [hidden] attribute, when you use *ngIf the element is not created in the dom so jQuery can not init the accordion on it.
<div [hidden]="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
I have two cards and I am firing an onClick() event to create a dimmer on top of the card image if a user clicks on Like button (heart icon). I am trying to create the dimmer on the card image in which user clicked the heart icon.
I tried placing a condition :
if (e.target !== this)
return;
But it did not work. In real webpage, I will have a long list of cards with no identifier where I can specify the image to be dimmed. Is it possible in this scenario?
JSFiddle
So you're trying to limit your interaction to the currently selected image? Also, rather than reference a fiddle, post your working (or non-working) code here. Easier all around.
jQuery(document).ready(function($) {
$(document).on('click', '.loveit', function(e) {
e.preventDefault();
$(this).parents(".card").find('.imglove')
.dimmer('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
Updated fiddle.
You should use the current clicked jQuery object $(this) instead to target the related .imglove in the same .card :
$(this).closest('.card').find('.imglove').dimmer('show');
NOTE : The .closest('.card') is used to get the related card with clicked icon loveit.
Hope this helps.
$(function() {
$(document).on('click', '.loveit', function(e) {
e.preventDefault();
$(this).closest('.card').find('.imglove').dimmer('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
Target it parent with class card then find class imglove and add dimmer to it
jQuery(document).ready(function($) {
$(document).on('click', '.loveit', function(e) {
$(this).parents('.card').find('.imglove').dimmer('show');
});
});
DEMO
I have a file upload control as shown below,
Code:
<div class="row">
<div class="col-md-12">
<div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
<div class="panel panel-default">
<div class="panel-body">
<form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
<div class="col-md-1">
<span class="glyphicon glyphicon-download-alt"></span> Get Template
</div>
<div class="col-md-3">
<select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
</div>
<div class="col-md-3">
<input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
</div>
<div class="col-md-1">
<button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
</div>
</form>
</div>
</div>
</div>
</div>
Expectation:
I want to show the 'No file chosen' message in the center as shown in the image. The reason is, to reduce the empty space between the 'Validate' button and the 'Choose file' button.
Options Tried:
I tried to modify this via css property and jquery but could not locate the text in UI.
Any help is appreciated.
Sorry, there is no simple way to do it. The only way to do it is to hide that input, put an image where that input is and some text with margin-left. With javascript you can easily position it and make sure that the click works cross-browser.