I need to reduce the width of the following buttons (drop-downs):
"Formatting Styles"
"Paragraph Format"
"Font Name"
"Font Size"
How can I do it?
You can modify the CSS of the underlying button element.
If you want to target specific tools, just use firebug to dig into the DOM and see what their particular classes are.
For example, to modify the widths of the format and font drop downs, use the following CSS:
.cke_skin_kama .cke_format .cke_text,
.cke_skin_kama .cke_font .cke_text {
width: 72px;
}
In CKEditor 4, you can adjust .cke_combo_text like this:
span.cke_combo_text {
width: 30px;
}
Note that if you make it smaller than the default (60px for Formatting Styles), then when the user selects an option from the dropdown, the selected option will no longer fit inside the updated dropdown box.
In my case, I was looking to clean up the UI so that it all fits into one line neatly on an iPhone in vertical orientation, so I did this:
span.cke_combo_text {
width: inherit;
}
For my case, this was great because it shrinks the dropdown menu so that it fits on one line by default, but automatically expands (taking up a new line) if an option is selected, showing the user what they chose.
Related
I have some divs (class="boxes") with some text in them in paragraph tags. What I'd like is for the text to be invisible unless hovered.
However, things are behaving strangely. When I use:
.boxes p{visibility:hidden;}
.boxes p:hover{visibility:visible;}
the text is hidden but does not become visible upon hover.
When I tried:
.boxes p{visibility:visible;}
.boxes p:hover{visibility:hidden;}
the text will (after a moment) disappear, but 'flashes' if the cursor is moved at all.
Any idea what's going on here? Firefox often updates automatically, so I believe I am running the latest version.
Thanks!
By making the boxes invisible, the selector stops matching them, which makes them visible, which then makes your original selector match them again and you get your flicker from an endless loop.
If you want to have your boxes still be hoverable, either give them another parent element and hide them:
.boxes .parent:hover p {
visibility: hidden;
}
Or give the boxes zero opacity on hover:
.boxes p:hover {
opacity: 0;
}
I would like to set the text in the tool tip that appears over sliders i Win8/WinJS/Metro/Modern UI (input type="range"), but I can't find any info on how to do so.
The only information I can seem to find is that it can be styled through:
some_selector::-ms-tooltip
{
display: none;
}
But I can't change the text through .text(t)/.html(t) using jQuery.
So the question is, how would I select the tooltip element so that I can set the text?
I have a Validator attached to a field. When validation fails, I want the red line to appear in the field, but I do not want the red icon to appear to the right of the field. How can I accomplish this? I don't see this functionality in the documentation. Thanks!
I also posted this on Sencha's forums but they are very slow: http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440#post718440
I got the answer from the Sencha forums.
Check out Field.setMessageTarget(String) - you'll want to pass in
"tooltip" (or, to just not draw that icon, anything but "side"). With
that set, it shouldn't even attempt to draw the icon.
http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440
What about converting the field in a DOM element, then navigate till the Red icon and apply a style to disable it?
Something like:
((El)passwordField.getElement().getParentElement().getChildNodes().getItem(2)).setStyleAttribute("display", "none");
You could have a CSS style like this :
.x-form-element img {
display: none;
}
or
.x-form-item img {
display: none;
}
All the images in a form element won't be displayed.
dateField.forceInvalid("error message which u want to pass"),.it will automaticaly show an exclamation mark on the right side of the date field
i have a set of HFlexLayout('s) inside of a VFlexLayout, a vertical list of buttons(e.g., X,Y,Z) with 5 fields after each button. when a button is pressed, i want one of the fields to toggle from off to on.
{X}[0][0][0][0][0]
{Y}[1][0][0][0][0]
{Z}[1][1][1][1][0]
for the fields to be toggled (in order) by the buttons, what element is appropriate to use? I would like to be able to change the color of the field upon toggle, but these aren't buttons that need to be pressed. I would be happy with 5 blocks next to each other as long as i can set the color of each block individually.
I think I'm going to try using disabled buttons if I can set their color, or maybe a progress bar that move's 20% after each button press, but when all i want are colored blocks, each of those options feels like a hack to me.
Why not just use enyo.Control? You can the specify whatever content you want, though you might want to set the allowHTML to true if you want to put HTML in it. You can style the control however you want. You don't even need to specify the kind in this case. Assuming an HFlexBox:
components: [
{ kind: "Button", flex: 1 },
{ content: "", flex: 1, style: "<whatever>" },
...
That should work out how you like it.
I have a site with a textarea that is a very specific size; resizing it could make the user think that they can enter more text into the textarea than is possible (it is limited by rows and columns). Firefox 4 automatically shows a 'resize handle' in the bottom-right of the textbox and as a user I can resize the textarea on the page. Is there any way to disable this?
Thanks.
Use CSS and style it with:
textarea {
resize: none;
}
Sometimes the CSS will not work. I have successfully removed the users ability to resize the textbox by using an inline style. Those are the last ones processed by the browser and have the final say on what style is used.