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
Related
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
Problem:
I have an ion-select and in the controller when the user does something, I populate the ion-select with 1 value and make that value the selected value. The ion-select does not show that the value has been selected, but the [(ngModel)] has the correct value. When I open the ion-select it shows the value in the list and it is selected, when selecting the value in the list again it goes over the ion-select label.
How can I populate the ion-select with a value and make the populated value the selected value so that it shows on the ion-select as a selected item?
Screenshots:
The Make has value of CHEVROLET but it does not show as selected by ion-select:
When tapping on ion-select, it shows the CHEVROLET as selected and CHEVROLET goes over the Make label:
HTML:
<ion-item>
<ion-label position="floating">
<span class="required">* </span>Make
</ion-label>
<ion-select [interfaceOptions]="global.compactAlertOptions" id="make" [(ngModel)]="global.valuation.vehicle.make" name="make" #makeRef="ngModel" required>
<ion-select-option *ngFor="let make of makes">{{make}}</ion-select-option>
</ion-select>
</ion-item>
<ion-label *ngIf="makeRef.touched && makeRef.invalid && makeRef.errors.required" class="error">Make is required</ion-label>
Controller:
Modal Controller (the Make gets set in a popup modal):
this.global.valuation.vehicle.make = this.vehicleDetails.VehicleMake;
Populate the ion-select options in parent controller:
this.makes = [this.global.valuation.vehicle.make];
This generally happens when the value in ngModel is set before <ion-select-option> options are loaded on the DOM.
You will have to explicitly delay setting the value to ngModel until the <ion-select> and options are loaded on the DOM.
You can achieve it by adding a setTimeout in your component file and assign the ngModel value in the callback of setTimeout.
It seems to me that this has to do with some custom css that you are using on the template. Since when you use floating for a select is exactly the same as when you use stacked, Since the select is going to expand on the ion-item anyway. This floating works best with ion-input.
In your case, if the option was not selected, the select should be empty and the label above it. but it is on the item furthermore on the baseline of the select. When you select the option it will show in the baseline on the select left aligned.
like this:
If you remove the floating you will see what I mean.
it should show like this:
It will be easier to understand the issue if you just provide the CSS bits that are messing with the alignment of the elements.
My guess is that you have some styles that only reduce the ion-item and don't deal with alignment and positioning of the inner elements.
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 simple page with products-list (downside) and basket (upside). When i click on any product in products-list, it will move img from product's list td to basket's td. It is realized by tables with some width, height and paddings of td's. But in IE7 there is an issue with padding-top when td is empty. Please, look at this image and tell me, why td in products-list (the grey ones) are not affected from padding-top?
Image:
In IE, if a td tag is empty, it consider it does not exists. Add a (HTML entity for space) in each td who have no content to avoid this bug.
Alternatively, you might be able to use border-top rather than padding-top to fix this issue.
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.