I've been facing a problem - I need to make a category page for an e-commerce website. The client's required design depicts that they need to get a horizontal line after the category title (which is dynamic).
I've done it to this part.
However, the issue arises when the client needs to change the category name. In the attached picture, it says "Category 2". Client may change it to 'Men's Collection', 'Winter Collection', 'Men' or whatever.
The problem is, since we don't know about the width that this category name is going to occupy, how can I manage the horizontal line's width (highlighted in a red box).
I'm also putting a screenshot of the css that I've applied.
The position of the line being absolute, width does need to be managed.
How can I manage this width? :(
Use a flexbox to solve the issue- see the example below:
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.wrapper:after {
content: '';
flex: 1;
height: 1px;
background: #ccc;
margin-left: 10px;
}
<h1 class="wrapper">
category name
</h1>
IDK why is my question demoted.
However, I've done a little thing that will work fine =>
For the "Sort By" section, I've made the background color white.
For the whole row containing the category, :after line and Sort By section, I've hidden the overflow.
That's working fine, however I'ld have appreciated only if I could get some other approach to work.
Well it should be dynamic if you specify the width of the :after element as a percentage. Since it is getting the width of the parent (which is the title), the width will adjust on the percentage amount of whatever the title is.
Related
On my wordpress / woocommerce website I have a lot of product options, in my cart where those options are displayed - the options chosen are presented as a fluent text as oppose to have one option per row which would look a lot more structured and would be easier to read.
My question is if its possible, using CSS to structure the fluent text into rows, CSS would be the most convenient way for me to resolve it although I am open to other options as well.
Try adding the following product to cart LINK
Add to cart button says "LÄGG TILL I KUNDVAGN" on my language.
Then go to CART.
As you can see in the first column beneath the title and beside the product image - Type of option in regular text then : and chosen option in bold text.
First two options are "Bredd: 5 (480 mm) Höjd: 5 (480 mm)"
What I want is it to be displayed like this instead:
Bredd: 5 (480 mm)
Höjd: 5 (480 mm)
Etc.
Is there an easy solution to this problem? Again preferably via CSS?
Thanks a lot in advance!
if you would like all of the items stacked, apply
.variation{
display: flex;
flex-direction: column;
}
You can use flexbox for this. Add following CSS to resolve this issue
.tm-cell { /*Or you can update your selector*/
display: flex;
align-items: center;
justify-content: space-between;
}
if you inspect the html code you can see that the div surrounding the entries is:
<div data-uniqid="58ede56aeca6c6.03775072" data-logic="" data-haslogic="" data-fblabelshow="" data-fbvalueshow="" class="cpf_hide_element tm-cell col-6 cpf-type-select prod-height-div">
It's class width is set to 50%, so you can set it to 100% by adding this to your css:
.tm-extra-product-options .col-6,
.tm-extra-product-options .tm-cell.col-6,
.tc-cell.tc-col-6, .tc-col-6 {
width: 100% !important;
}
I'm having an issue where when my nav items were set to inline-block, the sub-menu would render right below the the appropriate <li>, like these two examples:
and
Now that it is a inline-flex, it is rendering right on top of the li instead, covering it.
I tried manually positioning the submenu 52px down, but that is only a solution if the <li> is on the top row, since once it's on the 2nd row it would now need to be 104px down.
Is there any good way to fix this?
URL in comments below
Although these are default values. Try to set flex-basis: 0; also make sure the flex-wrap: nowrap; is set. As comment instructed it is wiser to share your code to have a detailed answer.
Edit 1:
Thank you for the link to the code. Question is now clear, solution can be achieved by giving higher order number to the .navPage-subMenu class.
But first please remove the position: absolute from the class name .navPage-subMenu then add the order value of you like higher then <li>'s have. Example:
.navPage-subMenu.is-open {
order: 111; /*must be higher than <li> order numbers*/
}
I need to display text vertically in a rowspan within a table. The technique I'm using via CSS seems to "work", but the width of the <p> element can't be changed or else the text wraps to the next line and its not pretty.
Take a look at this jsfiddle I put together in order to replicate my issue.
http://jsfiddle.net/wn4ofcwx/
Any alternatives here? Or possible a fix to my current CSS.
Note: Probably doesn't matter but I'm using the INK Framework (similar
to bootstrap).
Actually I figured it out, it was as simple as using white-space: nowrap;
Which I completely forgot about!
http://jsfiddle.net/wn4ofcwx/7/
The text doesn't wrap because we are explicitly stating nowrap, you can re size the window to see how it keeps its position, now I can apply a width of just 10px to take away all that excessive white space in the rowspan.
Check this out: http://jsfiddle.net/wn4ofcwx/4/
What I added to the class .rotate-vertical:
display: block;
margin: auto auto;
height: 17px;
And I took out : Width: 50px;
Cheers
Actually you can keep out the : display: block;
The p element is already a display: block by default and you didn't overwrite it anywhere.
Having seen advice seemingly change over the years regarding use of empty DIVs (ie. <DIV CLASS="somediv"></DIV>) I'm confused as to the current thinking over whether or not to use when a DIV will have no inner HTML.
I can find no definitive confirmation over whether we can rely on all modern browsers to display background color and image correctly at the specified width & height when there is no inner HTML, so I'm thinking maybe we can't rely on it - yet it's such a seemingly basic area.
I have even seen suggestions that empty DIVs should never be used - but do specs really state it is 'wrong' to have empty DIVs, or is it just unreliable? (I've tried finding reference to them, but maybe I'm using the wrong terms).
To illustrate, here are 5 areas where I would normally use an empty DIV, in the absence of any recommended alternative:
as a placeholder for content which will subsequently be fetched by XHR calls
as a way to manually create space in a layout
where an image is defined in CSS (as a background image, but will effectively be foreground)
where the text will come from the CSS using .somediv:after{content:SOMETEXT}
where CSS is used to display graph bars etc using solid background color
Maybe there are different answers for each of these, which might explain the complexity over this issue.
I have, of course, tried discovering already, but for example the SO question Is necessary to show an empty <div>? suggests to me there is a huge amount of "IMHO", "probably", "seems to work" in this area. I would expect that by now that some official consensus has been reached on best practice.
So.. should I use and if so should I set font-size to the same as the smaller of DIV width/height to ensure that space is filled in all browsers? Are there any other CSS tricks to ensure this will work in all browsers?
The browser is not going to discard or forget your container just because it does not have any contents (yet).
If you want the container to have a specific placeholder shape, then you might give it min-height, min-width, height and width and make sure it's display: block;.
If you are still unsure, you can fill it with a spacer.gif/png without padding and margin.
http://jsfiddle.net/APxNF/1/
Short answer. Yes, browsers will render the div even if there is no content.
Long answer, That might now always be the case. I have worked in the web for 8 years now and never had to use these, but here they are anyway.
jsFiddle demo
HTML
<div class="empty1"></div>
<div class="empty2"></div>
<div class="empty3"></div>
CSS
.empty1 {
background: #FBB829;
height: 100px;
width: 100px;
}
.empty2:before {
content: "\00a0";
}
.empty2 {
background: #FF0066;
height: 100px;
width: 100px;
}
.empty3 {
background: #F02311;
min-height: 1px;
height: 100px;
width: 100px;
}
Sources:
Experience
Empty div with 2px width and background color doesnt show with height as 100%
http://csscreator.com/node/36023
On a website i'd like to show products in the following structure:
[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]
Resulting in a product display such as:
Now, the thing is that there are multiple products on display, just like this one, but sometimes they are aligned next to one another.
The problem is that i would like to make the price appear at the same position (vertical wise) in all blocks. Of course i see only one solution at first - overflow:hidden on the detail text / feature listing. But then i'd end up having content cut off, right?
Another problem is that there should also be a more>> button (expander) that appears if the UL/LI-listing is longer than 4 entries. Just like this:
I thought this through quite often, but i seem to find no proper solution. For one i will never know if an LI will be multiline, as the content might be longer or shorter - and i cannot calculalate this serverside, as the font width/height might vary.
I'd appreciate any constructive input here.
Thank You!
As long as you have a fixed width you could use inline-block mixed with negative margins : http://jsfiddle.net/bymaK/11/
The sad thing is that it works in Chrome, Opera and IE 9 but completely break Firefox as it's management of with:0 and negative margin seem buggy (Added issue #709014 to Bugzilla following this post). The solution is to detect this browser and set the width to 1px for it...
It create a small bug as when you resize there is 1 pixel where the price warp to the next line but not the block but it's a lot less visible that the result otherwise :
<div id="container">
<p>texttexttext</p>
<ul>
<li>texttexttext</li>
<li>texttexttext</li>
<li>texttexttext<Update/li>
<li>texttexttext</li>
<li>more »</li>
<li class="more">more text</li>
<li class="more">Even more text.</li>
</ul>
</div><p class="price">$3993.99</p>
.price
{
height:40px;
display:inline-block;
margin-left: -200px;
margin-right: 200px;
vertical-align: bottom;
font-weight: bold;
}
#container
{
display: inline-block;
margin-right:10px;
position:relative;
width:200px;
padding-bottom:40px;
vertical-align: top;
}
ul
{
list-style-type:disc;
margin-left:30px
}
li.more
{
display: none;
}
$(function(){
$('a.more').click(function(){
$(this).parent('li').hide().nextAll('li').show(200);
});
});
Maybe have the containing div set to position: relative, and then price set to position: absolute; bottom:0? That way, no matter how much text is in the box, the price is always at 0 (or whatever number you set).
Here's a rudimentary example: http://jsfiddle.net/PFwJ6/1/
You might want to use javascript to find the height and display a "click to view more link".
First, create a div over the price div that would contain your "click to see more" link and set it to display:none. Then you can use offsetHeight in javascript to find the height of the div. If the height is over what is acceptable then you would set the div to display:block. That means you can set all of your containing divs to the same height with the price div pinned to the bottom using positioning.
I'm sorry I don't have concrete code for you. I might be able to put some together shortly. But this should point you in the right direction.