I work with Angular and use Angular Material
[https://material.angular.io/components/autocomplete/api][1]
[1]: https://material.angular.io/components/autocomplete/api
I would like add a border radius in my md-autocomplete but it doesn't work:
<md-autocomplete class="myclass">
.myclass{
background-color: rgb(250, 250, 250);
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px
}
Do you have an explanation?
To change the drowpdown list styling, use .mat-autocomplete-panel classname:
::ng-deep .mat-autocomplete-panel{
border-radius: 10px;
}
This will affect all the autocompletes. If you have more than one and wish to style them differently, you can set different variable name and style accordingly. For example for the second one:
HTML
<md-autocomplete #mauto="mdAutocomplete">
CSS
::ng-deep .mat-autocomplete-panel#md-autocomplete-0{ //for the first one
::ng-deep .mat-autocomplete-panel#md-autocomplete-1{ //for the second one
DEMO
Do you want to put a border around the md-autocomplete or do you want the border to be around the md-form-field?
I believe you want it around the form field. See https://material.angular.io/components/autocomplete/examples for an example of the HTML.
If you open the following plunkr, it uses your css to style the md-form-field:
.example-full-width {
background-color: rgb(255, 0, 0);
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px
}
https://plnkr.co/edit/DWzjsRNGXZsPRfjWRrI6?p=preview
I used red instead of 15% gray so it was more obvious.
Related
I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
I am styling some popups for a map displayed through Mapbox using Mapbox's GL JS. However, I cannot find in their documentation regarding the classes that are automatically assigned to the popups. Thus far, my CSS looks like this:
.mapboxgl-Popup-content {
color: #F3F3DD;
background-color: #91785D;
border-color: #91785D;
max-width: 250px;
box-shadow: 3px 3px 2px #8B5D33;
font-family: 'Oswald';
}
This yields these pretty little boxes:
My issue is the white triangle at the very bottom that points to the marker. I want to change its color.
I have tried a number of CSS classes to fix this. Including, but not limited to, .mapboxgl-popup, .mapboxgl-popup-anchor, .mapboxgl-popup-pointer, etc. I am not sure where to acquire the documentation I need to know what CSS class I should be using to change the color of this pesky triangle.
Here's what you need. It's not just one class because the tip can change position:
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
border-bottom-color: #fff;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
border-top-color: #fff;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
border-right-color: #fff;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
border-left-color: #fff;
}
The CSS class that you need to update is ".mapboxgl-popup-tip". If there is no any class like that in your CSS file, just create it and give the color what you want to "border-top-color: " attribute.
I figured out why applying CSS doesn't affect the element (in this case, the tip).
I did some debugging in Chrome with Inspect Element.
It turns out my CSS was indeed being applied; however, it was being overridden from the MapBox stylesheet I applied in my index.html.
At first, I thought that maybe if I reordered my stylesheets I could have my stylesheet be invoked after the MapBox stylesheet, then I'd be fine.
This was not true.
Inspect element still showed my CSS was being overridden.
The solution was to add !important:
border-top-color: black !important;
This would override any previous styling done by MapBox.
For more info see:
What do the crossed style properties in Google Chrome devtools mean?
https://www.w3schools.com/css/css_important.asp
.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: #f15b28; }
i finally got it how this works. <Popup archor={'bottom'}, use .mapboxgl-popup-anchor-bottom plus .mapboxgl-popup-tip changing border color (top, bottom, left, right).
I already set textfield background colour into transparent but not working in Ionic.
.item .item-input {
background-color: transparent;
}
I already read the Ionic documentation but it's not working. It's still white colour.
http://ionicframework.com/docs/components/#forms-inline-labels
Are you sure your css rule matches the correct element?
Your rule:
.item .item-input {
background-color: transparent;
}
Matches an element with class item-input, which is a descendant of an element with class item. Perhaps you meant the following?:
.item.item-input {
background-color: transparent;
}
This rule matches an element with class item and item-input.
In Angular (as your question has an Angular tag), the answer is to use --background
--background: transparent !important; // example
see https://ionicframework.com/docs/api/input#css-custom-properties (select : Angular from the list to see Angular related docs)
Maybe a bit of a hack, but could you put the text inside another div and give the div a special background colour.
So, something like this:
.text {
background-colour: red; // or colour: red; I don't know
}
and then put the text between this div. Hope it helps.
.label {
background-color: reba(255, 255, 255, 0.0);
}
Then put the CSS rule on the ion-item element like this:
<ion-item class="label">
I want to change the color of the text (link) in a box. This is the CSS code I'm using:
.boxed-1 {
background-color: #e8ecf4;
border: 1px solid grey;
padding: 15px;
margin-top: 1px;
margin-bottom: 10px;
margin-right: 25px;
margin-left: 0px;
}
When I call for div class boxed-1, all the text displays blue. How can I change it?
I've tried a bunch of different suggestions from my google search to no avail.
My site is: http://mikediane.com
Links are set to the color blue by the browser, thus they do not inherit from their parent like most other elements do.
You will need to apply a color: #?????? to the a itself, like this:
.boxed-1 a {
color: #??????;
}
See this JSFiddle for a demonstration.
Typically if you want to set the text in an element just apply the CSS style color.
In your case,
.boxed-1 {
color: /*Whatever color you want*/
}
The problem is that your anchor tag's color is being applied to the text. If you create a rule like
.boxed-1 a { color: #hexcode; }
I'd expect this to work.
I want to make a very basic GUI: tabs, text area.
But I want to color my tabs and make them always looking the same on MAC, Windows and Linux.
So, I tryed to use a stylesheet:
QTabWidget::pane
{
border-top: 2px solid #1B1B1B;
background-color: #262626;
}
QTabWidget::tab-bar
{
left: 5px;
alignment: left;
background: #3E3E3E;
}
QTabBar::tab
{
background: transparent;
color: #757575;
padding: 15px 5px 15px 5px;
}
QTabBar::tab:hover
{
text-decoration: underline;
}
QTabBar::tab:selected
{
color: #DEF600;
background: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #262626, stop: 1.0 #3D3D3D );
}
But even if the tabs looks well, there is a problem: The tab pane is still transparent...
I can force a background color by adding:
QWidget
{
background-color: #262626;
}
But as you know, this change the background color of ALL the widgets, even my QPlainTextEdit that I still want to have a white background. And more annoying, this reset the OS skin and display ugly scrollbars (I really want to keep them as they were).
Is there a way to change the tabs pane background without having to reskin all the components ?
I had the same problem. I could get it to work with this:
QTabWidget::pane > QWidget {
background-color: #262626;
}
Try this.
QTabWidget::pane {
background: red;
}
You can read this for details. And one more thing to comment. You can use QObject::objectName() as style sheet's id selector. for example,
QTabWidget#myTab { ... }
hope this helps.
It is possible simply by:
* {background: green;}
This style set background for this widget and all their childs so you need to know one important thing. The area you think is QTabWidget in fact is QWidget which is set inside of QTabWidget. You can easly check where QTabWidget is and where is their child by adding to your style
QTabWidget::pane {background: green; padding: 10px;}
green area is a QTabWidget, all inside is overlapped by QTabWidgets child (any QWidget added by addTab() function).
add style
"background-color:rgb(255,255,255)"
to each tab.
Refer this:
http://doc.qt.digia.com/qt/stylesheet-syntax.html
Read ID Selector under Selector Types. You can instruct a certain style to be applied only for a given object name. So you can use whatever the name you have given to your tabWidget.
Try enabling document mode with
myTab->setDocumentMode(true);
This has worked for me when everything else has failed. You can do it in code, or by twiddling the property in qtcreator.
You still might have to apply some styles to the pane like so:
QTabWidget:pane{
background: red;
}
Read more about this in the documentation.