I have a component with 1 Grid Layout
<GridLayout class="gridDate" columns="auto, auto" >
And in this Grid I have 2 Items. For sure each item take full place of column but item is so big it is for that I reduce them like this transform: scale(0.7); for both. But my problem it is I have a space between them and I would like tou know how I can handle them (for example I would like to move item 2 on the left side of the second column.
Best regard and sorry for my English.
columns="*,*" would take the full width of the screen, which you can then adjust with css margin and padding styling.
I did something like this with columns="*, *" and a margin 0 on red part (
background-color: red;
transform: scale(0.7);
margin-left: 0px;```
but 0 changes
[Image of Gridlayout with components][1]
[1]: https://i.stack.imgur.com/r2JHF.jpg
Related
I want to decrease the spacing of the Element UI table rows to fit more rows on the screen.
Unfortunately I can't see any option in the Element UI docs:
https://element.eleme.io/#/en-US/component/table
Setting directly a definied height for the class el-table__row didn't result in any change of height.
You can use one of the following methods:
1) set the size attribute with "small" or "mini"
<el-table :data="tableData" size="small">
2) use the cell-style attribute to remove padding from cells and set a fixed height
<el-table :data="tableData" :cell-style="{padding: '0', height: '20px'}">
Here's the complete list of the available options: https://element.eleme.io/#/en-US/component/table#table-attributes
I am using bootstrap in a fairly straightforward way, and I have a color specified in my row divs, e.g. which colors the entire row with the danger color, but on the desktop, I am only populating about 6 col-md's worth of data, and the extra color extending past where the actual data is displayed, looks funny.
On mobiles its fine, because the actual data is taking up the full row.
So, I want to be able to apply the background color to only col-md-8 of my rows when the web page is displayed on a desktop.
I tried adding the background to the individual cells, but since each of the cells is not a uniform height that didn't work either.
I tried specifying the row as being only col-md-8, but then that affects the size of all the other columns.
Do I just have to accept that I will have to change the md column sizes to take into account that they are now in a col-md-8 row?
Is there an easy to accomplish what I want?
Here is a sample of the code:
<div class="container">
<div class="row bg-danger">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
There are only 7 columns of data, but the danger background is on the whole row.
Ah, now I see what you are after. Just take the target row and make it display:table; then you can get the equal height columns with display:table-cell;
jsFiddle here
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
Note: You can put this inside a media query if you only want the effect to happen at a certain screen size. (see this fiddle)
You could use your own CSS classes, to accomplish what you need.
Also, you could add the col-lg-6 class to the row.
Post your HTML code, otherwise it's really hard to help
I have a big problem with arranging the text from "featured products" in prestashop. First of all, I want the title to be on two lines and centered. I've tried several methods, but with no success. Second, I want "short description" to have more characters and be centered as well.
I've posted below the link to the site and an image of how I would like it to look. Do you know what line should I change or what I need to do?
http://www.3bwine.com/CRISTY/prestashop/index.php
http://oi58.tinypic.com/1608m10.jpg
This is a simple CSS "problem". Css for described changes come from two files.
.../prestashop/themes/default/css/golbal.css
.../prestashop/modules/homefeatured/homefeatured.css - this is not very important but may or may not interfear with some of our changes
To align your title they way you showed on your image I reccomend to add these lines of code to your global.css file ( as you dont have any VERY unique classes on your p or a elements we will be targeting them from a bit further)
div#featured-products_block_center div.block_content ul li p.s_title_block a{
text-align:right;
width: 150px; // set as big/small as you want yoru heading title to display, you can play around with it. This should push the title on two lines, but if your title is chagining all the time in lenght then it might not be useful.
font-size: 22px; // should overwrite the current font-size, make as big/small as you need
}
To align description the way you need add this line to global.css file
div#featured-products_block_center div.block_content ul li div.product_desc a{
text-align:right;
margin-bottom: 20px; // you can play around with it , this pushes your price further away from the text
}
To change the lenght of your short description go to ../prestashop/modules/homefeatured/homefeatured.tpl and locate something similar to this
{$product.description_short|strip_tags|truncate:65:'...'}
And there change the truncate to whatever you need. ( changes the lenght of your " short description"). Number is in characters.
BR's
I am using this example as a base for my work:
http://www.katehendrickson.com/colorbox/example2/index.html
In the below link, I managed to switch the position of the cboxTitle to the bottom in the CSS as it was conflicting with the controls at the top and did not look good when content forced it to 3 lines. However, when the text is only 1 or 2 lines, a gap appears above it.
http://www.katehendrickson.com/collection/bacci/2.shtml
How can I make it vertical-align but underneath the image for as many lines as I want?
Thanks so much.
Paul Mycroft
The easiest thing to do would be to change the following line from this:
#cboxTitle{position:absolute; bottom:-75px; left:0; color:#000; text-align: left;}
To this:
#cboxTitle{position:absolute; top:100%; left:0; color:#000; text-align: left;}
I am new to div stylesheet and i only discovered how to use :
margin-top/left/right/bottom.
What is the position used for ?
What is left/right/top/bottom attrib used for?
What is display used for?
Is there any other attrib which i need to take note of/usage for positioning my div ?
Regards
http://www.w3schools.com/css/pr_class_position.asp
http://www.w3schools.com/css/pr_pos_left.asp
http://www.w3schools.com/css/pr_class_display.asp
http://www.w3schools.com/css/css_positioning.asp
margin is in relation to the closest container while left/right... is in relation to the entire page.
Display determines if the object is visible/hidden or how the element behaves. Like display: inline means the elements will display on the same horizontal plane if possible.