I have working plunker with my accordion:
http://plnkr.co/edit/Qk4AxzXLuDDAAXt3wZ6z?p=preview
Did the same in my project and when I click to the accordion header, it shows accordion content but its height is 1px and data successfully binds.
What's wrong? :(
(it's not a problem with angular and bootstrap version)
You need to handle the CSS on your own. Refer following dummy CSS for your purpose:
#accordion .ui-accordion-content {
width: 100%;
background-color: #f3f3f3;
color: #777;
font-size: 10pt;
line-height: 16pt;
}
where #accordian is id of the div.
Related
I just published my portfolio using netlify and everytime i refresh the page I see a milisecond of all the text that is on my page and then the css kicks in with the material ui components. Is it a cache issue? I am not too sure how to fix this problem.
website: https://www.jacktkay.com/
This is because the CSS is taking longer to load than the HTML. You can try to combine CSS rules such as:
margin-top: 5px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
Can be combined into
margin: 5px 10px 0 10px;
You could also try to use a CSS minify tool
I am using a plain HTML input checkbox in ionic because I am migrating an application that uses D3.js to create a graph and control a chart graphic depending on the list of checkboxes, the thing is the checkbox does not appear in the ionic component. I am using ionic 5 with react. There is a way to display a plain HTML checkbox without using the ionCheckbox?.
<input
type="checkbox"
value="overall-avg"
id="1-overall-avg"
class="exercise-checkbox avg"
></input>
Styles
.exercise-checkbox {
accent-color: #7931aa;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.5rem;
height: 1rem;
width: 1rem;
}
I used Styled-components in my React.js app. I want to make some area blur on mouse hover action. So I tried to use &:hover and all line works fine in &:hover area except backdrop effect.
How to make blur effect (on mouse over) in styled-components?
My code
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
backdrop-filter: blur(2px); // This line doesn't work
-webkit-backdrop-filter: blur(2px); // This line doesn't work
cursor: pointer;
border: 1px solid red;
}
`
But when I try in normal HTML (such as w3schools.com/"Try it yourself"), it works well.
<!DOCTYPE html>
<html>
<head>
<style>
#aaa {
width: 300px;
height: 60px;
position: absolute;
top: 150px;
left: 50px;
}
#aaa:hover {
cursor: pointer;
backdrop-filter: blur(5px);
border: 1px solid red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<div id="aaa">bbbbbbb</div>
</body>
</html>
Edited
I want to get this effect like above image.
I don't want the text inside the div to blur. filter gives a blur effect to the text itself in the div. I just want to give blur effect to the letters behind div when mouse hover. So I want to use backdrop-filter.
Only when I use styled-components, it doesn't work. I am still curious why. What's wrong in my code?
It seems like the css entities backdrop-filter and -webkit.backdrop-filter are not what you have described in your image.
Backdrop-filter applies to the elements behind the target node, while filter applies to the node itself. In order to look like the image you added, the styled component would be:
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
webkit-filter: blur(2px);
filter: blur(2px);
cursor: pointer;
border: 1px solid red;
}
`
The results looks like this.
How can I changed the height of md-toolbar in material design?
http://jsfiddle.net/kostonstyle/gsroofa5/
On the first toolbar I want a height from 30px and tried that:
<md-toolbar style:"height: 30px;">
But it does not work at all. I need a navbar with two bulks, that because of two toolbar.
I try this, but now letter disappear.
http://jsfiddle.net/kostonstyle/r178sp9o/1/
You can use an inline style like this
<md-toolbar style="min-height:30px">
Use min-height to make the toolbar smaller
The height of the toolbar can be changed by adding the classes to the md-toolbar.
For a medium sized toolbar add class="md-medium-tall"
For toolbar bigger than the normal add class="md-tall"
You can also inline style the toolbar style="height:50px;"
The accepted answer did not work for me. Here is how I got it working in my Angular Material app:
<mat-toolbar color="primary"
style="min-height: 30px !important; height: 30px !important;">
This worked for me on Angular 8. Put this code in your scss
.mat-toolbar {
min-height: 50px !important;
height: 50px !important;
}
.mat-toolbar-row {
min-height: 50px !important;
height: 50px !important;
}
Replace 'mat' with 'md'
If just setting the min-height doesn't work, like it didn't work for me, you will also have to add in max-height with the same value:
HTML
<md-toolbar class="toolbar"></md-toolbar>
CSS
.toolbar {
max-height: 30px;
min-height: 30px;
}
I want to implement the multiselect combo box in my program. Means If I will select multiple names through check box then all selected names will be fall in that combo with comma separated... I want a sample example... Could you please help me..
Use this user extension. Examples page.
you can use combobox plugin Ext.ux.Andrie.Select. For demo :
http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm
I have Implemented Checkcombo without using any extra plugin or file.
You just need to add image checkbox image in css
And CSS Reference
.chkbox {
height: 13px;
width: 13px;
background: transparent url(please see checkbox image) no-repeat 0px 0px;
float: left;
margin: 4px 5px 0 0;
}
.x-boundlist-selected .chkbox {
background-position: 0 -13px;
}
See the demo in JSFiddle