I am having problems getting text-overflow to work. I also cant get normal overflow:hidden to work either. Any ideas or suggestions?
Here is the css code without either. (Please note it is written in OOCSS / BEM syntax).
/* Base
=====================================================*/
/* Nav
=================================================*/
/* B
---------------------------------------------*/
.nav
{
margin-bottom: 24px;
margin-left: 0;
padding-left: 0;
list-style: none;
}
/* E
---------------------------------------------*/
.nav__item
{
float: left;
position: relative;
}
.nav__link
{
display: block;
color: inherit;
text-decoration: none;
}
and the HTML
<ul class="pivot nav" style="font-size:24px">
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
List Item 1
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">
List Item 2
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">
List Item 3
</a>
</li>
</ul>
I also tried wrapping it in a parent div and applies text-overflow / overflow to that..no luck.
I'm guessing that the lines wrap before any overflow rule kicks into action. You will need to do this to prevent line breaks:
.nav__item {
white-space: nowrap;
}
I'm not sure which element you want to hide the overflow on, so I created this fiddle: http://jsfiddle.net/bACQD/. Feel free to modify it to clear up any confusions.
adding display: inline-block; *display: inline; zoom: 1;
allows nowrap to work. It does not work on display:block;
Related
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I've seen other posts similar to this but they didn't seem to provide a solution. I'm kaing a js calendar and the days are inside a however I cannot get the items to align left, it seems like they are padded on the left side see img below.
I am hoping someone can tell me if theres a way to remove this ghost padding?
many thanks :)
I have included my current code and the css classes I'm currently using. I have a few vue inline styles but
<!--jan-->
<div v-if="month==1" class="month">
<div>
<div>
<b>January</b><br><span> {{this.year}}</span>
</div>
<div>
<ul v-bind:style="{ 'display': 'flex', 'justify-content':'space-between'}">
<li class="prev">❮</li>
<li class="next">❯</li>
</ul>
</div>
</div>
<ul class="weekdays">
<li class="days">Mo</li>
<li class="days">Tu</li>
<li class="days">We</li>
<li class="days">Th</li>
<li class="days">Fr</li>
<li class="days">Sa</li>
<li class="days">Su</li>
</ul>
<ul class="daysList">
<li class="daynum">1</li>
<li class="daynum">2</li>
<li class="daynum">3</li>
<li class="daynum">4</li>
<li class="daynum">5</li>
... etc
</ul>
</div>
<!--jan-->
////css//////
.daysList{
width: 100%;
list-style: none;
display: flex;
flex-wrap: wrap;
text-align: left;
justify-content: left;
background: rgb(231, 131, 131);
}
.daysList li{
background-color: lime;
display: inline;
margin: .5em;
width: 22px;
padding: 5px;
}
.daysList li:hover{
cursor:pointer;
color:white;
background-color: blue;
}
The <ul> has some margin and padding added by the user agent stylesheet. You can remove them from your calendar component's <ul>s with:
<style scoped>
ul {
margin: 0;
padding: 0;
}
</style>
demo
I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using
<p> </p>
for line breaks. I'm not even kidding.
Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.
CSS (this is the client's, so yell at them)
#header_menu_container
/* This is verbatim from the code I am working with. I seriously have NO IDEA why this selector even exists. */
{
}
#header_menu
{
margin: 0;
display: inline-block;
list-style: none;
font-size: 15px;
}
/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}
.no_submenu, .has_submenu
{
display: block;
float: left;
position: relative;
}
.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}
.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}
.has_submenu span{
cursor: pointer;
_cursor: hand;
}
.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}
.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}
.is_submenu li a:hover{
color: #b55239;
}
HTML (based on client's, with a bit of my modification)
<ul id="header_menu">
<li class="no_submenu" style="width: 63px;">
<b>Home</b>
</li>
<li class="has_submenu" id="who-we-are">
<b><span style="width: 103px;">Who We Are</span></b>
<ul class="is_submenu" style="display: none;">
<li>
<b>Janyce Lastman</b>
</li>
<li>
<b>Ziny Kirshenbaum</b>
</li>
<li>
<b>Tutors</b>
</li>
</ul>
</li>
<li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Consultant To Schools</b>
</li>
<li>
<b>Education Consulting And Case Management</b>
</li>
<li>
<b>Educational Assessments</b>
</li>
<li>
<b>School Placement Consultation</b>
</li>
<li>
<b>Seminars And Workshops</b>
</li>
<li>
<b>Test Tips Support</b>
</li>
<li>
<b>Tutoring</b>
</li>
</ul>
</li>
<li class="has_submenu" id="media-and-press">
<span style="width: 113px;"><b>Media & Press</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>In the Press</b>
</li>
<li>
<b>Book Reviews</b>
</li>
<li>
<b>Selected Articles</b>
</li>
<li>
<b>Interesting Links</b>
</li>
</ul>
</li>
<li class="no_submenu" style="width: 53px;">
<b>FAQ</b>
</li>
<li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Testimonials for TTG Tutors</b>
</li>
<li>
<b>Testimonials for Janyce Lastman</b>
</li>
</ul>
</li>
<li class="has_submenu" id="contact-us">
<span style="width: 70px;"><b>Contact</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Contact Info</b>
</li>
<li>
<b>Employment Opportunities</b>
</li>
</ul>
</li>
</ul>
</div>
There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.
It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)
So looking back over the code again, I think I've figured out the problem.
Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu, e.g.
<span style="width: 73px;"><b>Services</b></span>
Idiots.
I'm going to try and write something similar into the stylesheet properly.
I'm trying to adapt this jsfiddle to work without radio button since I cannot use any <form> related tags, and neither javascript!
I "transformed" the <input type='radio'> into <a> tags, and transform the :checked pseudo class into :target
as you can see in this CodePen.
but it does not work :-(
And also solution I used to show first Tab is not usable
Can suggest what's wrong?
Thanks
Joe
Alright, using the :target pseudo-class we can achieve this.
EDIT: I added a wrapper div so you can use position absolute on the panels. This allows you to have the first panel open and switch between them.
.wrapper {
position: relative;
}
.tab-container {
display: none;
position: absolute;
top: 0;
left: 0;
background: red;
}
.tab-container:first-child { display: block }
:target { display: block }
/* just for demo */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 1rem;
}
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="wrapper">
<div id="tab-1-container" class="tab-container">
Tab 1 content
</div>
<div id="tab-2-container" class="tab-container">
Tab 2 content
</div>
<div id="tab-3-container" class="tab-container">
Tab 3 content
</div>
</div>
I have Bootstrap 3 integrated into my web application. I am trying to style secondary/drop-down menus from the main nav so the items are displayed inline. The Bootstrap 3 class for this is <ul class="list-inline"> (that obviously being the nested one), but it is not working.
I see the associated CSS rules come through in Chrome devtools, so it's not a cache issue. The class and rules are being applied, and the declaration is not being overridden (no strike-through line). The markup structure is as follows:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="navbar navbar-nav">
<li class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="/item1">Item 1</a>
<ul class="dropdown-menu list-inline">
<li>SubItem 1</li>
<!-- Some more secondary nav <li>'s here... -->
</ul>
</li>
<!-- Some more primary nav <li>'s here... -->
</ul>
</div>
There are many style rules being applied to the various classes here, so I'm only pasting in the CSS for the nested <ul>...
.dropdown.open .dropdown-menu {
margin-top: 3em;
background-color: #525252;
}
/* I didn't write any of these styles - maybe Bootstrap's? */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 10000;
<strike>display: none;</strike>
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
<strike>background-color: blah blah</strike>
<strike>border: blah blah</strike>
border: 1px solid rgba(0, 0, 0, 0.15);
background-clip: padding-box;
}
...and the child list items...
.list-inline > li:first-child {
padding-left: 0;
}
.list-inline > li {
display: inline-block;
<strike>padding-left: 5px;</strike>
padding-right: 5px;
}
I have also tried manually adding display: inline and inline-block, as well as float: left, but nothing has worked. If it's relevant, I'm using Sass (SCSS) for the CSS, and the Sass 3.2.3 and Bootstrap gems (this is a Rails app). The styles are all compiling into one big application.css file using #import directives.
I'm having a hard time trying to center a dropdown which is toggled by a button in a group. The group is centered correctly but the dropdown continues at the left corner.
Here is an example.
Can someone help?
Thanks in advance!
If you want to center your div.dropdown inside another div do it like so:
#dropdown1 {
width: 183px;
margin: 0 auto;
}
The drawback of it is that you need to know the exact width of the element you are centering (thats the reason I use an id as a selector; of course you need to assing it first).
See how it works on your updated fiddle.
Maybe you are looking for something like that : Live demo (jsfiddle)
.centered {
text-align: center;
}
.centered .dropdown {
display: inline-block;
min-width: 500px; /* Needs to be big enough for the menu to be centered in it */
}
.centered .dropdown.open .dropdown-menu {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
}
<div class="centered">
<div class="dropdown">
<a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
Edit completed the CSS