CODEWITHSUNDEEP
javacssjavafxscenebuilder
Marc Rasmussen
Marc Rasmussen

Reputation: 20555

CSS editing of textfields to speech bubble

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:

Upvotes: 1

Views: 1313

Answers (1)

Andy Till
Andy Till

Reputation: 3511

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.

Upvotes: 2

Related Questions