I have a drop down menu that semantic-ui overrides as a semantic-ui drop down menu although i removed every class related to semantic-ui. It inserts a div to contain the whole and apply semantic styling.
My problem is that semantic drop down is wide and i need it to be small, so I tried many workarounds to change the size or remove semantic's control all together. The only thing that seemed to work was using Jquery to remove the elements that semantic inserts. Which is a lousy way to do it, and which also my team condemned.
To give you some context, I am changing the navbar to make it responsive, that's why i'm removing semantic classes from the navbar and using custom css classes and I'm using it with Vue.js
Here's the source drop down code:
<a style="padding:6px 0px !important;">
<select class="language-select" id="locale-dropdown" v-model="locale">
<option value="en">En</option>
<option value="ar">ع</option>
</select>
</a>
Below is the actual code i got by using inspect in chrome:
<a data-v-65731896="" style="padding: 6px 0px !important;">
<div class="selection ui dropdown" tabindex="0">
<select data-v-65731896="" id="locale-dropdown" class="language-select">
<option data-v-65731896="" value="en">En</option>
<option data-v-65731896="" value="ar">ع</option>
</select>
<i class="dropdown icon"></i>
<div class="text">En</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="en">En</div>
<div class="item" data-value="ar">ع</div>
</div>
</div>
</a>
Jquery code used to remove elements:
mounted () {
$('.ui.search.dropdown.selection').removeClass('ui search dropdown selection')
$('.search').remove()
$('.text').remove()
$('.menu').remove()
$('.dropdown.icon').remove()
}
css that should be applied -but doesn't-:
.language-select{
background-color:#fff;
padding: 5px 5px;
width: 20px;
}
The solution I found is as follows. The solution is to put the drop down menu inside a div with certain height and give the a class of 'fluid' to fill the container's size. And this would make it resizable.
<a style="padding:6px 0px !important;">
<div style="width: 70px">
<select style="background-color:#e3e3e3; padding: 5px 5px;" id="locale-dropdown" class="fluid" v-model="locale">
<option value="en">En</option>
<option value="ar">ع</option>
</select>
</div>
</a>
Credits go to Tarek AlQaddi
Related
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>
I have something of this sort but whenever I hover by cursor above the image, I get a cross like sign please see the image
Here is the code
<li id="dank-li" class="btn disabled">
<img src="img/dank-logo.png" width="30px" height="30px"></img>
<a href="#text-carousel" data-slide-to="1">
<h3 style="vertical-align: -5px;display: inline; margin-bottom: 15px; text-transform: none; padding-left: 5px;">Hello World</h3>
</a>
</li>
Could you tell me what the issue is and how to disable via CSS?
Set cursor: default on the li element to override bootstrap default cursor on disabled content.
Remove the class "disabled" from your list.
Remove the disabled class from your <li>. Bootstrap is using the disabled class to change the cursor.
I created an example to show this occurring:
http://www.bootply.com/Cv0affYw82
<ul>
<li class="btn disabled">Disabled</li>
<li class="btn">Not disabled</li>
</ul>
After click on select options are show just in second and after user can't choose option for wizard.
We using Hogan.js and bootstrap and on other elements work great but on one specific modal its not working, on other modals working also great.
<select name="date-range" class="form-control">
<option value="week-over-week">Week Over Week</option>
<option value="month-over-month">Month Over Month</option>
<option value="quarter-over-quarter">Quarter Over Quarter</option>
<option value="year-over-year">Year Over Year</option>
<option value="false">-------------</option>
<option value="custom">Custom Date Range</option>
UPDATE: We found that maybe is problem when calling div over modal container and inside div we have select option, also this happen only in FF.
UPDATE: Select option is inside ul tag and look like
<ul class="dropdown-menu hasdaterange" role="menu" style="position: absolute; top: 175px; left: 803px;">
<li>
<div class="calendar"><select>..</select>
</li>
</ul>
This is because you have dropdown in dropdown in modal. Try to re-factor yours html elements.
Here is my fiddle : http://jsfiddle.net/rshutxpj/3/
As you can see, when you click on the rows, there is a little border appearing. I basically want to only have the border change on the last row clicked, but I don't know what event to use to bring the previous row I clicked with no border. What would be the best way to do that?
P.S. I cant use the any type of "losefocus" or similar, because I got many table on my page and the last row clicked on this particular table need to stay visible to the user. Think it the same way as many groups of radiobox.
Here is the code:
<ul class="UploadTable" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li style="text-align: center !important">
<label>UPLOAD SCHEDULE</label>
</li>
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Header 1</div>
<div class="ui-block-b" style="width:34%">Header 2</div>
<div class="ui-block-c" style="width:33%">Header 3</div>
</div>
</li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a>
</li>
</ul>
You have duplicate IDs.
Why do want to have onclick on each anchor.(removed in demo)
Use this JS
$(document).on('click', '.fitting', function () {
$('.fitting').removeAttr('style'); // removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Demo
Warning:As you have only border in style attribute , removing it will not effect anything, Suppose if you have other styles along with border don't use .removeAttr('style'); , Use .css('border', 'none') like below
$(document).on('click', '.fitting', function () {
$('.fitting').css('border', 'none')// removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Update :
If there are multiple tables then use this $(this).parents('table').find('.fitting').css('border', 'none')
this finds the fitting elements of the table in which the row is clicked, excluding the same elements in other tables in DOM
NOTE: #J Santosh's answer will toggle all links in all of the tables and the question mentioned that there are multipe tables on the page would all lose their highlighting.
Having your onclick links on the list items will make this messy and is not performant (as I'll go thru below). To stay within The solution you are looking for is:
onclick="var links=this.parentNode.parentNode.querySelectorAll('.fitting a') || [], i = links.length; for (;!!i;i--) { links[i].style.border='none'; } this.style.border='2px solid #000099';"
This will make sure you are only removing the highlighted row from that table.
HOWEVER, There are some very concerning things about this structure.
Your id's are not unique. You should remove the id attributes.
You can use the href=javascript:"/* onclick stuff goes here */" instead of adding an onclick attribute.
There is no need to use anchor tags in the li as you are doing. Adding extra DOM items makes your DOM heavier and the page slower. I suspect you are only adding those because you want the pointer icon. You can fix that with CSS.
Your onclicks will all need to be updated the same way and makes your code less reusable. Adding eventHandlers to every li also is expensive in that the function isn't cached and requires extra resources for each DOM element.
Setting the style purely in javascript might be better done in CSS since it will be tied to your page layout styling. Create a class called "selected" or something similar and add the class onclick.
SO here is how I would code it:
HTML:
REMOVE ALL OF YOUR LINKS! You are using anchor tags wrong! Also, remove all of your id's.
CSS:
li.fitting { cursor: pointer; }
li.fitting.selected { border: 2px solid #000099 }
Javascript:
$(function(){
$('li.fitting').on('click', function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
});
You could use the HTML state of :focus and the JS "blur" event, hooked using the HTML attribute onblur. So, you would amend your onclick to this.style.border='2px solid #000099';this.focus(); and add onblur="this.style.border='none';" to that same link.
I modified my asp.net 2.0 website to be mobile friendly. On desktops and tablets, the navigation menu is a horizontal bar styled with the class mobilemenu, and on all other devices it is a dropdown menu, styled with class mobiledropdown. Everything works except on mobile devices with the dropdown menu, the home page menu item does nothing when selected, but all the other dropdown items navigate correctly. In both cases the url for home page is "./" but I also tried hardcoding it with the full http://www plus my domain and that also works for mobilemenu but not mobiledropdown.
I am thinking it must be related to the javascript which is used only for the dropdown.
The code is below. it is contained in an include file. the css hides or shows the appropriate menu based on media queries and that all works great.
The first div element is for larger devices and is the code that has been used for several years without any issues. I added the mobilemenu class for hiding it on smaller devices. I added the second div for showing the dropdown on smaller devices.
<div class="mobilemenu" style="width:90%; margin-left:5%; margin-right:5%; margin-top:0%; margin-bottom:1%; padding:0px;">
<div id="menu" style="text-align:center;width:100%;height:22px; padding:0px;">
<ul id="nav" style="line-height: 22px; width:100%; margin:0px; padding:0px;">
<li style="width:15%;">
<a class="custom" href="./">Home</a>
</li>
<li style="width:20%;">
<a class="custom" href="Order.aspx" >Order</a>
</li>
<li style="width:15%;">
<a class="custom" href="Company.aspx" >Company</a>
</li>
<li style="width:20%; ">
<a class="custom" href="Download.aspx" >Downloads</a>
</li>
<li style="width:15%; ">
<a class="custom" href="Blog.aspx" >Blog</a>
</li>
</ul>
</div>
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="./" selected="">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div>
</div>
Remove the dot (.):
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="/" selected="">Home</option>
{rest of your code goes here}
</select>
I found a solution, although I do not understand why it works so maybe someone could explain.
I changed the html code for the dropdown menu by inserting a "Menu" option as the first option and removed the selected attribute on the Home option. It seems illogical that I have to add a menu item that I dont want.
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option>Menu</option>
<option value="./">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div