I am trying to learn how to use draftjs, but i can't figure out how to apply css to the editor itself. I read in the documentation that it is possible to design the content blocks, but i am looking for a way to design the editor.
Draft sets a few class names on the editor that you can use. Here's a (non-comprehensive) list:
.DraftEditor-root
.DraftEditor-editorContainer
.public-DraftEditor-content
.public-DraftEditorPlaceholder-root
.public-DraftEditorPlaceholder-inner
.public-DraftStyleDefault-block
Here's a fiddle showing them. And here's the styles used in the fiddle:
.DraftEditor-root,
.DraftEditor-editorContainer,
.public-DraftEditor-content {
padding: 5px;
margin: 5px;
}
.public-DraftEditorPlaceholder-root {
margin-top: 28px;
margin-left: 25px;
}
.public-DraftEditorPlaceholder-inner {
background: rgba(0, 0, 0, .5);
color: white;
}
.DraftEditor-root {
border: 1px solid black;
}
.public-DraftEditor-content {
border: 1px solid blue;
}
.DraftEditor-editorContainer {
border: 1px solid green;
}
.public-DraftStyleDefault-block {
border: 1px solid red;
margin: 5px 0;
}
Draft will also output some more class names depending on text alignment etc. I'd encourage you to inspect the elements in e.g. Chrome DevTools to see what's available.
Related
I have a button with the following style:
.btn
{
width: 100px;
height: 40px;
float: right;
display: inline-block;
background-color: #555555;
border:1px solid #ffffff;
font-family:OpenSansRegular;
font-size:15px;
color: #ffffff;
}
As I reckon, using OOCSS principles, we should separate visual from structure.
Something like this (I would assume - correct me if I'm wrong):
.btn
{
width: 100px;
height: 40px;
float: right;
display: inline-block;
}
.skin
{
background-color: #555555;
border:1px solid #ffffff;
font-family:OpenSansRegular;
font-size:15px;
color: #ffffff;
}
But what if I want to use the exact same configurations for another button, except for the floating position which I would like to remove, how should I do it? Isn't OOCSS being restrictive by coupling the positioning in the structure?
This likely depends on what exactly the structure you actually have is, but I would likely do something like the following which still follows OOCSS principles:
.btn { /* Default button structure properties */
width: 100px;
height: 40px;
display: inline-block;
}
.float-right { /* More specific button structure properties */
float: right;
}
.skin { /* Default button skin properties */
background-color: #555555;
border: 1px solid #ffffff;
font-family: OpenSansRegular;
font-size: 15px;
color: #ffffff;
}
The actual class names could be different, but given you only have one more specific property, I think the specific name makes sense in this case.
Is there a way to add a dropdown button or toggle button to the CellTable or DataGrid?
The documentation only demonstrates using a regular button (ButtonCell).
To add a ToggleButton to a grid, the only way I found is to place the button in another panel (like a FlowPanel) then add this panel in the grid.
To found this type of button, you can visit the showcase of gwt :
http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCustomButton
here my code to have your button in a FlowPanel :
RootLayoutPanel rp = RootLayoutPanel.get();
FlowPanel togglePanel = new FlowPanel();
ToggleButton toggle = new ToggleButton("Coucou");
toggle.setWidth("100px");
togglePanel.add(toggle);
rp.add(togglePanel);
css :
.gwt-ToggleButton-up,
.gwt-ToggleButton-up-hovering,
.gwt-ToggleButton-up-disabled,
.gwt-ToggleButton-down,
.gwt-ToggleButton-down-hovering,
.gwt-ToggleButton-down-disabled {
margin: 0;
text-decoration: none;
background: url("images/hborder.png") repeat-x 0px -27px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.gwt-ToggleButton-up,
.gwt-ToggleButton-up-hovering,
.gwt-ToggleButton-up-disabled {
padding: 3px 5px 3px 5px;
}
.gwt-ToggleButton-up {
border:1px solid #bbb;
border-bottom: 1px solid #a0a0a0;
cursor: pointer;
cursor: hand;
}
.gwt-ToggleButton-up-hovering {
border: 1px solid;
border-color: #939393;
cursor: pointer;
cursor: hand;
}
.gwt-ToggleButton-up-disabled {
border: 1px solid #bbb;
cursor: default;
opacity: .5;
zoom: 1;
filter: alpha(opacity=45);
}
.gwt-ToggleButton-down,
.gwt-ToggleButton-down-hovering,
.gwt-ToggleButton-down-disabled {
padding: 4px 4px 2px 6px;
}
.gwt-ToggleButton-down {
background-position: 0 -513px;
border: 1px inset #666;
cursor: pointer;
cursor: hand;
}
.gwt-ToggleButton-down-hovering {
background-position: 0 -513px;
border: 1px inset;
border-color: #9cf #69e #69e #7af;
cursor: pointer;
cursor: hand;
}
.gwt-ToggleButton-down-disabled {
background-position: 0 -513px;
border: 1px inset #ccc;
cursor: default;
opacity: .5;
zoom: 1;
filter: alpha(opacity=45);
}
It is the basic css i took on the showcase. You should modify it.
I have a ListBox:
ListBox lb = new ListBox();
this is my default css for a listbox:
.gwt-ListBox {
background: transparent;
padding: 5px;
border: 1px solid #222;
color: #555;
text-shadow:1px 1px 0px #ffffff;
text-decoration:none;
font-family:arial;
height: 40px;
font-size:16px;
font-weight:bold;
cursor: pointer;
}
I want to modify the background at runtime:
lb.getElement().getStyle().setBackgroundColor("#aaa");
this seems to remove all styling, and I get a really ugly listbox. What am I doing wrong?
Thanks
A working and more maintainable way of doing this is using a CSS client bundle, see:
http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html
and
http://www.gwtproject.org/doc/latest/DevGuideUiCss.html
Put the parts of the style that you want to vary in a CssResource and apply the extra style. To give you an idea of how to do this:
MyWidget.css:
.backgroundA {
background: #aaa;
}
MyWidget.java:
interface MyWidgetCssResource extends CssResource {
String backgroundA();
}
MyWidgetCssResource resource;
lb.getElement().addStyleNames(resource.backgroundA());
I'm wondering how one might go about styling an Ext JS checkbox to look like a toggle button.
I'm trying to avoid digging into custom themes for this.
Well, I figured it out before I finished posting the question. Turns out it's not too hard...
JS:
{
xtype: 'checkboxfield',
fieldCls: 'toggleBox',
inputAttrTpl: 'value="Button text here"'
}
Custom CSS:
.toggleBox {
background: transparent;
margin: 0;
width: auto;
padding: 0 7px;
height: 25px;
border: 1px solid #aaa;
color: #999;
}
.x-form-cb-checked .toggleBox {
border: 1px solid #393;
background: #7d7;
color: #fff;
}
I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!
You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.