Now I have a search bar, but I want its border to be round, what should I do?
I have tried border : round,border-radius:10px... and it did'nt work.
I even want to change my search icon color and cancel icon color?
Any ideas on how to achieve these things
for Ionic 4 for changing the icon color this works for me just fine
ion-searchbar {
--icon-color: var(--ion-color-primary);
}
for futur references you can check out the official docs
https://ionicframework.com/docs/api/searchbar
I tried all of the above answers and none worked for me.
After some digging, I found something that might be useful to someone else looking to tweak the default styles of ion-searchbar (or any other ion element in general)
Below is the component.scss code for the ion-searchbar wthat I wished to change the styles for:
ion-searchbar{
--icon-color: var (--ion-color-primary);
--box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
::ng-deep{
.searchbar-input-container{
.searchbar-input{
border-radius: 20px;
//any style that you want to implement on your searchbar
}
}
}
}
Here, ::ng-deep disables view encapsulation for specific CSS rules, in other words, it gives you access to DOM elements, which are not in your component's HTML.
To change the icon color. In your "variables.scss" file in the "theme" folder add this line ;
$searchbar-md-input-search-icon-color:#yourColor;
To change the border-radius of the search bar, go to the SCSS file associate to your page containing your SEARCH BAR and put this
ion-searchbar{
.searchbar-input-container{
.searchbar-input{
border-radius: 20px;
}
}
}
The following code changes the colour to white replacing the original greyish colour.
.searchbar .searchbar-search-icon {
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>");
}
Try this to change the color of searchbar icon. Works for me.
If you try to inspect the search bar icon it has a background image property which looks something like this
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%235b5b5b'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>");
Just Change the last 6 hex-digits in the fill='%235b5b5b' according to your color. Hope this helps.
In the Google Web Toolkit Showcase, the Menu Bar example (http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwMenuBar) displays the menu bar's background as a gradient. However, when I use their css (clean.css from the gwt package), I get a solid background.
Does anyone know how to get the gradient? There are no explicit references to 'gradient' in their css file. FYI I'm testing this with iceweasel 3.5.15 (which is a essentially firefox 3.5.16).
thanks
It is not a gradient css style. Instead a background image is set hborder.png . You can see the style/background image as shown using Chrome Dev Tools or Firefox/Firebug
(The above comment is a bit illegible and I can't edit it).
hborder.png is specified in the css file, e.g.
.gwt-MenuBar-horizontal {
background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
border: 1px solid #e0e0e0;
}
I would expect this to create the gradient, but it doesn't seem to be having any effect.
I have two tricky issues that are intertwined. I have an inset box shadow vignette on four sides of a box but I have clickable images inside that I can’t click because the shadow/vignette is above the images (which are at z-index: -1). I read some about using the pointer-events: none but I think it is affecting everything in the box when I try to use it so it hasn’t worked. Any suggestions on how to make these images clickable but still behind the shadow?
Also, I’ve read through previous posts about scrolling speed with the box shadows. I’ve made it as small as possible but has anyone figured out how to make that go faster yet? I really like the look but the functionality doesn’t work if the scroll is going to be so slow.
Here are links to the site as constructed so far.
http://www.official-design.com/TEST_PROJECT.html
http://www.official-design.com/TEST_GRID.html
Please be nice – I am a novice at this – I’m an architect not a web designer. Any advice would be greatly appreciated.
Why do you have z-index: -1 for the links? Remove that and the links work fine, and the shadow is still visible.
I would also recommend applying the box shadow to the img or a elements directly, rather than the td that contains them.
Removing the negative z-index won't work with inset shadows. There are 3 things to do to achieve what you need:
Remove superfluous float: left from #makeMeScrollable
div.scrollableArea img rule. This is to ensure that the <a>
element wraps the image properly.
Remove box-shadow properties from .SHADOW rule.
Add the following CSS for your links:
.SHADOW a {
display: block;
-webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
}
Note that I've used rgba value instead of #ccc, since the shadow will be overlaid on the image.
As a side note, there is no need to name classes in all caps. It decreases the readability.
On an existing website, one block of text is displaying too large on an iPhone, and part of it is white. I've tested it on Android and on an iPad, which pushes the rest of the site down too far, so it doesn't line up with the background. It is the proper size on an iPad, but still showing up white. The text in question is in the top right corner on this page: http://www.ecodzign.com/waterfx2/index2.html
This is how it looks on an iphone:
I've disabled text scaling, and I've tried using inline css, with no effect. Only phone numbers are displaying white, so I assume the iphone is creating some sort of link to call those numbers with the phone, but regardless, that can't be white with a white background.
I apologize for the awful table design and lack of validation, but I'm simply not budgeted to redo the entire site properly. There are no validation errors that have to do with text or formatting, I doubt that has anything to do with what is going on.
This could be the difference between things like pt vs px vs % on your iOS device for that specific block.
After checking your code, I think this is it in fact:
font-family: Arial,Helvetica,sans-serif;
font-size: 8pt;
color: black;
font-weight: bold;
The font-size: 8pt I would bet is the culprit.
There looks to be a lot of inline CSS on the site.
What it you tried this
<span style="color:black !important;">702.233.3200</span>
utilizing the !important keyword.
That most likely has to do with the CSS of the website. Your best option would be to create a mobile friendly site or removing <span style='color:black;'> from the html that wraps these numbers.
Does anybody can tell me where that blue border that appears after you push a PushButton comes from?
I really want to override that behaviour, don't know where or how though
UPDATE:
the effect I'm talking about turns out to be blue on Safari, it goes orange on Chrome and no effect on Mozilla
it occurs when the button has been pressed once, best way to explain it is the http://gwt.google.com/samples/Showcase/Showcase.html#!CwCustomButton
Are you talking about the "focus ring" that appear around any element when it's focused?
You can tweak it using the outline set of CSS properties: http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
But please note that it's bad practice (re. accessibility) to completely remove it, as you'd remove any indication of whether the button is focused or not, and incidentally, which element is focused, if any.
This behavior should be defined in the appropriate stylesheet. If you check GWT sources that would be in /trunk/user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css. It's also defined in other themes.
What you should do is define your own styles
.my-PushButton
{
border : 1px solid #666;
padding : 0 10px;
}
.my-PushButton-down-hovering
{
background-color : #aaf;
}
.my-PushButton-up-hovering
{
background-color : #afa;
}
And then
PushButton btn = new PushButton(...);
widget.setStylePrimaryName("my-PushButton");
Hope this helps.