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">
Related
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
Following is my fiddle in which I am trying to vertically align the text with Icon Font. Kindly let me know what's an appropriate way to do such alignment:
How can I vertically align the font icon with the text on this fiddle
Wrong output:
[ICON]Text
Text Text
Expected Output:
Text
[ICON] Text
Text
You can simply make the icon float (bootply #1):
.panel-title .glyphicon {
float: left;
margin-right: 10px;
}
but I prefer using Block Formatting Context (BFC) properties when it comes after a floating element (needs an extra element to enclose your text). It basically creates a column along your float instead of letting your text wrap around it as usual (bootply #2):
HTML:
<a href="#collapseFour">
<span class="left mr1 glyphicon glyphicon-file"></span>
<span class="bfc">Reports Reports Reports Reports Reports Reports Reports</span>
</a>
CSS:
.left {
float: left;
}
.bfc {
overflow: hidden;
}
div it.
put the icon in a separated div, like this:
<div>
{icon}
</div>
<div>
{text}
</div>
and put them inline. display:inline-block... this should work.
you can make a little table like this
<table>
<tr>
<td valign="middle">[ICON]</td><td>Text<br>Text<br>Text</td>
</tr>
</table>
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/
<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/