I am using kendoUI, I cannot change the html, they are generated by the framework.
I wish to remove/hide text in span and keep the image by clicking button. I cannot hide text only.
<span class="k-link">
<img></img>
menu text
</span>
Thank you
Try this,
CSS
.k-link{
font-size: 0px;
}
Related
I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>
I was wondering, say I have a button like so:
<button><i class="font-icon-class"></i></button>
would it be possible for me to add padding (or any other style) to the .font-icon-class should the button also contain text or another HTML tag? So if my button was like so:
<button><i class="font-icon-class"></i> Button Text </button>
or
<button><i class="font-icon-class"></i> <img src="..."></button>
I thought I could apply a padding-right using a CSS selector, something like
.font-icon-class + * {
padding-right: 5px;
}
Obviously that doesn't work and I know I could use JavaScript but I was wondering if CSS could provide a solution?
Many thanks in advance.
You can try the :only-child selector
.font-icon-class:only-child {
padding-right: 0px;
}
.font-icon-class {
width: 15px;
background: lime;
padding-right: 15px;
}
button {
width: 150px
}
<button><i class="font-icon-class">test</i></button>
<button><i class="font-icon-class">test</i><span>HELLO</span></button>
CSS is short for Cascading Style Sheets, which means it adds the style as it goes down the code - not up. Therefore you can't (Yet? I believe I read somewhere you will be able to, in the future) add style to an element, if it has another element after.
A solution - if you have access to the HTML, would be to add a span around the element after the .font-icon-class, like so:
<button>
<i class="font-icon-class"></i>
</button>
<button>
<i class="font-icon-class"></i>
<span>Button Text</span>
</button>
<button>
<i class="font-icon-class"></i>
<span><img src="..."></span>
</button>
And then your own CSS would work, but you could narrow it down so you don't target all elements after the .font-icon-class, change the padding to left, and display the span as inline-block:
.font-icon-class + span {
display: inline-block;
padding-left: 5px;
}
This would add a padding to the span-element inside the button, if it is after the .font-icon-class-element
should the button also contain text or another HTML tag?
there is no need of any HTML tag or text if you don't want.
and from your question what I understood is, You can directly style the class like this,
and If want to add padding or any style just to next element in button, then you can do this,.
.font-icon-class + *{ any Style of your choice }
.font-icon-class {
padding-right: 15px;
}
<button><i class="font-icon-class"></i></button>
I have a <button> element which has been centered into the middle of the page with an anchor tag wrapped around it like seen in this JSFiddle.
From the JSFiddle if you hover your mouse on either side of the button the link is active. I could prevent this by wrapping it around a <div> and then apply this to the <div>:
div {
display: block;
margin: 0 auto;
}
However is there a better solution to this as in my case, I have many buttons like this and it would take long to apply? Thanks.
Are you referring to the space within the button, besides the "A Button" text, because I don't see any clickable area outside of the button. If so, I think that's just a function of the button tag. When I hover over the button, it highlights blue but my cursor doesn't change, like it should when I hover over a link.
If you throw the a href tag within the button, you'll get the cursor to change when you hover over the button's text. However, the button will still highlight button when you cursor is over the empty space within the button.
Also, what are you using the links for? Instead of hyperlinking the button, you might want to use the URL attribute within the button tag, if you're trying to use the button to send information somewhere.
The best solution to this was to just wrap the button with a form like so:
<form action="link-to-page-here">
<button>Button</button>
</form>
Using this, I can still center the button using:
button {
display: block;
margin: 0 auto;
}
But avoiding the link being clickable on the row of the button.
You shouldn't put a <button> inside of an <a> tag
just use the <button></button> and use the same style you've written for the button tag, so it should be something like that:
button {
display: block;
margin: 0 auto;
}
If you have to use the wrong markup and keep the button inside the <a> tag
just wrap the a tag inside a div tag and change styles to the following
<div>
<a href="">
<button>A Button</button>
</a>
</div>
and styles:
a{
display: inline-block;
margin: 0 auto;
}
div{
text-align: center;
}
button{
}
I'm using a pattern like this to add icons via :before or :after pseudo content:
<span class="icon icon__example is-content-visually-hidden">assistive text</span>
How can I visually hide the assistive text without hiding .icon pseudo content? Neither the assistive text or the space it occupies should be seen at all, such that these icons can be used inline. When.is-content-visually-hidden is toggled off then the text should be visible. I tried various techniques such as text-indent: -9999px to no avail.
This codepen demonstrates the problem.
The simple approach is to set inner text's font-size to 0 and then reset pseudo-element font to normal again to make it visible:
.is-content-visually-hidden {
font-size: 0;
}
.icon__star::before {
content: "*";
font-size: 32px;
}
Demo: http://codepen.io/anon/pen/zxWQRX
However more flexible approach is to wrap text into one more span:
<i class="icon icon__star is-content-visually-hidden">
<span>star</span>
</i>
and hide span only.
You should wrap the inner text in a span and hide that to be sure. But if you are not able to do that then you could try
font-size: 0
I have a span like this
<span class="ui-icon ui-icon-circle-close"></span>
which gives display a close icon of color same as the theme color.
But want to use the red icons which are available for the error.
Which jquery class should I use for that.
I found a class in Jquery css
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon
{background-image: url(images/ui-icons_cd0a0a_256x240.png); }
this image is the image which contains jquery red icons .
But I cant use it.
The span's class only determines the icon.
Set the "ui-state-error" on its parent to change the icon's color to red.
Check the icon example here: http://jqueryui.com/themeroller/ (the bottom of the right sidebar).
When trying to use such icons before text, I got line break problems and a bad alignment between the icon and the text.
To avoid the icon to add a line break, use
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
To get a better alignment for the text, use the following
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
<span style="display: inline-block; overflow: hidden;">Your text</span>
If You want just icon with other color, not whole box as is the example here:
http://jqueryui.com/themeroller/, in bottom right conner
add this to anywhere in Your .css file:
.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); }
The name and path of the file are depend of the color what You wanted.
And in html:
<div class="ui-icon-red ui-icon-circle-zoomin">
<span class="ui-icon ui-icon-alert"></span>
should do it.
Edited because I think I now found the right class.
Apply ui-state-error to the layer containing the icon(s) and remove the default background and border:
CSS:
.error-state-icon.ui-state-error {
border:none;
background:none;
}
HTML:
<div class="ui-state-error error-state-icon">
<span class='ui-icon ui-icon-info'></span>
</div>
Demo >>