My icon doesn't want to change size [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've created a button on my page and I want to increase the icon size. However the icon size doesn't want to change when I try to change the styling, can someone please help me? I'm sure it's something stupid that I'm missing out on.
Button/icon code:
<button style="margin:0 auto; height:70px;" class="button button-clear button-primary" ng-click="removeCard()"><span class="icon ion-ios7-close-outline light"></span></button>

are you using some framework? Semantic UI, Bootstrap or Foundation?
Anyhow, you can try 2 things:
Change: <span class="icon ion-ios7-close-outline light"></span> to
this : <span class="large icon ion-ios7-close-outline light"></span>
or you can try this:
<span class="icon ion-ios7-close-outline light" style="width:50px; height:50px;"></span>
Just my thoughts

For a web font you should use font-size css property
Concider you are working with a font as arial or times

Related

I want to fit the contents on Angular Dashboard so all contents appear without scrolling downwards [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I created an Angular Dashboards but somewhow I want that all contents should be displayed without scrolling downwards. Means it fits to the window.
On the screenshot you can see that half of the Angular Dashboard is cut off. I didn't find the right solution, so maybe one of you have good idea how to fix the problem.
you can take this simple example
.parent{
height:100vh;
background:red;
}
.child1{
height:50vh;
background:green;
}
<div class="parent">
<div class="child1">
test
</div>
<div class="child1">
test
</div>
</div>

Unable to build a multi-level menu using mat menu [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am using Angular 8 with Angular Material to build a multi-level menu that is 3 levels deep.
E.g.
One -> Two -> Three
StackBlitz Example:
https://stackblitz.com/edit/dynamic-sidenav-multi-level-menu-u93fqt?file=app%2Fapp.component.html
Does anyone know how I can solve this? I want to stop the list of items from closing automatically, i.e. to display item Three.
Remove the mat-list-item Element from the submenus and place matMenuTriggerFor on the button with the mat-menu-item decorator instead:
<mat-menu #menu1="matMenu">
<button mat-menu-item [matMenuTriggerFor]="menu2">Two</button>
</mat-menu>
Your full example:
https://dynamic-sidenav-multi-level-menu-cnarmb.stackblitz.io

How can I make an arrowed navbar using css? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am able to design nav tabs using code:
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
But i want my tabs design with arrows to right side as in picture. I will be glad if someone can help me out what is the css for this. Thanks.
This design pattern I think is really a "breadcrumb". the first thing that comes up in google is: how to css breadcrumb. I don't particularly like w3schools, but it's a good starting point, then you can just play w/ the styles from there.
As far as the arrows, you may want to check out CSS Triangle generator

Bring <div> "infront" of parent <div>, but make JS skip it [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to make the div slidestatic really static. I don't want it to shrink with the other divs. When I make the z-index of the parent -1, I don't have access to the <a href>s anymore, I can't click them. Thanks
Demo
Apply The position property to the slidestatic div. Change slidestatic div to direct child of slider div and add style "position:fixed to slidestatic div.
#slidestatic {
position:fixed;
top:10px;
}
Here is the FIDDLE
Hope this will fix your problem.
An alternative way is to add animation to the description div.
Here is the FIDDLE

How to show non-popular checkboxes on button click in angular? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
In a form I've got a list of about 15 checkboxes, of which 3 are the most popular. So by default I only want to show the 3 popular choices. At the end of the 3 checkboxes there should be an icon to expand and collapse the rest of the checkboxes.
I'm building the website in Angular, so I guess I can simply use an ng-show for this. The thing is that I wonder whether that is the correct way to do this. It seems to me that this is such a common thing, that there should be some kind of standard way of doing this..?
And also what kind of icon do people normally use for this? For expand and collapse I would normally use the little grey triangle, but I feel it doesn't suit this specific situation well. I know I've seen this before in other forms, but I just can't find it anymore to take inspiration from.
All tips are welcome!
I use ng-show for a similar purpose in my application and it works well. I set the default value in my controller and then make the ng-click event trigger a toggle.
Controller:
$scope.expanded = false;
Html:
<div ng-show="!expanded">
<span class="glyphicon glyphicon-triangle-bottom" title="Expand" ng-click="expanded=true">
</div>
<div ng-show="expanded">
<span class="glyphicon glyphicon-triangle-top" title="Collapse" ng-click="expanded=false">
</div>
As for icons, I like to use bootstrap glyphicons. The glyphicon glyphicon-triangle-top and glyphicon glyphicon-triangle-bottom are good for collapse/expand, as well as glyphicon glyphicon-plus-sign and glyphicon glyphicon-minus-sign. You can find more here.

Categories

Resources