I am creating my first chat program (with graphics in java) and i am using JavaFx Scene builder to create a GUI that contains of some pictures and then 1 - 2 men who can then chat with eachother.
the idea is that that when ever 1 of the clients that are connected to the server communicates with the other a small speech bubble will show.
My idea was to create this using a textfield that i would then edit in CSS so it will look like a speech-bubble.
how ever i have tried to look for the css style sheet to be able to configure my textfield but so far nothing has worked is anyone able to help me with this? so far the two style sheets ive tried are these:
.speech-bubble {
position:relative;
width: 320px;
padding: 10px;
margin: 3em;
background-color:#FFF;
color: #666;
font: normal 12px "Segoe UI", Arial, Sans-serif;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 10px solid rgba(0,0,0,0.095);
}
.speech-bubble p {
font-size: 1.25em;
}
.speech-bubble:before,
.speech-bubble:after {
content: "\0020";
display:block;
position:absolute;
top:-20px; /* Offset top the height of the pointer's border-width */
left:20px;
z-index:2;
width: 0;
height: 0;
overflow:hidden;
border: solid 20px transparent;
border-top: 0;
border-bottom-color:#FFF;
}
.speech-bubble:before {
top:-30px; /* Offset of pointer border-width + bubble border-width */
z-index:1;
border-bottom-color:rgba(0,0,0,0.095);
}
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 200px;
margin: 20px;
width: 275px;
}
.bubble::after {
background-color: #F2F2F2;
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
content: "\00a0";
display: block;
height: 20px;
left: -10px;
position: relative;
top: 20px;
transform: rotate( 45deg );
width: 20px;
}
The problem is when i add this to my textfield it does not change apperance i dont know if i am doing it wrong or if these style sheets does not fit a textfield
Hope someone is able to help me thank you in advance:
This CSS looks like web CSS which is not supported as far as I know. Valid JavaFX css properties generally start with "-fx". There is a reference here:
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
Make sure you have the speech-bubble CSS class on your text field controls. Try adding changes one by one and checking the result in SceneBuilder. When I try and make too many changes at once one of them inevitably doesn't work.
Related
I have a Map where I need to click on the Toggle Full Screen button
What I have Tried:
I used the Actions Class to click on the Toggle button and is not working and have also used JavaScript Executor to click on the button but not happening .
Map Link - http://beta.findtoilet.dk/?term=2&lat=55.678937&lng=12.575738&zoom=15&maptype=roadmap
Below is my Script:
WebElement togglefullscreen = driver.findElement(By.xpath("//button[contains(#class,'gm-fullscreen-control')]"));
executor.executeScript("arguments[0].click();", togglefullscreen);
HTML:
<button draggable="false" aria-label="Toggle fullscreen view" title="Toggle fullscreen view" type="button" class="gm-control-active gm-fullscreen-control" style="background: none rgb(255, 255, 255); border: 0px; margin: 10px; padding: 0px; text-transform: none; appearance: none; position: absolute; cursor: pointer; user-select: none; border-radius: 2px; height: 40px; width: 40px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; overflow: hidden; top: 0px; right: 0px;">
Outer HTML:
...
Loading...
Loading...Loading...
Can I get information on this
try this css :
button[title='Toggle fullscreen view']
also, ideally as you are saying, it's in a map, we may need to change the locator.
I have a problem based on a similar question that has an answer but does not fit for me. I have an element that is not set up like this class="vote-link up" where it would be easy to make the class to change its attribute because that is just one word where mine is not similar to it.
The HTML code looks like this <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
And I want to remove display: none; which are the two last attribute of the HTML code. Or change it to display: shown; performing one of the options I have shown would give the same result that I want I just don't know how to do it.
i.e this is what i desire, to change the HTML to this <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none;"></textarea>
Just for clarification, display is not an attribute it's one of the properties of style attribute. Here is the reference for more information.
Here are the 2 options to handle your scenario.
Option 1: Update the style display property value to block
JavascriptExecutor js = (JavascriptExecutor)driver;
WebElement ele = driver.findElement(By.id("g-recaptcha-response"));
System.out.println("Before updating the property:" + ele.getAttribute("style"));
js.executeScript("arguments[0].style.display = 'block';",ele);
System.out.println("After updating the property:" + ele.getAttribute("style"));
Option 2: Remove the style > display property
JavascriptExecutor js = (JavascriptExecutor)driver;
ele = driver.findElement(By.id("g-recaptcha-response"));
js.executeScript("arguments[0].style.removeProperty('display')",ele);
System.out.println("After deleting the property:" + ele.getAttribute("style"));
So, I have this:
<td th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td>
It works, it prints out the desired message on the screen, but how to color the messages in my style.css file? Which class to use? I've tried using th:errors, th:if, errors...
Also tried to name a class, eg.: <td class="validation-error" th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td> and then puting the validation-error in the style.css file, but nothing worked... I know it is a dumb question, but I lost my mind with it.
My style.css file looks like this:
input[type=text], textarea, select {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
border-radius: 4px;
width: 400px;
}
input[type=text]:focus, textarea:focus, select:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
input[type=submit] {
background-color: dodgerblue;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
td[class=validation-error] {
color: red;
}
Did you remember to precede the classname with a fullstop?
ie:
.validation-error{..}
instead of
validation-error{..}
In CSS classes need to be preceded by a full stop (.) and IDs by a hashtag (#), only native elements can be selected with their name alone.
either give you td a class something similar to
<td class="error-list" th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td>
and add that class to your css file or style the td in the css file
td {
color: red;
}
For the Search action, i have used these styles in my ui.xml file:
.search {
border-right: none;
padding: 1px 5px;
width: 200px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
float:left;
}
.searchAction {
border: 1px solid #afafaf;
float:left;
}
with this, my search bar got overlapped with the toolbar.is there is some other styles i need to use ? i want to my search bar just below the tool bar.
For this, i have used margin style to have the search bar below the toolbar.
.margin {
margin-top: 30px;
margin-left: 5px;
margin-bottom: 10px;
}
And now its working fine.
I have a css defined as follows:
body {
font-size: 80%;
font-family: Calibri;
}
table.gridtable {
color:#333333;
text-align: center;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
white-space:nowrap;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
white-space:nowrap;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
which is subsequently loaded in my Java main method. As you can see, I am trying to prevent any wrapping within the theaders/cells. Nevertheless, when an e-mail is generated and opened in outlook, some lines are wrapped and some are not. The wrapping is also idiotic, for instance a word International is wrapped as follows: Interantio|nal... Any idea what the problem might be?
try added a space at nowrap attribute, also there are some javascript based wrap functions available, check them out.