This question already has answers here:
How to remove default color in input type?
(4 answers)
Closed 5 years ago.
Im used ionic 3 , i want to know how to remove validation border color, red and green .
I tried to removed, using this css
.item-inner {
border-bottom-color: transparent !important;
box-shadow: none !important;
}
its not work, that solution is removed every focus line , any one know how to remove only validation color
If you want for all input fields:
You can override the following scss variables which are set by default for android material design:
$text-input-highlight-color-valid:transparent;
$text-input-highlight-color-invalid:transparent;
For individual elements you can have a custom class in your corresponding scss class and then set border-bottom for ng-valid, ng-invalid classes with border-bottom-color.
.my-input.ng-invalid{
border-bottom-color: transparent;
}
.my-input.ng-valid{
border-bottom-color: transparent;
}
Related
I would like to set my ion-select with 100% of width.
I have tried with css class like this:
.mySelect { width: 100% !important; }
But it is not working.
I did it.
For someone who wants the solution, here is the code:
.myCustomSelect{
max-width: 100% !important;
}
You must have to override the 'max-width' css property.
Increasing the specificity of the selector allows for doing it without the !important on it:
ion-select.myCustomSelect{
width: 100%;
max-width: 100%;
}
Which makes it a bit cleaner, since !important should be used as sparingly as possible, as noted in the Stack Overflow article here:
Should I avoid using !important in CSS?
You don't need !important at all! Ionic has specified a min-width of 45% (or whatever as per your version of ionic). All you have to do is over-ride it with a max-width of 100%. At the same time, the select, being an inline element, will only expand to fit its contents. So it won't fill the whole width. So to make this happen, you simply add width: 100% to it. So your final CSS class may look something like this:
.full-width-select {
width: 100%;
max-width: 100%;
}
I try the each solutions but found a perfect way to do this :)
just modify your sass file by adding this
ion-select{
max-width: 70% !important;// your choice :)
}
The answer from Luis Antonio Pestana is good if you associate it with the code of his initial question. So to be more clear, the complete code to get the ion-select to take 100% of its container is :
.your_ion_select {
max-width: 100% !important;
width: 100% !important;
}
This is what helped me. After perusing multiple articles, I've found in this stack overflow article ~ Styling ion-select with popover interface, that if you open the developer tools and use the inspect tool, you can see the class that directly affects the select option.
So now that we know that the classes are .alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md we can then add adjust this in our global.scss file
Like so
:root{
.alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md{
max-width: 100% !important;
width: 100% !important;
}
I'm currently working with Ionicv4 and above, however I'm assuming this should still be of assistance
I have big css file and need regex(Notepad++) to get only elements and css selectors found by specific css value. In following example I need to get element and selector by value 123456
header #objectnav nav a {
border-right: solid 1px #c0c0c0;
border-left: solid 1px #f4f9ff;
color: #123456;
}
a:hover {
color: #654321;
}
#hints .hint {
background-color: #f4f9ff;
border: 1px solid #e0f0ff;
color: #123456;
margin: 0 0 30px 0;
position: relative;
}
on exit I expect following
header #objectnav nav a
color
#hints .hint
color
or, if possible
header #objectnav nav a^color
#hints .hint^color
I did this just for the challenge:
The following regex will find all the rules containing the text 123456 as a value:
[^{}\s][^{}]*\{[^}]*?[-\w]+\s*:[^;}]*?123456[^}]*\}
But that's just a basic regex. The more challenging part is that I wondered if it's possible to generate a report such as the one you asked for using nothing but Notepad++. It turns out it's possible.
Replace the following pattern:
\s*([^{}]+?)\s*\{[^}]*?(?(?=([-\w]+)\s*:[^;}]*?123456)[^}]*|[^}])*\}\s*
With the following replacement string:
(?2$1^$2:)
Or this one depending on the output you prefer:
(?2$1\r\n$2\r\n\r\n:)
I didn't test it extensively but it works for the test cases you provided.
I am having a problem with my website ( based on Blogger). There are vertical scrollbars appearing eventhough there they are not needed and they don't even move up or down. Can you please help me figure out what is causing them to appear ?!
this is my website url to check it : http://gsalafi.blogspot.com/p/ar.html
and this is my blogger template code : http://pastebin.com/V9j9mu8J
Please tell me if you note any errors in the code.
You have to edit your css, or perhaps replace your <body></body> with <body style="overflow: hidden; width:1024px; margin:0px auto 0px auto;"></body>.
Remember:
overflow-x: hidden;
Would hide any horizontal overflow, and insuring any horizontal scroll bars disappear.
overflow-y: hidden;
Would hide any vertical overflow, and insuring any vertical scroll bars disappear.
overflow: hidden;
Would remove both scroll bars, and all overflow content.
Ok.. So I've checked (to the best of my abilities) in the issue list, but haven't found anything similar.. If there is an answer out there, apologies about adding a duplicate...
I am using the Foundation 4 framework, with the latest version.
I have bullets (UL mostly) at a lot of places. However, When I use text-align: center for any text with a bulleted list, the normal text and the list text is center aligned, but the bullets themselves (square, disc and so on) are not.
Now the weird part.... this issue occurs only in Chrome and IE9/IE10. It works as intended on Firefox / Safari. I've also tried using the .text-center class (part of foundation.css) which essentially does the same thing i.e., text-align: center.
Here's the test link http://www.crevolve.com/testing/ ....
Any help is much appreciated... Thank you...
I have bullets (UL mostly) at a lot of places. However, When I use
text-align: center for any text with a bulleted list, the normal text
and the list text is center aligned, but the bullets themselves
(square, disc and so on) are not.
You need to set the list-style-position of your ul, that by default has a value of outside. It means that the bullets will be outside the content flow (read more about it here).
To solve your issue you can do this:
ul.square {
list-style-position: inside;
list-style-type: square;
text-align:center;
}
But hang on that will NOT totally solve your issue, I think, because if you have different length of texts in your ul then everything will be centered. That means they will not be aligned and it will not look good. Look at the first slide on this fiddle to see what I mean.
To have it centered and make it look good you can do the following:
.container {
float:right;
position:relative;
right:50%;
background-color:lightgreen;
}
.inner-container {
float:left;
position:relative;
left:50%;
background-color:lightyellow;
}
ul.square {
list-style-type: square;
width:300px;
}
<div> /* the wrapper div */
<div class="container"> /* outer container to offset by 50% */
<div class="inner-container"> /* inner container to make it center */
<ul class="square">
<li>First Item</li>
<li>Second Item, this is a longer text</li>
</ul>
</div>
</div>
</div>
The working sample is on slide 2 of the sampled jsfiddle. I included a background color so you can better see how it works.
If you want to keep the display of list-style-position: outside, while being able to center you bullet and list content on Chrome:
ul {
list-style-position: inside;
}
ul {
padding-left: 11px;
text-indent: -11px;
}
li {
margin-left: -11px;
}
Downside: 11px is the width of the space bewteen the begining of the bullet and the begining of the text of your li. It's an ugly magic number, that may vary from one browser to another. Il haven't found any way to rationalize it, unfortunately...
I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}