I'm using a Semantic UI Search Selection and am using a very simple implementation of .dropdown() to convert static markup into a searchable country input.
The problem is that this input automatically focuses and the menu drops down on page load. If I wait until $(window).load(), I can remove the active and visible classes from the element (and its children), but I'd rather instantiate the menu without these to begin with.
My markup looks something like the following:
$('.ui.modal').modal('show');
$('.ui.dropdown').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
<div class="ui form">
<div class="field">
<label>I am a:</label>
<select class="ui dropdown" name="homeowner_type">
<option value="">--</option>
<option value="Homeowner">Homeowner</option>
</select>
</div>
<!-- The dropdown in question -->
<div class="field">
<label>Country:</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<!-- additional countries -->
</div>
</div>
</div>
</div>
</div>
</div>
There are no other instances of .dropdown() in my code. Thoughts?
EDIT: I've discovered that this is happening because the form is included within a modal. The issue doesn't occur when the form is outside of the modal.
As of April 2015, there is an undocumented Modal setting which is responsible for focusing the first input element contained within the Modal:
autofocus: function() {
if(settings.autofocus) {
var
$inputs = $module.find(':input:visible'),
$autofocus = $inputs.filter('[autofocus]'),
$input = ($autofocus.length > 0)
? $autofocus
: $inputs
;
$input.first().focus();
}
},
This setting is available to us under the $.fn.modal.settings. As a result, the following will prevent this search input from focusing when the Modal opens:
$('.ui.modal').modal({
autofocus: false,
}).modal('show');
And a runnable example:
$('.ui.modal').modal({
autofocus: false,
}).modal('show');
$('.ui.dropdown').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
<div class="ui form">
<div class="field">
<label>I am a:</label>
<select class="ui dropdown" name="homeowner_type">
<option value="">--</option>
<option value="Homeowner">Homeowner</option>
</select>
</div>
<!-- The dropdown in question -->
<div class="field">
<label>Country:</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<!-- additional countries -->
</div>
</div>
</div>
</div>
</div>
</div>
Related
Using Bootstrap...
How to make this so that only one accordion collapsable DIV is open at a time. When one is clicked open, the other should close (if it is open?)
Looking for the most simple and streamlined solution...
<div class="row" id="nav-top">
<div class="col-md-6">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >SIGN-IN</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-6">
<div>
REGISTER
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
</div>
You have to use show.bs.collapse event which is fired immediately when the collapse element starts showing. Then you can hide other collapsible menus, Like this:
// when showing signin accordion
$('#signin').on('show.bs.collapse', function () {
// hide register accordion
$('#register').collapse('hide');
});
$('#register').on('show.bs.collapse', function () {
$('#signin').collapse('hide');
});
But If you have multiple accordion you can't call this event in each one of them, You have to use a class to select them all and call show.bs.collapse only one time, Here is a working example:
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" id="nav-top">
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >ABOUT</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#register" >REGISTER</a>
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#about" >SIGN-IN</a>
</div>
<div id="about" class="collapse">
FORM HERE
</div>
</div>
</div>
</div>
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().
<div class="card-media">
<!-- media container -->
<div class="card-media-object-container">
<div class="card-media-object"><img data-original="{{asset($ad->images()->first()->image_path.'/'.$ad->images()->first()->image_name)}}" height="125px" width="100%"></div>
</div>
<!-- body container -->
<div class="card-media-body">
<div class="card-media-body-top">
<span class="subtle">{{$ad->time_elapsed_string($ad->created_at)}}</span>
</div>
<span class="title card-media-body-heading">{{$ad->title}}</span>
<div class="card-media-body-supporting-bottom">
<span class="card-media-body-supporting-bottom-text subtle">
<ol class="breadcrumb">
<li class="categorie">{{$ad->categorie->name}}</li>
<li class="subcategorie">{{$ad->subcategorie->name}}</li>
<li class="type active">{{$ad->type->name}}</li>
</ol>
</span>
<span id="price" style="color: red;" class="card-media-body-supporting-bottom-text subtle u-float-right">{{$ad->price}}</span>
</div>
<div class="card-media-body-supporting-bottom card-media-body-supporting-bottom-reveal">
<span class="card-media-body-supporting-bottom-text subtle">{{$ad->phone}}</span>
ДЭЛГЭРЭНГҮЙ
</div>
</div>
</div>
This is my repeated list and i wanna hide by select value
<select id="test" multiple class="form-control">
<option>1</option>
<option>100</option>
<option>1000</option>
<option>10000</option>
<option>100000</option>
<option>1000000</option>
</select>
$('#test').on('change',function(){
var selected = this.value;
prices = $('#price');
$.each(prices,function(){
if(selected<$(this).text()){
$(this).parent().parent().parent().hide();
}
if(selected>$(this).text()){
$(this).parent().parent().parent().show();
}
});
});
This is my jquery when i select value from select then if #price value < than select hide other list elements in my case card-media is list item.
I am trying to include Semantic-UI dropdowns inside a table with many columns, which has a horizontal scroll bar.
When clicking a dropdown, the options are hidden inside the div.
fiddle:
http://jsfiddle.net/rotemx/n0azk0jc/
code:
<div id="wrapper">
<div id="content">
<div style="width: 500px">
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
</div>
</div>
screenshot:
quesiton:
How can I make the dropdowns visible ?
With your current setup, you can't. Anything inside the element with overflow: none cannot be shown outside the element boundaries.
what I want, vertical menu:
menu item 1
menu item 2
user pressed menu item 1 and on the same page,
appear input dialogue between two menu items:
menu item 1
input field 1
input field 2
button
menu item 2
It is rather simple two create vertical menu list and
dialogue with such content, but how to combine them?
To achieve what you want you can try with an accordion menu, see the follow example:
$(document).ready(function(){
// init the accordion on the menu
$('.ui.accordion').accordion();
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div class="ui vertical fluid accordion menu">
<div class="item">
<a class="title">
<i class="dropdown icon"></i>Menu item 1
</a>
<div class="content">
<div class="ui form transition hidden">
<form class="ui form">
<div class="field">
<label>Input field 1</label>
<input type="text" name="first-name" placeholder="Input field 1">
</div>
<div class="field">
<label>Input field 2</label>
<input type="text" name="last-name" placeholder="Input field 2">
</div>
<button class="ui button" type="submit">Button</button>
</form>
</div>
</div>
</div>
<div class="item">
<a class="title">
<i></i>Menu item 2
</a>
</div>
</div>
Hope it helps,