Is there any possibility to customize Vaadin 7 Menuitem so that text is in Left side, NOT in right side and it is aligned evenly with icon? Second question is that is it possible to give different style to top level menu than other levels?
Css:
.v-menubar .v-icon {
float: right;
<div class="v-slot v-slot-user-menu">
<div id="menu.ui.UserView.user-chooser" class="v-menubar v-widget user-menu v-menubar-user-menu" tabindex="0">
<span class="v-menubar-menuitem">
<span class="v-menubar-submenu-indicator">►</span>
<span class="v-menubar-menuitem-caption">
<span class="v-icon FontAwesome"></span>
Adam Test
</span>
</span>
</div>
</div>
try to force it:
.v-menubar .v-icon {
text-align: left !important;
}
Try to do this
.v-menubar-menuitem-caption {
//style
}
If you want more css look in the vaadin docs at
Related
I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}
Can you somebody tell me how can I create hover effect of background and icon? Because all icons have same class name.
This is a code of facebook
<div class="vc_icon_element vc_icon_element-outer vc_icon_element-align-center vc_icon_element-have-style">
<div class="vc_icon_element-inner vc_icon_element-color-custom vc_icon_element-have-style-inner vc_icon_element-size-xl vc_icon_element-style-rounded vc_icon_element-background vc_icon_element-background-color-white">
<span class="vc_icon_element-icon typcn typcn-social-facebook" style="color:#000000 !important"></span><a class="vc_icon_element-link" href="https://www.facebook.com/" title="" target=" _blank"></a></div>
</div>
This is a code of twitter
<div class="vc_icon_element vc_icon_element-outer vc_icon_element-align-center vc_icon_element-have-style">
<div class="vc_icon_element-inner vc_icon_element-color-custom vc_icon_element-have-style-inner vc_icon_element-size-xl vc_icon_element-style-rounded vc_icon_element-background vc_icon_element-background-color-white">
<span class="vc_icon_element-icon typcn typcn-social-twitter" style="color:#000000 !important"></span><a class="vc_icon_element-link" href="https://twitter.com/" title="" target=" _blank"></a></div>
Maybe target that .vc_icon_element and add something like this:
.vc_icon_element:hover {
background-color: red;
}
or to target that span
.vc_icon_element:hover span {
background-color: red;
}
HTML:
<p>
<a href="#">my
<span>favorites</span>
</a>
(13)
</p>
I want "favorites" to drop after "my", and then to separately style "(13)", which should be on the same line as "favorites".
I tried with the above markup and the following CSS but (13) also drops:
p span a { display: block; }
(13) should stay on the same line as "favorites" so it looks like
my
favorites(13)
How about this?
my<br>favorites<span>(13)</span>
The longer version (more flexibility)
If you don't want a line break, you could use a block element. Now, since block elements aren't allowed inside inline elements (<a>), you should use span tags and style them as block elements.
<a href="#">
my
<span class="second-line">
favorites <span class="count">(13)</span>
</span>
</a>
And the CSS:
a .second-line {
display: block;
}
a .count {
color: #888888;
}
Would this work for you?
<p>
<a href="#">my
<p>favorites <span>(13)</span></p>
</a>
</p>
I'm having a hell of a time aligning two jquery-ui icons and text in the middle of the line in a header. (code blow). Can anyone assist pretty pleeeeease?
<div class="ui-widget-header">
<span class="ui-icon ui-icon-close"></span><span class="ui-icon ui-icon-wrench"></span>Text
</div>
I'm not perfectly clear on what you are wanting as an output.
If you are trying to get the icons and the text to all appear on one line, you do that by creating a new CSS class:
.ui-icon.inline { display:inline-block; }
.ui-widget-header.center { text-align:center; }
And then adding that class to your icons:
<div class="ui-widget-header">
<span class="ui-icon inline ui-icon-close"></span>
<span class="ui-icon inline ui-icon-wrench"></span>
Text
</div>
If you want them to then be horizontally centered in the div you could then change the div to:
<div class="ui-widget-header center">
<div class="ui-state-highlight ui-corner-all">
<span class="ui-icon ui-icon-info" style="float: left;margin-right: 0.3em;"></span>
<span class="spanHeading" style="float: left;display: inline">ADMISSION TYPE</span>
<span class="spanHeading" style="float: right">EXISTING ADMISSION TYPE</span>
<div>
i want to display span content inside div, but the Span Context display out of Highlight div.
Not a CSS expert, but I think you need to clear your floats. For most browsers, I think just setting an overflow property will work:
div.clear {
overflow:auto;
}
Example: http://jsfiddle.net/Xf2hq/