My product names are very long and they need to stay long.
When the breadcrumb shows the product page, if the screen is small (for example mobile view) the breadcrumb overflows the layout and it causes the browser not to show the page correctly.
I tried to add <p class="overflow-ellipsis"> and also <p class="overflow-visible">to the DIV of the product page which did not work, I tried to add text-overflow: ellipsis; and also text-overflow: visible; to the css in breadcrumb section, which also did not work, I also changed the white-space: nowrap; in breadcrumb css to white-space: normal; and it still did not fix the issue.
Here is a link to one of my pages for example, please make the screen small or see in mobile to replicate the issue.
http://www.nativeamericanwholesale.com/$80-tag-authentic-made-by-charlene-little-navajo-kingman-turquoise-wrap-bracelet
I will need the product name to stay in layout (frame) and preferably goes to second line instead of overflowing the page.
Please note that I do not want to use hidden visibility or anything to cut it out due to SEO issues.
Set white-space for your breadcrumbs:
.breadcrumb > li {
white-space: normal!important;
}
I used !important to override any other code for .breadcrumb > li, but you should know this is not a good practice.
I confirm white-space: normal (and white-space: break-all) isn't enough for OpenCart's breadcrumb issue.
.breadcrumb>li:after{top:50%;transform:translateY(-50%) rotate( -45deg );}
.breadcrumb>li{white-space:normal;display:table-cell;vertical-align:middle;}
.breadcrumb>li:last-child::after{display:none;}
This will fix your issue.
Add this thing to your class.
.breadcrumb li > a {
white-space: normal;
}
Here you need to use .breadcrumb li > a because product name inside a tag in future if will add any other tag inside then li then it will affect to everywhere so better is to used .breadcrumb li > a.
Related
I am not very good at CSS and I know just enough to customize my site.
The problem I am facing is related to .entry-content ul li elements. On pc, they are shown normally, words don't break randomly but on phone, they break randomly at any character - for example, supernatural will be "supernatura" and the next line under will contain the remaining "l".
I am desperate and don't know how to fix it.
I tried the code they recommended
.entry-content ul li{
word-break: break-all;
max-width: 420px;
}
but that messed up my pc version, which was doing the same (breaking words randomly at any random letter) and did not fix my phone version either so I had to remove it completely.
Thank you
There use to be a word-break value of 'break-word' but that ended up getting deprecated. Rather than using word-break, try replacing it with 'overflow-wrap: break-word' and that should fix your problem.
I don't know who recommended you that kind of code, because that code will literally break it and will not compatible in all devices, it looks to me that you're having trouble in the genre tags overlapping of text. You might try this one below, I'll keep changing my answer until we got it correctly:
.entry-content ul li{
white-space: nowrap;
max-width: unset;
overflow: unset;
width: auto;
}
See here: codepen.io/arnaudfabs/pen/waXWJLenter code here
I am using Zurb Foundation 5 to build a mega menu. I need the item name and its price on the same line for each product.
I added a span float right for the price and it shows well on Chrome and IE.
In Firefox, the price is going out of the li tag and is not even clickable.
See pictures:
Good:
Bad:
Any thoughts on what to do?? Thanks!
Removing the style white-space: nowrap; on .top-bar-section .dropdown li a seems to fix your problem in FireFox.
or just override it like this:
.top-bar-section .dropdown li a{
white-space: normal;
}
My custom drop down menu has a really large change in top and bottom padding.
UPDATE Javascript, CSS & HTML included in fiddle [PHP removed]
First off, I didn't realise I could share a fiddle ^^
Pretty epic site.
I'ma keep debugging, but thought I'd post it here to see if anyone can spot where the problem is :)
In your fieldset css you are changing the line-height, which is also applied to the dropdown.
You have to set the line-height in the css for the dropdown:
.dropdown,
.dropdown li /* or whatever other selector is also needed */
{
line-height: 1em;
}
EDIT:
That seems to fit quite good:
.dropdown,
.dropdown li,
.dropdown span,
.dropdown a {
padding: 0;
line-height: 3em;
}
I am testing a site build with a slow connection and I noticed the jQuery Accordion stays expanded for a long time, until the rest of the site is loaded, and then finally collapses. Not very pretty. I was wondering how I could keep it collapsed through the loading process and only expand when clicked.
I am working with the standalone 1.6 version of the accordion plugin.
The basic structure :
<div class="sidebar">
<ul id="navigation" class="ui-accordion-container">
<li><a class="head" href="#">1</a>
<ul class="sub">
<li>1a</li>
<li>2a</li>
</ul>
</li>
</ul>
</div>
and the script
jQuery().ready(function(){
jQuery('#navigation').accordion({
active: 'false',
header: '.head',
navigation: true,
animated: 'easeslide',
collapsible: true
});
});
I tried to hide the elements in the CSS to keep them from appearing while loading but all that achieved is in having them always hidden.
Maybe the problem is in the CSS I have a background image in each of the sub menus:
#navigation{
margin:0px;
margin-left: 10px;
padding:0px;
text-indent:0px;
font-size: 1.1em;
width:200px;
text-transform: uppercase;
padding-bottom: 30px;
}
#navigation ul{
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li{
list-style:none outside none;
}
#navigation li ul{
height:185px; overflow:auto;
}
#navigation li ul.sub{
background:url('../images/sub.jpg') no-repeat;
dispaly: block;
}
#navigation li li a{
color:#000000;
display:block;
text-indent:20px;
text-decoration: none;
padding: 6px 0;
}
#navigation li li a:hover{
background-color:#FFFF99;
color:#FF0000;
}
Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed.
-edit - I forgot to mention that I am also hoping for a solution that will allow the nav to still be accessible for those without Javascript.
I do this first thing with all my sites: Right after the body tag, put a script tag with this javascript:
jQuery('body').addClass('js');
This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.
There are good solutions to the rest of your problems in the other answers. You'll just need two "base" styles instead of one:
#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }
... and then re-open before applying the accordion on dom.ready.
EDIT: If you're loading jQuery at the end of the page (or aren't using jQuery), you can use this straight javascript version:
<script type="text/javascript">
var b = document.getElementsByTagName('body')[0];
b.className+=b.className?' js':'js';
</script>
I faced this very problem a week ago. I set the container to display:none and then used jQuery to make it show up at the appropriate time:
$(".accordion").show();
$(".accordion").accordion();
Code inside jQuery.ready() doesn't run until the DOM is ready — so it's normal for elements that will eventually be hidden to stay visible for a while. Accordion is set up this way partly for ease of use and partly for the sake of graceful degredation: content won't be missing (hidden) if JavaScript is disabled.
If you're willing to risk a page that breaks without JavaScript, go ahead and set your elements to be hidden. Then, immediately before .accordion(), show() them.
Here's an idea to maintain compatibility. It has been minimally-tested and is open to comment.
Leave your CSS alone, but add this to the top of your JavaScript (outside jQuery.ready()):
document.styleSheets[0].addRule(".yourclass", "display:none");
That way, as the page is being constructed, a CSS rule will be set up to hide your hidden elements. Then, inside jQuery.ready(), call $(".yourclass").show() to bring them back before initializing the accordion.
Do your .accordion binding directly in a <script> just below the accordion elements instead of waiting for document ready.
They'll then activate as soon as possible, rather than waiting until the page is ‘ready’ (which can take a long time especially on IE, which doesn't support the DOMContentLoaded event, so jQuery has to wait for onload, which only fires after all the images and everything are loaded).
You could set the accordion parent element to ‘visibility: hidden’, and then restore it to ‘visible’ manually when the script initialises. But then browsers with JavaScript off won't see the content at all, which isn't ideal.
be careful using this with regard to accessibility:
body {
display: none;
}
If for whatever reason javascript is turned off, then nothing will be displayed ;)
I haven't used UI accordion, but I have built accordions with jQuery. The only thing the script does is to alternate the visibility of the accordion panels. So if one panel is visible when the page loads, then perhaps you should try using a CSS rule such as:
ul.sub{
visiblity:hidden;
display:none;
}
I tried to hide the elements in the
CSS to keep them from appearing while
loading but all that achieved is in
having them always hidden.
Why don't you try making it hidden in the css, and then do this:
jQuery('#navigation').show().accordian...
I have hundreds of jQuery elements (tabs, sliders & accordions) across many portal sites. Setting hide/show styles for each isn't a realistic option.
Simple solution, hide the body until jQuery is ready and has built the elements, then show the body.
In my master stylesheet:
body {
display: none;
}
In my master javascript file, at the bottom of jQuery.ready():
$(document).ready(function() {
$("body").show();
}
I have been using css solutions like the one Tim suggested, but these would mean to hide content for people with javascript disable (or devices with no javascript support). I much prefer the solution provided by Jerph, thanks for sharing.
I haven't used UI accordion, but I have built accordions with jQuery. The only thing the script does is to alternate the visibility of the accordion panels. So if one panel is visible when the page loads, then perhaps you should try using a CSS rule such as:
ul.sub{
visiblity:hidden;
display:none;
}
I've got a stylesheet that will not, for whatever reason, apply list-style-type to a UL element. I'm using YUI's Grid CSS with their reset-fonts-grid.css file, which I know strips that out as part of the CSS reset.
After calling YUI, I call the stylesheet for the website and in there have a block for UL:
ul {list-style-type: disc;}
I've also tried setting it via list-style but get the same result. I know that the above CSS block is getting read as if I add things like padding or margins those do get applied. The style-type isn't showing up in either Firefox or IE.
The only other CSS I've applied to UL's are in a #nav div but that CSS doesn't touch the list-style-type, it uses the reset that YUI provided, and YUI and the site style sheet are the only two CSS sheets that are called.
I've also got FCKEditor on the admin side of the site and that editor does show the bullet styles so I know it has to be something with the CSS that isn't being filtered by FCKEditor.
You need to include the following in your css:
li { display: list-item; }
This triggers Firefox to show the disc.
and you can also give a left-margin if the reset.css you are using make all margin null :
that means :
li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}
Assuming you apply this css after the reset, it should work !
Matthieu Ricaud
If I'm not mistaken, you should be applying this rule to the li, not the ul.
ul li {list-style-type: disc;}
I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.
Margin messes with this too
This problem was caused by the li display attribute being set to block in a parent class. Overriding with list-item solved the problem.
Make sure the 'li' doesn't have overflow: hidden applied.
My reset.css was margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:
li {
list-style: disc outside none;
margin-left: 1em;
}
ul {
margin: 1em;
}
I had this problem and it turned out I didn't have any padding-left on the ul, which was stopping the discs from being visible. The default padding-left for ul elements is 40px.
The and elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).
(Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
All I can think of is that something is over-riding this afterwards.
You are including the reset styles first, right?
Have you tried following the rule with !important?
Which stylesheet does FireBug show having last control over the element?
Is this live somewhere to be viewed by others?
Update
I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.
The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.
In IE I just use a class "normal_ol" for styling an ol list and made some modifications shown below:
previous code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0; width:500px;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; float:left; width:100%;}
modified code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; }
Turns out that YUI's reset CSS strips the list style from 'ul li' instead of just 'ul', which is why setting it just in 'ul' never worked.
Make sure you have no display property set in the li tag in my case I had a display: flex property on my li tag for some reason.
please use inline css
<li style="disply:list-item">my li content </li>
All you have to do is add this class to your css.
.ul-no-style { list-style: none; padding: 0; margin: 0; }
Including the padding and margin set at 0.
Some reset.css set the ::marker to content : "", try to unset that on the <li> element:
li::marker {
content : unset;
}