I am new to angular 4 and I started working on angular multiselect and using the following npm package
https://www.npmjs.com/package/angular2-multiselect-dropdown
I could able to configure this properly and also getting the selected and deselected items/events.
Now my problem is to show only the placeholder text even though there are selected items or not. I want to ignore the selected items to be shown on the top.
If any item is selected from the item the multi select box is converted like the below
But I would like to keep the placeholder same like below if there are selected items or not.
I have been trying to get out it with responsive behavior. But not able to find the solution. Please help me.
Currently, it looks like the feature is not there. However, there is a work around.
Workaround
You could hide the list that is shown. In your CSS, you can add this:
.c-list{
display: none;
}
This will not display back the 'Select Countries' placeholder, but it will partially achieve what you are trying to do.
Work Around
Hide the list using CSS
angular2-multiselect /deep/ .c-list {
display: none;
}
If you don't want the select items list growing, you can limit the number of badges shown by adding badgeShowLimit in the dropdown settings
Related
I have a website with a list of checkboxes that can be used for printing as well. Though when printing it should print a clean slate, not the current state of the checkboxes on the website. However, I don't want to clear the state on the page itself, only on the printed version.
So is it possible to visually remove the tick from checkboxes in CSS?
Something like:
#media print
{
input[type=checkbox]
{
tick: none;
}
}
I suggest following approach.
In print you want just the border square box which can be manually ticked, right?
So in print CSS you might just change the design of check boxes so that you hide the original checkbox html , doesn't matter if checked or not. And then just style or show a square border box using some pseudo selector like : before :after, , good enough for a checkbox looking box for printing.
As via CSS you can change design and not the html state of the forms. So in media query of print or print style sheet only option is designing, styling...
I have trouble with styling DevExtreme React Grid, follow by there found from there documentation here.
Here's the sample code I have from copy some other repo.
My questions:
How can I get full control on the styling, because I see <Table>component, but is there a way I can adding class to <th>, <td>, I would like to add the class or someway to have full control styling for font size, or hover styling.
I had a really hard time my table header, like to change to bold and another background color, it's by material UI
After I add the Fixed Columns method on scrolling my table, the style is not matching with my other table row, it's changed to all white background, no grey and white on each row
When I hit the rest, I would like to row change to be another color.
Thank you so much for your help!
I checked with their GitHub issues:
Not fully support adding class to the component, but you can create a theme for it.
About fixColumn styling found the demo from this sandbox. Hope this sample help
Pagination issue with sorting can be fixed by this:
//after state area:
changePageSize = pageSize => this.setState({ pageSize });
// Plugin
<PagingState
defaultCurrentPage={0}
pageSizes={pageSizes}
defaultPageSize={15}
onPageSizeChange={this.changePageSize}
/>
<IntegratedPaging />
//UI
<PagingPanel pageSizes={pageSizes} />
i want to make small CSS fix into my store, but dont can find the right class to do that myself. i checked and found that variation dropdown is using this CSS:
select#pa_facebook-business-fan-page
but still dont know how to make that dropdown to extend to max width into that area.
If I'm looking at the page you are referencing, you have a table cell that contains the label to the left of the select field cell. That is taking up some of the space that you want to get rid of. You can just simply hide it if you don't need.
Just need to modify the css to remove it and the select field will take up the entire width:
td.label {display:none;}
If you have other label cells on your website that you DON'T want to hide, you might need to be more specific in the CSS to target only this instance.
I want to remove the blue highlighting that occurs when you mouse over the column header in a grid.Panel column header in ExtJS 4.2.2.
I have successfully changed every other aspect of the CSS using tdCls, baseCls, and manually adding my own classes. I have tried targeting the problem by making CSS classes with the ".x-header-over" or ".x-column-header-inner-over" names. However, these do nothing.
Essentially, I do not want the headers to be clickable or have any affordances that they are. I have turned mouseover off (ie made false) to remove this affordance on the grid itself, but it does not apply to the header.
One option would be to set sortable:false and menuDisabled:true like so in the column configuration itself:
{text: "Name", width:120, dataIndex: 'Name', sortable:false, menuDisabled:true}
This will disable the actions themselves. As far as the CSS highlight goes, if you want to do this for all grids in your application, you can set:
.x-column-header-over {
background:none
}
This will disable the hover background that Ext tacks on when you hover over the element.
Hope this helps!
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.