How can I set the width of the Semantic UI Search Selection drop down? I need to set the width of Semantic UI Search selection dropdown to the longest element in the dropdown. Any help will be appreciated.
I used a fixed-size wrapper combined with a fluid (expands to fit size of parent) dropdown nested inside of it
<div style="width: 250px;">
<div class="ui fluid dropdown">
<input type="hidden" name="country">
<div class="default text">My Dropdown Text</div>
</div>
</div>
Try setting the min-width instead of setting the width. The default is a min-width of 14em, so you'll need to override that if you wish to have a smaller width.
Example:
.ui.dropdown.search{
min-width: /*smaller width here*/;
}
Try using the 'compact' attribute as shown below. However it only adjusts the width based on what is selected.
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">Compact</div>
<div class="menu">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</div>
Related
I have a dropdown which i am trying to populate from the javascript. But i am unable to do it.
This is my HTML
<div class="ui fluid search selection dropdown values">
<input type="hidden" name="values" selectOnBlur={false}>
<i class="dropdown icon"></i>
<div class="default text">Select a category</div>
<div class="menu">
</div>
</div>
And this is the JS
$('.ui.dropdown.values').dropdown({values:[{name:"oi",value:32},{name:"yo",value:2}]})
Please find the codepen link below
CodePen
Thanks
Can be fixed by changing versions to:
https://code.jquery.com/jquery-3.2.1.min.js
https://cdn.jsdelivr.net/npm/semantic-ui#2.2.13/dist/semantic.min.js
Because the dropdown library's version you used didn't support populating via JS (as per docs)
I am using semantic-ui and have a grid setup as follows within a tab segment:
<div class="ui bottom attached tab segment" data-tab="Overall Stats">
<div class="ui internally celled stackable grid">
<div class="row">
<div class="eight wide column">
<h4 class="ui blue header">Top Goal Scorers
<div class="sub header">(All Age Groups)</div>
</h4>
<div id="showOverallGB"></div>
</div>
<div class="eight wide column">
<h4 class="ui blue header">Most MoM Awards
<div class="sub header">(All Age Groups)</div>
</h4>
<div id="showOverallMoM"></div>
</div>
</div>
</div>
In the showOverall* divs I add dynamically created tables. The issue I have is that the created tables can be wider than the columns they sit in which means the left hand table overlaps the right hand table (when viewing on a non-mobile device such that the grid does NOT stack). Is there a way to invoke the stackable part of the grid if the dynamically added tables are wider than the columns they sit in?
Edit: here's a fiddle - https://jsfiddle.net/eynnqLkk/1/
You'll need to go to the Age Group Stats tab and then play around with the jsfiddle boundaries. You should see something like:
You could add scroll bars to your tables so they won't overlap adding:
#showGB, #showMoM {width:100%; overflow:auto;}
as you can see here: Fiddle
Or if you want to move one behind the other when no room avaliable remove the width 50% of your container with:
.ui.grid > .row > [class*="eight wide"].column {width:auto !Important}
as you can see here: Fiddle
I have bootstrap popover as follows
<div style="float:left; width:30%"></div>
<div class="popover results" style="z-index:1060; float:left; width:70%">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"></h3>
<div class="popover-content">
<p></p>
</div></div>
</div>
I saw that with change in screen resolution, its changing the relative position with the input element I have. I want to maintain the relative position of popover and input element same irrespective of resolution. Is there any way to do this ?
This was happening since I used following in above code
<div style="float:left; width:30%"></div>
I removed it and it now auto adjusts correctly
I'm working with Semantic UI dropdowns, and I need to create a dropdown with around 3000 options in it. The dropdown works very well, except for one case. If the user clears out the search text, the dropdown completely locks up. I believe it's because it's trying to reload all the elements.
I've looked through the settings (http://semantic-ui.com/modules/dropdown.html#/settings) that are available for the dropdown, but nothing stands out in change the way it handles reloading all the elements.
Any advice would be greatly appreciated.
HTML:
<div class="ui fluid search selection dropdown">
<input type="hidden" name="security_group"></input>
<i class="dropdown icon"></i>
<div class="default text">Select Security Group</div>
<div class="menu">
<j:while test="${reference.next()}">
<div class="item" data-value="${reference.sys_id}">${reference.u_name}</div>
</j:while>
</div>
</div>
Javascript:
$(document).ready(function(){
$(".ui.fluid.search.selection.dropdown").dropdown();
$(".ui.fluid.search.selection.dropdown").width("100%");
});
Here i have to boxes, it looks like this
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock0h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock0')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock0" class="dataViewBox-BottomBorder">
<div id="test0" class="dataViewBox-Data toggleable Text">
<span>this is just a test to show the the box can expand and be alot more bigger then it first was</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock1h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock1')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock1" class="dataViewBox-BottomBorder">
<div id="test1" class="dataViewBox-Data toggleable Text">
<span>See how this box fallows the other one when you open it, and same when you close it, it always has equal width</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
All the code is too much to post here, but I have two boxes, the code works as it is now but the thing is that I do not like how I have solved this problem, if you open one box and you'll see at the other comes free with and the same size, it's the idea that it should be so. So all elements on the page is always symmetric. Its just that it only works if you have "display: table" in body. And i try to find another way to do this whit same results, its always hard when you try to get equal width on everything, But the way to do it CSS/JavaScript does not matter
Link: JsFiddle
/ Slaktarn
All you need to do is to add a max-width parameter to whatever elements you want to limit in size.
body {
...
display: block;
max-width: 450px;
}