This is my question ..
How can keep ng-grid column width?
When I click a row on the first grid, the columns in the other grid appear "closed" even though they have the same style.
And they only "open" when I click on the column headers of the second grid.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 100% !important;
height: 250px;
text-align: left;
font-family: "Arial";
font-size: 13px;}
I show you an example to better understand.
http://plnkr.co/edit/Lbmw2X5IurRhebPrDCwY?p=preview
I changed the width=100% in the gridStyle css to width=430px and that worked.
http://plnkr.co/edit/JNEjasHdL7VhQtF3ggEO?p=preview
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 430px;
height: 250px;
text-align: left;
font-family: "Arial";
font-size: 13px;
}
Related
I am fairly new to CSS and I can't seem to figure out why my editors are responding the way they are to float: left. I am trying to get the below editors next to each other horizontally:
With the following CSS:
.form-container {
margin: 0 auto;
max-width: 95%;
background: white;
border-radius: 10px;
display: flex;
height: 50hv;
flex-direction: column;
border: 1px solid #ddd;
}
.left-editor, .right-editor {
margin: 10px;
}
Once I add float: left to .left-editor, .right-editor the editor disappears and looks like this:
Any idea as to why?
I wanted to put some space between scrollbar and edge of textarea and have this code:
export const Textarea = styled.textarea`
font-family: Open Sans, sans-serif;
font-size: 16px;
line-height: 24px;
border-radius: 14px;
width: 600px;
height: 200px;
border-width: 0px;
border: 1px solid #DCDCDC;
padding: 14px 16px;
left:-100px;
resize: none;
box-sizing: border-box;
::-webkit-scrollbar {
width: 8px;
height: 60px;
}
::-webkit-scrollbar-thumb {
background-color: #3AA4A4;
border-radius:2px;
border-right: 4px white solid;
background-clip: padding-box;
}
::-webkit-scrollbar-track {
margin-top: 20px;
margin-bottom: 20px;
}
:focus {
outline: none;
}
:placeholder {
color: #96a2ac;
}
`;
but the problem is the space was added but border radius of scrollbar of top right and bottom right is not added and visible.
I'm using a DataTable that has row selection via checkbox as well as a global search. The problem is that if I select one (or more) rows and then filter via the global search, the positions of the selected rows stay the same, e. g. if I select row one and two and filter, row one and two are still selected even if they have completely different content now because of the filtering. I even managed to reset the underlying selection in the state leading to nothing being selected in the state but the checkboxes are still checked. Resetting the DataTable doesn't do anything.
How do I (at least visually) reset the checkboxes? Thanks!
My code is as follows:
<InputText type="search" onInput={e =>
this.setState({
globalFilter: e.target.value,
selectedProjectListEntries: []
})}
placeholder={this.intl.formatMessage({id: "input.global-search.hint"})}
className={"form-control"}/>
<DataTable ref={el => this.dataTable = el}
value={this.state.projectListEntries} autoLayout={false}
globalFilter={this.state.globalFilter} rows={20}
className={'table table-striped'}
selection={this.state.selectedProjectListEntries}
onSelectionChange={e => this.setState({selectedProjectListEntries: e.value})}>
<Column selectionMode="multiple"/>
... Columns ...
If anyone else is using the DataTable without PrimeReact's CSS and theme, the following CSS is necessary to get it to work (in addition to using PrimeIcons):
body .p-checkbox {
display: inline-block;
vertical-align: middle;
margin: 0;
width: 20px;
height: 20px;
}
.p-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.p-hidden-accessible input, .p-hidden-accessible select {
-webkit-transform: scale(0);
transform: scale(0);
}
body .p-checkbox .p-checkbox-box.p-highlight {
border-color: $highlight_color;
background-color: $highlight_color;
color: #ffffff;
}
body .p-checkbox .p-checkbox-box {
border: 1px solid #a6a6a6;
background-color: #ffffff;
width: 20px;
height: 20px;
text-align: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-checkbox .p-checkbox-box {
width: 1.125em;
height: 1.125em;
line-height: 1.125em;
border-radius: 2px;
text-align: center;
}
body .p-checkbox .p-checkbox-box .p-checkbox-icon {
overflow: hidden;
position: relative;
font-size: 18px;
}
.p-checkbox .p-checkbox-icon {
display: block;
}
body .p-datatable .p-datatable-tbody > tr.p-highlight {
background-color: $highlight_color;
color: #ffffff;
}
These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.
I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.
When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.
element.style {
top: -139px;
left: 112px;
display: block;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?
In the element where you whant your popover displayed, add the following directive:
popover-append-to-body="true"
Like this:
<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
[{{form.status}}]
</small>
The element styling is set in the source of UI Bootstrap in the tooltip section.
Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.
EDIT
For this specific example you can add this CSS:
.popover-parent + .popover {
top: 0 !important;
}
.popover-parent + .popover .arrow {
top: 15px !important;
}
The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.
I have a grid which has long phrases as header texts. These texts are never displayed properly in the available width for the column.
Is there any way these texts can be wrapped and limited to the column width?
Here is an image of the issue:
Give this a shot in your CSS:
.x-grid3-hd-inner {
overflow: hidden;
padding: 3px 3px 3px 5px;
white-space: normal;
}
And additionally, another option if the first doesn't work:
.x-column-header-inner .x-column-header-text {
white-space: normal;
}
.x-column-header-inner {
line-height: normal;
padding-top: 3px !important;
padding-bottom: 3px !important;
text-align: center;
top: 20%;
}