Why "margin" CSS style doesn't work in FlowPanel (GWT)? - css

I am using Gwt.
Say I got
.marginRight{
margin-right: 10px;
}
FlowPanel myFP=new FlowPanel();
Button myButton=new Button("Button");
Button myButton2=new Button("Button2");
myButton.addStyleName("marginRight");
myFP.add(myButton);
myFP.add(myButton2);
After ran, there is no gap between myButton & myButton2.
Note: Button got default gwt-button style. So I am not sure if that the main reason causing the issue. Also, If I add the Label into FlowPanel, then it can recognize the margin nicely. But PushButton doesn't work so we can eliminate that gwt-button style is the main cause.
This is javascript of the above code
<div><button class="gwt-Button GHKUF0UDD4" type="button">Button</button><button class="gwt-Button" type="button">Button2</button></div>
Do you know why it is? & How to fix?

You apply two styles to your buttons: gwt-Button, which specifies 0 margin on all sides, and your own style, which sets a margin of 10px to the right.
If you want to use both styles, and your style to prevail, use
.marginRight{
margin-right: 10px !important;
}
If you do not want the standard GWT style to apply, use:
myButton.setStyleName("marginRight");
instead of adding a new style name.

Related

Jodit: when launching editor text in editor is centered and background color selection disappears

I am adding jodit editor to a page of a site I run, but when I do so the cursor (inside the editor) is centered and when you start typing it also is centered.
I tried adding a CSS defintion .editor { text-align: left; } but that doesn't change things.
Less important secondary question: before adding the editor I had a background color defined for the textarea which disappears when I add the editor. How do I select a bg color for the editor? I tried doing so on the homepage of Jodit (https://xdsoft.net/jodit/play.html?currentTab=Themes) but even when I change it there it does not change for me (at least not in Chrome)
You can use
.jodit-container {
text-align: left;
}
or text-align: initial;
You probably have some global css text-align: center which is also applied to the editor. I don't know if you applied the editor class to the editor yourself, but the default doesn't have that class.

Sub menu moves when changing padding

I have a Prestashop with a CSS menu, http://empk.dk/nyshop/ the padding is now: 15px 9px 15px in this #header .pt_custommenu .pt_menu
Before I changed it, it was 11px 9px 37px, and it worked before, but now, the sub menu doesn't align with the main menu, I've tried to look in the chrome debug mode, and in the CSS file, but I just can't find the issue or what code to edit.
I assume it's in the div called popup, but I can't find it.
You can see the CSS file here: http://empk.dk/nyshop/themes/pos_elly5/modules/posmegamenu/css/custommenu.css
The menu I want to edit is the "beige" / yellow colored.
Hope you can help!
".popup" Class having css property through the Jquery or inline style so you need to find this class and apply "top:53px" on that class
or
just write in your css this Class :
.popup{
top:52px !important;
}
but when you use the "!important" keyword at that time you need to be very careful that it affects others class or not.

How to style Polymer dropdown menu arrow

New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.

On off checkbox styling

I'm trying to turn a brand new template into my login script and for some reason the text "ON" for the checkbox isn't aligned properly like the template is as well as there doesn't seem to be a right border when on is selected. I've been trying to match up the elements and css to troubleshoot but not having any luck.
http://www.kansasoutlawwrestling.com/kowmanager/login
http://themeforest.net/item/zice-admin-colorful-admin-templates/full_screen_preview/1980638
I tried changing the padding as suggested by the two people below but I'd rather not change the css because it works on the template shouldn't it work without changing the css on mine.
Any other ideas?
I'm hoping someone sees something.
There's a 13px padding set on the span. Remove it and it will align properly.
It's on line 1187 of your zice.style.css file:
label.iPhoneCheckLabelOn span {
padding-left:13px
}
Change this declaration to this value:
label.iPhoneCheckLabelOn span {
padding-left: 1px;
}

customizing the drop down autocomplete box

I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.

Resources