I am trying to style a little bit my menu.
I am using bootstrap and font awesome css styles.
I think it will much better to show the problem on live page.
I need to achieve two goals
I need to put this chevron icon at the bottom with little margin (2-3px)
like this. So it should be at the bottom in any case with little margin.
The problem is that < li > items is not resized according to the content inside it. As you can see on this screenshot. It is sticked to the bottom border and if I add some margin I will get following result
I am using following styles
.item-icon-container {
margin: 2px 0 15px 0;
float: right;
display: block;
height: 100%;
}
.item-icon-container .expand-indicator {
display: block;
}
.item-icon-container .badge {
display: block;
}
Here is full HTML code http://pastebin.com/S26C9xSU
Please help to solve the problem.
I would be grateful for any help
To make sure that all elements inside LI affected it's height we can add last element into LI with style clear:both
Possible solutions:
1) Use CSS with :after selector
.list-group-item a:after{
content:"";
font-size: 1px;
display:block;
clear:both;
}
2) Extra element. At the end of each li you can add
<div style="clear:both;"></div>
Something like:
<li id="cat-id-5" class="cat-parent-empty list-group-item">
<div class="item-icon-container">
<span class="badge">1</span>
<i class="fa expand-indicator fa-chevron-down"></i>
</div>
<a href="http://crosp.net/category/technology/" title="View all posts in Technology">
<i class="fa fa-tasks fa-fw" aria-hidden="true"></i>
Technology
</a>
<div style="clear:both;"></div>
</li>
CSS style looks better. Extra element has better compatibility.
Try adding padding to your expand-indicator element (I'm guessing, without seeing your HTML). https://jsfiddle.net/ve39a1qj/
.item-icon-container .expand-indicator {
display: block;
padding-bottom: 20px;
}
Related
i hope to use a navigation menu bar which extracted from another post in stack overflow. here is my code
CSS
<style>
header, nav {
background-color:#06C;font-family:'Open Sans';
}
header {
width:100%;display:flex;align-items:center;
height:80px;color:#FFF;justify-content:flex-start;
} /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */
#hamburger {
cursor:pointer;
} /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */
header * {
margin:0 15px;
}
.fa-bars, header h2 {
font-size:28px!important;
}
header h2 {
font-weight:400!important;
}
nav {
display:flex;flex-direction:column;width:0;align-items:center;
transition:width 0.2s ease;
}
nav.open {
width:250px;
height:100%;
}
nav.close {
width:0;
}
nav * {
color:#FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;
}
nav a {
text-decoration:none!important;
border-top:0.5px solid gray;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;height:55px;
}
nav a:hover {
background-color:rgba(0, 0, 0, 0.1);
} /* this changes the bg color on hover over the nav element */
</style>
HTML
<header>
<i id="hamburger" class="fa fa-bars"></i>
<h2>AndroidCSS</h2>
</header>
<nav>
<i class="fa fa-star"></i> <span>Terms and conditions</span> <!-- nav menu no need for <ul> or <li> tags here -->
<i class="fa fa-calculator"></i><span>Privacy Policy</span>
<i class="fa fa-envelope"></i><span>About Us</span>
<i class="fa fa-facebook"></i><span>Help</span>
</nav>
JAVA SCRIPT
<script>
$("#hamburger").click(function(){
$("nav").toggleClass('open', 'close');
});
$("a").click(function(){
$("nav").toggleClass('open', 'close');
});
</script>
I want to get align left menu items with left padding 10px.(tried lot of ways. but unsuccessful)
I want to put hamburger icon in right side of navigation bar.
I need to close opened menu on outside clicking using pure javaScript.(by clicking anywhere outside)
all must be responsive.
please help me to solve these three problems. it's highly appreciated.
This is the fiddle: https://jsfiddle.net/akslk/105phkog/10/
Remove the display: flex from the <a> tags;
Add a display: flex !important, flex-direction: column and
justify-content: flex-start to your <nav> tag;
Here's an example:
jsfiddle.net/mdyvzx09/2
Feedback: adding linebreaks in your CSS code can improve its readability :)
.ellip {
width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
abbr[title] {
border-bottom: none !important;
cursor: inherit !important;
text-decoration: none !important;
}
<div class="ellip">
<input type='checkbox' value='"+a.a+"' name='radio' title='"+a.b+"' class='"+a.c+"'><span id='"+a.b+"'><abbr title='"+a.a+"'>"+a.a+"</abbr></span><i class='fa fa-pencil' aria-hidden='true' ></i>
</div>
I have some data inside a div and when it exceeds the div length, the text inside it will be ellipsed and the complete text of that particular item should be displayed using <abbr>. But now <abbr> is working for all data. How can I make it work for only ellipsed text? Can I achieve this using javascript or jquery ?
As we had discussed in comments, the issue here is specificity. The CSS you list in your original post targets <abbr> throughout the document, where your goal is to only target <abbr> found within a wrapper of .ellip.
The solution then, is to ensure that your CSS is specific enough:
.ellip {
width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.ellip abbr {
border-bottom: none;
cursor: inherit;
text-decoration: none;
}
<div class="ellip">
<abbr title="This should not be underlined in Chrome">This should not be underlined in Chrome</abbr>
</div>
<abbr title="This should be underlined in Chrome">This should be underlined in Chrome</abbr>
Again, you're going to see different results in different browsers depending on how that browser has chosen to style the <abbr> element. Some (like Safari) offer no styling at all, while others choose to apply smallcaps or various underline effects.
I have a button like below with me.
<button type="submit" class="search-btn" id="search-submit-header"></button>
It has certain functionality which I want to apply to this span so that It does the same work as the button. I want to use the CSS of the span.
<span class="search-btn">
<i class="fa fa-search"></i>
</span>
How can I get this. i.e. Functionality of the button working on the span.
Apologies for a dumb question.
Simply put the style info to anchor tag. For Example check below line
<a href="#" class="search-btn">
<i class="fa fa-search"></i>
</a>
Note: Clear all the style information of anchor tag
and write supporting javascript code
function doSomething(){
//your code
}
$('.search-btn').click(doSomething);
Try something like this
<!DOCTYPE html>
<html>
<body>
<style>
.ButtonSpan {
/*width: 500px;
height: 500px;*/
border: 1px solid black;
background: #e0e0e0;
padding: 25px;
}
</style>
<button type="submit" class="ButtonSpan">test</button>
<span class="ButtonSpan">test</span>
</body>
</html>
Find what css is currently applied on your <button> element.
There are several ways to do it but the most simple one is (in chrome) you can right-click > inspect element > press "ctrl + shift + c" and click on button > elements tab > Computed tab (on RHS) and see what css is currently applied.
Copy major properties of css from there and apply them on span.search-btn class in css.
for example:
span.search-btn {
width: 20px;
height: 10px;
border: 1px solid black;
padding: 20px;
}
I created a slider seeker but cant seem to get it to the center of the div. I used span and kept the background-image as the seeker image. How do I set the position to the center. Is there any other good method to implement this.
<div class="slider-seeker">
<span class="position-image active"></span>
<span class="position-image"></span>
<span class="position-image"></span>
<span class="position-image"></span>
</div>
http://jsfiddle.net/j1bnbf3q/
Solution 1
Create a wrapper div to contain the seeker buttons, and centralize the wrapper: http://jsfiddle.net/pwLsb290/
Solution 2
Apply display: inline-block; on the seeker buttons, and get rid of the float property. (The problem with this method is the whitespace associated with inline-block elements.)
http://jsfiddle.net/26dk1zeL/
Used to this css add your .position-image display:inline-block property and remove float: left; as like this
.position-image{
/* float: left; */ // remove this
display: inline-block; // add this
vertical-align: top; // add this
}
===========
2nd option is
Demo
used to this
.slider-seeker > a {
display: inline-block;
vertical-align: top;
}
See fiddle
CSS:
.slider-seeker a{
margin:0px auto;
}
.position-image {
display:inline-table;
}
I have tried to combine a span element and a list that uses in-block formatting. There seems to be so misalignment of the elements.
Also, would anyone know how to wrap the elements within a fixed width?
Her's a link
<http://jsfiddle.net/joewaldronrit/3nhdnbL8/#&togetherjs=97QmIzvPKD>?
CSS:
.word-sugg-hint{
position:absolute;
top: 50px;
text-align: left;
font-size: 12px;
padding-right: 0px;
color:rgb(32,106,138);
}
.sugg-details{
display:inline-block;
text-align:left;
}
ul.suggestion-list li{
display: inline-block;
font-size: 14px;
height:0px;
}
ul.suggestion-list{
display: inline-block;
font-size: 12px;
margin-left: 0px;
padding-bottom:3px;
}
ul.suggestion-list li:hover{
color:rgb(105, 131, 73);
cursor:pointer;
text-decoration: underline;
}
ul.suggs.suggestion-list li{
/*
width:180px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
*/
float: left;
height: 20px;
color:#0000FF;
font-size:14px;
display:inline-block;
padding:0px;
}
Javascript:
var crateItems = ["apples", "bananas", "grapefruit"];
var suggList = document.getElementById("suggestion-list");
for (var i = 0; i < suggList.children.length; i++) {
if (crateItems.length === i) break;
suggList.children[i].innerHTML = crateItems[i] + (i < crateItems.length - 1 ? "," : "");
}
HTML
<div class="word-sugg-hint" id ="sugg-div">
<h class="sugg-details"> Did you mean? </h>
<ul id="suggestion-list" class="suggestion-list suggs">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
This answer assumes that instead of an <h> element, you mean <span>.
The main reason your elements were misaligned was your float:left was clashing with your display: inline-block. That solved your first problem. Your second question, how to wrap elements within a fixed width. If you see my jsFiddle, I simply wrapped the span and ul with a div that had a class called 'wrap'. I gave that element a fixed width. I also gave it a background color so you can easily see the width of each div. Because div's are block elements, I had to make it display as inline-block. You will see the text is aligned, and the widths are the same. Take away the background color, and I think it renders the way you wish: http://jsfiddle.net/3nhdnbL8/2/
As a greater take away, may I suggest, when working with CSS to get the desired look, too often we keep adding stuff. It is important to remember that when you add something, that may clash with something that already exists. Each time you want to add something, I would first ask if there is anything you should take out. It is a good idea to plan our CSS the same way we plan our JavaScript. Too much CSS causes a great deal of conflicts, and can become very difficult to debug.
Good luck.