the picture of code, in "content" property, it's value is a shape!
,
as you see in above image, specific part of my code!
I have style sheet in a project (that has been written before by another) that it have some css codes, and inside that, like bellow, have a property that, inside its value, it shows icon image!
i cant understand that, how inserted/created that!
my code:
.o-icon--close:before {
content: "";
}
my problem:
how he/she has written/created that icon shape inside CONTENT property.
it isn't a copy/paste an icon shape.
it isn't a text code!
as here isn't IDE, it shows a vertical rectangle, but in IDE it is shape of icon itself! like a music sign or what ever.
i know that, for CONTENT value, we can use fontawesome codes or other texts, but i can't understand how insert icon itself as a shape!
Related
I can not use a Background Image because cannot fix the position of the start point.the placeholder text is centered.so it is not duplicated.
How to add an icon in the placeholder of an Entry beside using Grid or Layout. Just add it in the placeholder.
I want to make an Entry with placeholder containing an icon . Which is center in the Entry so that I can not use grid or layout to add a Image because this is not the best way.
I think I will have to make clicked event functions of the Image and the entry focus to hide the Image.
The expected result is like that:
Entry
The first way I can think of doing this:
If the icon you would like to use is a generic icon, FontAwesome is a fantastic fontkit that displays icons in the place of text. I have implemented it into Xamarin Forms many times. Here are some tutorials on how to do that:
https://www.wintellect.com/using-fontawesome5-xamarin-forms/
https://doumer.me/icons-with-font-awesome-5-xamarin-forms/
What you would do is set the FontFamily of the entry field to FontAwesome, and then add a textchanged event on text length > 0 change the fontfamily to your normal font, on text length = 0 (Place holder displayed) Change font family to FontAwesome.
The second way I can think of doing this:
Create a Xamarin Forms Custom Renderer for all of the platforms you are using. whereby you will on the native level alter how the Entry field functions to display an icon in its placeholder. To do this you will either need some native expierience on both platforms or some patience and learning about the native platforms.
If you need further help feel free to drop a comment :)
I'm working on a Gtk3 theme using css. I want to style a dialog so I used gtkinspector to check what widgets are inside there. Works well, the inspector recognizes the dialog. But it is apparently unable to identify a border sitting around the dialog. (See image below).
The border around the entire widget doesnt get hilighted by the inspector. .. so what does this consist of?
This is reflected in the css: if I put something like dialog * {green} in the css, everything colors green, except for the border. If I put .background {green} then the border also colors green....
I tried to find 'padding' 'margin' and 'border' entries that could be causing the border, but cant seem to find any....Any ideas?
Without code or a glade file one can't say for sure which properties are being used to add that border.
The border itself isn't a widget but a GtkContainer property. So you must look to the parent, GtkDialog, for the correct properties being used. Most probably its the empty border around the container child (see GtkContainer "border-width") but could be alignment or padding.
If your goal is to change the color of the background color then you should change it via GtkDialog.
I am testing a web application using JScript in TestComplete and need to verify that a WordWheel TextBox includes an image of a magnifying glass inside of it. And that when text is entered, a red x appears over the magnifying glass. See the image below. I dont need to know what the image looks like, just need to maybe find a property I can use to verify that it exists. Or maybe more properties to verify that the red X appears, etc.
For design reference, this is how I verify the text font style of that text box below:
if (searchTextBox.currentStyle.fontStyle == "italic" && modulesTextBox.currentStyle.color == "gray")
{
Log.Checkpoint("The text box font is gray and italic");
}
else
{
Log.Error("The text box font is not gray and italic);
}
Is this possible?
EDIT: Well it looks like I need 10 reputations to post images. How do I get reputations? In the meantime, I can email the picture in question.
You could use TestComplete's QuerySelector method to find the needed object by its CSS attributes. For example:
//JScript
CSSSelector = "div#main-nav a[target=blank]";
res=TestedPage.QuerySelector(CSSSelector);
This article contains additional information you may need:
http://smartbear.com/viewarticle/55769/
After trying to find a solution for Centering Text on a Button with Offset, I'm doing now a custom component.
The goal is to make a button-like component that has an icon on one side and a centered text filling the rest of the button.
The component contains either two Label/ Buttons to display the Icon and text. Both of them have a background Image, defined in css.
The css looks like this for Icon and the text with exchanged image as background for text
#button-icon-cancel{
-fx-font-family: "Arial";
-fx-padding: 0,0,0,0;
-fx-background-color: transparent;
-fx-font-size: 28px;
-fx-graphic: url('images/button/cancel.png');
}
#button-icon-cancel:pressed{
-fx-graphic: url('images/button/cancel-pressed.png');
}
The images are loaded by setId(). Currently both components are added to a Panel before passing to the stage. They contain an OnClickEvent for processing.
Now to the actual question
How can I achieve that if one Component is clicked, the other one is getting the :pressed from css as well?
Adding the ClickEvent to the Panel is doing nothing (regarding clicking on either Label/ Button)
Adding both of them to a HBox, adding the Event to the HBox work in that regard, that I can click either component and the Event gets fired, BUT the :pressed State is only applied to the component you clicked.
Is it possible to give all childs the notification, that they should behave like they got pressed? Since we have a lot of small Icon, but only one background for the text, placing a Label over the whole thing create a lot of unneeded wasted Image space. Also this would cause the problematic for changing font color if not all css are changed at once (the label-over-button-solution with .setMouseTransparent(true) wouldn't change the font color of the text label since the label doesn't notice button is pressed)
First of all, JFX-8 will support wider range of css improvements, which will allow you to solve the issue easier.
To solve your issue, i can suggest the following : each node have a pressed property. You can add a listener on this property, and when it changes to true, use setStyle(String) method on needed nodes, and use setStyle(null | "") on changing to false.
Is there any way to create a textInput box for flex mobile with inline image without using textflow ?
Basically i need a text input component , so that user can just use it as normal text input box but to it images can also be entered inline with text. To enter images user can select the image from list and that image will get inserted at the current cursor position.
If you look at any platform, there is no user experience (as far as I've seen) that lets you add images in the text input box. It's always been straight text, except for android which replaces certain text with icons (like :-) becomes an android icon). I don't think your users would expect that behaviour. If you really do need it, I would recommend you create a custom skin for your textinput box and add that feature into it, but it won't be easy to do.