I'm trying to have a fully-clickable span or Button with a Bootstrap refresh glyph-icon. With the code I've inherited, the icon itself is clickable, but the area between icon and button border isn't, i.e., it feels to the user as if clicking on the edge of the button doesn't work.
Here is the current code:
<span class="btn btn-default btn-xs" style="background-color: transparent;">
<h:commandLink id="refresh" style="height:25px">
<span class="glyphicon glyphicon-refresh"></span>
<a4j:ajax render="richTable cnt_label scroller"
execute="richTable cnt_label scroller" event="click" immediate="true"
oncomplete="richTableRerenderCompleted('refresh')"/>
</h:commandLink>
</span>
I've tryed replacing the outer span with a <button> and that seemed to do the trick, but it warps the table in a funny way while refreshing.
Using a RichFaces commandButton or commandLink directly made everything worse.
Any ideas?
Since the icon is just a letter you can create a button and put the icon in the label.
If you inspect the span you should see something like this:
<span …>
::before
</span>
Then check the CSS for ::before and you should see:
.glyphicon-refresh:before {
content: "\e031";
}
e031 is the number of letter, you can convert it to an HTML entity and do this:
<h:commandButton value="" styleClass="btn btn-default btn-xs glyphicon">
Related
I have a sidebar panel with an image and a button.
<div class="glyphRow" id="gly_Job" runat="server">
<span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
<asp:Button ID="btnJob" runat="server" Text="Job"
CssClass="btn btn-primary" OnClick="btnJob_Click" />
</div>
I want to make the button size to 100% so that I can click anywhere on the panel item but in order to do that I have to move the image inside button. How can I do that?
something like that ?
<div class="glyphRow" id="gly_Job" runat="server">
<button ID="btnJob" runat="server" Text="Job"
CssClass="btn btn-primary" OnClick="btnJob_Click">
<span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
</button>
</div>
asp:button is not standard HTML, it is an ASP.net Webforms control, that renders HTML.
If you really want to keep using asp:button use the following javascript to add a click event to the div
document.getElementById("gly_job").addEventListener(function(){
//Find the button and click it
this.querySelector(".btn.btn-primary").click();
});
For added user friendliness add the following CSS to indicate the whole div is clickable
#gly_job {cursor: pointer;}
Note: code untested and may need syntax error fixes
I'm working on improving the accessibility of an HTML page. I have a "refresh" button. Is it possible that every time I click the button, the screenreader will read out "refreshing".
This is my HTML code:
<button id="refresh_btn" title="refresh the content" aria-label="refresh" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
You have to investigate the aria-live attribute:
<div aria-live="polite" id="ele"></div>
Each time you press the button you can populate the above tag with the text you want using javascript:
<div aria-live="polite" id="ele">Loading</div>
I'm using Bootstrap Vue plugin - https://bootstrap-vue.js.org/
I need to change dropdown menu default background when someone select value from dropdown like this.
But this is the problem. When someone click dropdown, They toggle "show" class in dropwdown wrapper. No any class new class for red color highlighted div.
I tried to style .dropdown-toggle class but it overrides default style only. Any solution?
.dropdown-toggle{
background-color: #FF5722;
border-color: #FF5722;
}
Jsfiddle
You can do it directly in style. ex:
<b-form-select
options="[1, 2, 3]"
style="background: red">
</b-form-select>
or create a class...
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
In the place of btn btn-secondary change button classes like danger,primary, etc.... for more information follow this link
https://getbootstrap.com/docs/4.0/components/dropdowns/
In my Angular program, I want to display a string of text that says what the button does whenever you hover over the button.
How do I do this?
My mouse is hovering over the google button.
Here's my html code for one of my buttons if it helps:
<button [disabled]="!isDisabled" name="enable" class="btn btn-default btn-margin" (click)="toggleDisabled()"><i class="fa fa-pencil" aria-hidden="true"></i></button>
You can use title
<button [disabled]="!isDisabled" name="enable" class="btn btn-default btn-margin" (click)="toggleDisabled()" title="Something"><i class="fa fa-pencil" aria-hidden="true"></i></button>
did you try the title attribute?
title="hello world"
example here
http://w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title
add
title="my tooltip text"
or
[title]="aPropertyWithTooltipContent"
see also tooltips for Button
Playing with Bootstrap. See the code at this page:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_glyphs&stacked=h
It displays a Print button with a glyphicon before text "Print":
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
This renders nicely with text "Print" using font-family:
'Helvetica Neue', Helvetica, Arial, sans-serif'
However, this code should be semantically the same (XHTML / close span tag in element itself):
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print" /> Print
</a>
</p>
But it renders the text in a different font-family 'Glyphicons Halflings'. You can try making the change in the w3schools.com editor to see the effect.
Looking at Chrome inspector, apparently the Print text was included as part of the span and inherited the font-family from the glyphicon.
So, why can't the span be closed using the XHTML syntax <span ... />?
Is there a particular reason for it, or something else I'm missing?