I have attached screenshot of bootstrap panel(repeated). the second text paragraph (Taj) displays in next line and hence the chevron style (padding-top:50%) doesn't align to exact middle(or center) of the panel.How do I resolve this issue?
Also, I need to chnage the color of the body text and chevron to blue on mouseover.
How can I achieve this?
.chevronAtRight{
font-size:20px;
padding-top:80%;
}
.hoverChevronFont{
color:#49B4E8;
font-family: 'Avenir', 'Helvetica', 'Arial';
font-style: 'Book';
}
<p class="panelTextFont14 panelText" ng-attr-title="{{reservation.resortName}}">
{{reservation.resortName}}
</p>
...
<div class="col-xs-1 col-sm-1 col-md-1">
<p><i class="glyphicon glyphicon-chevron-right pull-right chevronAtRight"></i>
</p>
</div>
...
To change the color of the chevron :
.glyphicon:hover {
color:#49B4E8;
}
But for change the color of all body text you need to use jquery onmouseover.
And for center the chevron try something like this :
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
And in your html :
<div class="col-xs-1 col-sm-1 col-md-1 vcenter">
Related
I know this looks very simple, but I have been trying to figure out a solution for an hour now. I have an "a" element with text and an image inside. The problem is that the image goes below the text, and I want them lined up.
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<!-- Header right part -->
<div class="dropdown">
<a>
User123
<img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content" >
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
I didn't have the issue myself but you can do
#nav-user-logo {
max-height: 1em;
display: inline;
}
to guarantee it is inline with the text.
By defect, any browser, with your css will display the image side by side as, I think, you want:
example with your code:
a {
text-decoration: none;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<div class="dropdown">
<a>
User123
<img src="https://www.ajvs.com/redirect/5/Agilent_IMG300_UHV_R0343301_1,8926cf9ec9ce009a52f3ea8866b07f5f" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content">
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
Probably, you have some kind of "reset" css sheet that is turning all your images as display:block It's quite common in many wordpress themes. You may need to overwrite these css adding img {display:inline-block} or similar rule. Calling to the id image or class to not break your whole theme.
Turns out the issue was something super simple. This code is in a header, on the right side, and the "a" element was too small to display the code and image side by side. I fixed it with the following:
<!-- Header right part -->
<div class="dropdown">
<a style="display:inline-block; width: 150px;">
User123
<img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content" >
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
So this kind of question has been asked many times, I know, but for some reason nothing seems to work for me.
This is a simplified version of what I have (with the last solution I tried):
<ul class="pagination pull-right" style="display: table-cell; vertical-align: middle; text-align: center; background: red;">
<span class="pagination-info pull-left" style="background: blue">Filas por página: </span>
<span style="display: inline-block;">
<span class="btn-group dropup pull-left" style="position: relative; display: inline-block; vertical-align: middle;">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
5 <span class="caret"></span>
</button>
</span>
 || Mostrando 1 - 5 de 8 filas en total
</span>
</ul>
And this is what it looks like (colored in blue and red for descriptive purposes):
original layout
JSFiddle: https://jsfiddle.net/oxaa30ug/ (not exactly as the picture but still shows my problem)
What I'm trying to accomplish is to get the blue span as well as the text at the right centered vertically, and not at the top as they currently are. Any help is very appreciated.
You can use a custom class when needed.
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
vertical-align with Bootstrap 3
In bootstrap 4, they have provided a dedicated class align-content-center (using flexboxes)
I want to style the font/text to bold to text inside the
col-md-6 label-wrapper
I tried some css styling but does not affect the current font of my webpage when printing
.col-md-6{
display: relative;
}
.col-md-6 label-wrapper{
font-weight: bold;
}
Also I want to display it horizontaly in print, something like
purchase order: 34567
name: abcd
street: ca
qty: ty
Currently, when I print the selected html content using Javascript print function, the output looks like this
purchase order:
34567
name:
abcd
qty:
67
My content
<div class="col-md-4 order-column prod-wrapper">
<h3 class="vo-title"> Order Details </h3>
<div class="prod-row vo-content">
<div class="col-md-6 label-wrapper"> Purchase Order #: </div>
<div class="col-md-6 "> <?php echo $order[0]['po_number']; ?></div>
</div>
</div>
HTML:
<div class="col-md-4 order-column prod-wrapper">
<h3 class="vo-title"> Order Details </h3>
<div class="prod-row vo-content">
<div class="col-md-6 label-wrapper"> Purchase Order #: </div>
<div class="col-md-6 result ">3567</div>
</div>
</div>
CSS :
.col-md-6{
display: relative;
}
.label-wrapper{
font-weight: bold !important;
}
.col-md-6 {
display: inline;
}
Demo Link
Try font-weight:bold !important; or font-weight:600;
If that doesn't work, font-weight: 600 !important;
!important overrides the previous statement.
OR, if that doesn't work, play around with the .bold() function, or place the output between <b></b> or <strong></strong> tags.
On you CSS you have:
.col-md-6 label-wrapper{
font-weight: bold;
}
You forgot to set .(dot) on labe-wrapper (it's a class)
.col-md-6 .label-wrapper{
font-weight: bold;
}
To display both lines in the same line use on col-md-6
display: inline;
I'll guess You need for the font problem to use
.label-wrapper
{
font-weight: 600+ (<900) (!important if the style sheet is override by bootstrap)
}
And to get your element in one line you can use white-space: nowrap
try this,
.my-data {
font-weight:bold !important;}
<div class"col-md-6 my-data">Purchase Order#:
<span><?php echo echo $order[0]['po_number']; ?></span>
</div>
Currently the HTML looks like this:
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p><a class="email" href="mailto:your-email#your-domain.com" style="color: #ffffff; hover:#006b33">sales#higherpromos.com</a></p>
</div>
and my CSS looks like this:
.col-lg-4 text-center a.email:hover {
color: #006b33;
}
I can't figure out what I'm doing wrong? Any suggestions?
To change the hover color you will have to change it in a CSS-Style that is correct. But to apply it to only one special element you need to create a special class or map it to an id. Note that you must declare the standard color in CSS as well otherwise it won't work.
By Class:
.email {
color: #ffffff;
}
.specialColor:hover {
color: #006b33;
}
<a class="email specialColor" href="#" style="">LINK</a>
By Id:
.email {
color: #ffffff;
}
#specialColor:hover {
color: #006b33;
}
<a id="specialColor" class="email" href="#">LINK</a>
You are applying a style directly to your anchor. That style is taking precedence over your other styles.
You could use the following style:
.text-center a.email {
color: #fff;
}
.text-center a.email:hover {
color: #006b33;
}
and change your html like this:
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p><a class="email" href="mailto:your-email#your-domain.com">sales#domain.com</a></p>
</div>
:-)
You're not combining selectors correctly.
.col-lg-4 text-center a.email:hover
This is nonsensical because you're asking for an element called text-center which isn't a valid element. In this particular case you want to use:
.col-lg-4.text-center a.email:hover
The .col-lg-4.text-center part of the selector is combining both class names (selecting an element that has BOTH .col-lg-4 and .text-center applied. But it's probably not necessary. In general you want your selectors to be as nonspecific as possible.
I am new to CSS !
I would like to overwrite a span style using external CSS. Any suggestions?
!important did not work for me.
Sample code below.
<div class="abc" id= "xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span> </div>
basically I would like to overwrite the #009530 for the text using a external css.
I tried like below external css. It did not work for me.
#xy {
color: blue !important;
}
TIA
Use following css:
#xy span{
color: blue !important;
}
<div class="abc" id="xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
</div>
<span id="xy" style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
css
#xy
{
color: blue !important;
}