Just about given up trying to solve this! I should say though I am not great with code and there's probably an easy solution staring me in the face.
For some reason the column widths in my WooCommerce cart table are very off, the width of the 'product-remove' and 'product-thumbnail' columns is far too wide and I have no idea what is causing all the blank space to the right of the images?
I'd like the 'product-name' to be the only column with space to the right of the content if it doesn't fill the space.
Have a play with the website here and hopefully someone can come up with a solution for me.
There is a rule in your CSS that's trying to make table TD's 50% wide:
.entry-content td {
width: 50%;
}
Line 30 in the source code of the /cart/ page.
you can set width of columns by your self.
Plugins->editor->woocommerce->cart-template.php
can perform edit at this location like normal HTML. Its simple
Related
I have layout where on left side there is a mat-table - which is restricted in its height to 4 rows and on the right side a mat-card. The idea is to display the content of a selected row next to the table. Basically it should look like:
I put the two items in a grid layout. The problem I'm facing? If the mat-card-content is far too much it goes over the boundary and looks quite nasty:
I tried to fix it but didn't succeed. How to fix it for this layout? If there is some kind math required for the CSS I would appreciate if the calculation can be tracked - since I need it little bit different in my project.
UPDATE: Forgotten the link for the code
I just add this class and worked!
mat-card-content {
overflow-y: scroll;
max-height: 80px;
}
you can change max-height as much as you want.
https://stackblitz.com/edit/angular-wcpe6e-bjfyza?file=src/app/table-basic-example.css
I'm a beginner with HTML and CSS, and I'm making a site for a friend. On this page http://mypersonalcredo.com/categories.php I can't get that last "Coming Soon" photo to shift up into the row above. I'm sure it's a simple fix, but I just can't seem to figure it out. Any help would be great and thank you!
Very easy fix: replace float:left; with display:inline-block; on your category class.
You may want to use vertical-align:top; as well to align the upper sides of all pictures.
Just remove the <br> after the "Wear What You Believe In!" text. inside .catdesc related to the t-shirt div.
It should fix it.
To see what is causing the issue you can open the developer console and then inspect the "Wear What You Believe In!" text . Remove the <br> element selecting it and pressing the DELETE button.
It works if you add:
clear: left;
to the ones that are stuck on the right and they will go to the far left underneath. I added it to that div for the "Cards". Check out the screenshot below:
It also may help for you to read more about using clears and floats.
Check out this article: https://css-tricks.com/all-about-floats/
This is because your image with the shirt is to large with the extra text undeneath and is making the floating elements push each other down. See image for example. To fix you will have to make it take up equal amount of space as the other category elements
I have a height issue. I'm working with this table. - enter link description here
I'm trying to get the table to shrink in height. Its way to high length wise.
If anyone can help me, I would appreciate it. Do you see where the crystal image is? I want that row to be lowered in height. I've tried everything to get it to work, but I cant figure it out.
It needs work. Centering text etc.
There are ASP.NET sessions being included within the table.
The text-inputs all the way on the right are forcing the cells on the left to expand to their height. The only way to make the other cells "shorter" is to reduce the number of text-inputs on the right (or to make each of them smaller with CSS).
If you are looking to show the crytal in the middle of the cell, then use the below style for the text.
vertical-align: middle;
add this to your CSS. I have only found one solution to your problem i-e if you reduce the font-size you save lot of heigh in your table.
#main_table td
{
font-size:9px;
}
I am experimenting with a fixed header table (I have seen many plugins online but I want to do it myself using PURELY CSS) at http://dev.driz.co.uk/table.html
However I have two issues:
The headers doesn't stretch the width of the table anymore and is no longer in sync with the table rows below. How do I fix this?
I have put a border around the table and also around the table cells and so have now ended up with double borders in some places. How can I get around this? As I need the table to have the border as the cells will not always be on screen and cannot be relied on to provide the box around the table.
If someone can help, it'd be much appreciated.
Through experimenting I've found that position:absolute on either tbody or thead is causing the issue where your table head items aren't lining up to the table data. Absolutely positioning an element breaks it out of the rendering flow of the page. So adding position:absolute to thead causes the header items to collapse to the content in them and adding it to tbody breaks the table data cells from normal flow which means thead cannot relate its cell widths to tbody's.
This is just what I've found but if I'm wrong I'm open to correction.
Using table-layout: fixed; solves the issues!
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>