I using a library for datalist/autocomplate. But I want to change the width and shape of the data container. How do I remove arrow in red box and make the width is dynamic according to content? No css used.
Link for the library(awesomplete)
<div class="awesomplete">
<input id="sellerId" name="sellerId" autocomplete="off" aria- expanded="false" aria-owns="awesomplete_list_1">
<ul role="listbox" id="awesomplete_list_1" hidden="">
<li role="option" aria-selected="false" id="awesomplete_list_1_item_0"><mark>anush</mark>a - harsha</li>
<li role="option" aria-selected="false" id="awesomplete_list_1_item_1">SRIKAN874 - <mark>anush</mark>
</li>
</ul>
</div>
to remove the arrow just add this css
.awesomplete > ul:before {
display: none !important;
}
Working Sample
.awesomplete > ul:before {
display: none !important;
}
<link rel="stylesheet" type="text/css" href="https://leaverou.github.io/awesomplete/awesomplete.css" />
<script src="https://cdn.jsdelivr.net/npm/awesomplete#1.1.5/awesomplete.min.js"></script>
<input class="awesomplete" data-list="#mylist" />
<ul id="mylist" style="display:none;">
<li>Ada</li>
<li>Java</li>
<li>JavaScript</li>
<li>Brainfuck</li>
<li>LOLCODE</li>
<li>Node.js</li>
<li>Ruby on Rails</li>
</ul>
Screenshot
Related
So I have multiple LI's like below as it's a menu and I am trying to create a drop-down but for some reason, my jQuery code is not working. Can someone help me?
FYI I can't change HTML as it's dynamically generating in Shopify. I can only change jQuery and CSS
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
$( document ).ready(function() {
$("ul.subLinks").addClass("inactive");
});
$('a.site-nav.lvl-1').click(function() {
$(this).find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
Your issue is $(this).find... in the a click handler - at this point, this is the a.
.find() looks at the selectors children - but the menu is not a child of the a, it's a sibling.
Change to
$(this).closest("li").find("ul.subLinks"...
(maybe $(this).next().toggleClass... with a caveat on .this() that it's always the very next element).
Updated snippet:
$('a.site-nav.lvl-1').click(function() {
$(this).closest("li").find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
</ol>
I would like to style the sidebar of my application but somehow the css file is ignored or something.
Code SideBar:
<!-- SideNavBar -->
<div class="sidenavbar">
<ul id="sidenav" class="sidenav sidenav-fixed logged-in"
style="display: none; width: 250px;">
<li class="logged-in" style="display: none;">
Logout
</li>
<li class="admin" style="display: none;">
Create Guide
</li>
<li class="admin" style="display: none;">
Create new Account
</li>
<li class="admin" style="display: none;">
Add Admin
</li>
</ul>
</div>
css:
.sidenavbar{
background-color: black;
}
.sidenavbar ul li :hover{
background-color: grey;
}
I believe since the unordered list and the list items have a display of "none" the div of class "sidenavbar" has no width or height. This is why you cannot see the black background.
you should use your custom css file after source css file. e.x:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" src="yourcssfilename.css">
I have list of to-do tasks, which are made as divs, using the stretched link bootstrap class. Click on the each of the to-do task, opens up a modal with detailed view. However, those divs (to-dos) have checked button which needs to be able to clicked. Right now when you click the checkbox, modal opens and it can't be checked.
Can you help me with this issue?
<div>
<div>
<ul class="list-unstyled list-inline">
<li class="list-inline-item"><div class="checkbox checkbox-success checkbox-single"><input type="checkbox"><label></label></div></li>
<li class="list-inline-item">Name</li>
</ul>
</div>
<a data-toggle="modal" data-target=".to-do-1" data-backdrop="static" data-keyboard="false" class="stretched-link"></a>
</div>
There are 2 options based on information in the question:
either put just the checkbox on a higher z-index than the modal... I did this for the first checkbox where you can check/un-check the checkbox but can't touch the text in the label
or put the checkbox and it's label on a higher z-index than the modal... I did this for the second checkbox where you can select the label text and check/un-check the checkbox
Added a light red color so that it is easy to observe the behavior...
working snippet below:
.myCheckbox,
.complete-checkbox-clickable {
position: relative;
z-index: 21;
}
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(238, 149, 149, 0.23) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div>
<div>
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<div class="checkbox checkbox-success checkbox-single">
<input type="checkbox" class="myCheckbox">
<label>(this is where you should put the label) </label>
</div>
</li>
<li class="list-inline-item">Name</li>
<br/>
<li class="list-inline-item">
<div class="checkbox checkbox-success checkbox-single complete-checkbox-clickable">
<input type="checkbox" class="myCheckbox">
<label>2nd checkbox </label>
</div>
</li>
</ul>
</div>
<a data-toggle="modal" data-target=".to-do-1" data-backdrop="static" data-keyboard="false" class="stretched-link"></a>
</div>
I have pagination
How can I change background of pagination__link with text "left" when click on the other links? It is necessary to use only CSS.
You can do this, but frankly it's messy, using CSS flexible-boxes along with the relatively new :focus-within pseudo-class. This does require reversing the order of <li> elements within the <ul> however:
.pagination {
/* sets the display to use the flex layout: */
display: flex;
/* ensures the contents of the <ul> are shown in
columns and in reverse-order: */
flex-direction: column-reverse;
}
/* selects first the <li> that has a focused element
within it, then finds all subsequent <li> elements,
using the general-sibling combinator ('~') that
also matches the :last-child pseudo-class (there can,
obviously, be only one) then finds the <a> element(s)
which is a child of that <li> element: */
li:focus-within ~ li:last-child > a {
background - color: red;
}
<ul class="pagination">
<li class="pagination__item pagination__item--active">
<a class="pagination__link" href="#">
Page 2
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#">
Page 1
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#">
left
</a>
</li>
</ul>
External JS Fiddle demo.
References:
:focus-within.
flex-direction.
General Sibling Combinator (~)
"Using CSS Flexible Boxes" (MDN).
input[name="radio"]{
display: none;
}
label{
text-decoration: underline;
color: blue;
}
input[name="radio"]:checked + label{
background-color: yellow;
}
<ul class="pagination">
<li class="pagination__item">
<input type="radio" id="radio1" name="radio" />
<label for="radio1">left</label>
<!--
<a class="pagination__link" href="#">
left
</a>
-->
</li>
<li class="pagination__item">
<input type="radio" id="radio2" name="radio" />
<label for="radio2">Page1</label>
<!--
<a class="pagination__link" href="#">
Page 1
</a>
-->
</li>
<li class="pagination__item pagination__item--active">
<input type="radio" id="radio3" name="radio" />
<label for="radio3">Page1</label>
<!--
<a class="pagination__link" href="#">
Page 2
</a>
-->
</li>
</ul>
Maybe it's not the answer what you want.
But I think it can be good hint for your problem.
You can use the checkbox trick or radio trick.
Hey guys this is my second question so far on a website i'm re-designing for my boss. I'm trying have it where if the user hovers over "4-Color Offset Printing" the background of the div ID will change to another background-color. (Example blue). I've tried adding #4_color_offset_printing:hover to see if that will just simply change the background color. This usually works but on this navigation bar it seems to not be working. Right now the default background is green. I'd like it to turn blue when i hover over it. I'm trying to apply this affect to every link but if i could get one working i could figure out the rest.
The older style of the navigation bar is the Gray with the blue link hover affect. The last developer that designed the site decided to use inline CSS. I'm not a fan of inline, but even if i try to simply copy and paste his inline code to the main.css it does not take affect. I have no idea why that would be happening. If anybody has any advice that would be great!
Here is my Demo
<style type="text/css"></style></head>
<body class="desktop webkit webkit_525">
<div id="header">
<div class="content_width rel">
<a href="./Welcome to our site!_files/Welcome to our site!.html">
<div id="header_logo"></div>
</a>
<ul id="top_nav">
<li><a class="home_icon" href="./Welcome to our site!_files/Welcome to our site!.html">Home</a></li>
<li>Contact</li>
<li>Estimates</li>
<li>Help Center</li>
<li>Samples</li>
<li>Shopping Cart</li>
<li class="last-child">My Account</li>
</ul>
<ul id="loginbar" class="rounded">
<li>New Account</li>
<li class="last-child">Login</li>
</ul>
<div id="header_products"></div>
<div id="header_phone">Customer Service: (949) 215-9060</div>
<div id="product_search">
<input id="product_ti" class="default" type="text" value="Find A Product">
<input id="product_btn" type="button" value="Search">
<input id="product_default" type="hidden" value="Find A Product">
</div>
</div>
</div>
<div id="nav">
<ul id="nav_links" class="content_width_adjust">
<li id="4_color_offset_printing" style="width:183px; height:44px; background-color:#0C0; border-top: 4px solid #009ad6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" class=""><a class="nav_parent narrow" href=""><span>4-Color Offset Printing</span></a></li>
<li id="large_format" style="width:139px" class=""><a class="nav_parent wide" href=""><span>Large Format</span></a></li>
<li id="1-2_color_printing" style="width:164px"><a class="nav_parent" href=""><span>1&2 Color Printing</span></a></li>
<li id="4_color_digital_printing" style="width:189px"><a class="nav_parent narrow" href=""><span>4-Color Digital Printing</span></a></li>
<li id="roll_labels" style="width:130px" class=""><a class="nav_parent wide" href=""><span>Roll Labels</span></a></li>
<li id="services" class="last " style="width:133px"><a class="nav_parent services" href=""><span>Services</span></a></li>
</ul>
</div>
An elements ID can't start with a number, only classes can. Removing the 4_ from '4_color_offset_printing' so you just have a ID of 'color_offset_printing' will allow you to target it in CSS.
If you really don't want to change your ID's, you can target ID's that begin with a number like this:
[id='4_color_offset_printing'] {
background: blue;
}
But I wouldn't recommend using that, it may not work well in all browsers. Best to do things the right way and not use numbers to start your ID's.
Need to add to the #nav_links li a:hover class
#nav_links li a:hover
{
background-color: blue;
}
https://jsfiddle.net/akdz7udj/7/