I want to make this button text to truncate without hiding the caret.
When text is long it hides the caret.
I want to keep the caret at the end and truncate the text only.
This is my code
Sample Text
.btn-default {
background-color: #F0F0F0;
border-color: #cccccc;
max-width: 16em;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button id="L1.900Level" class="btn btn btn-default dropdown-toggle dropdown-toggle btn-xl-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span> short text </span><span class="caret"></span></button>
<button id="L1.900Level" class="btn btn btn-default dropdown-toggle dropdown-toggle btn-xl-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span> loooooooooooooooooooooooong text </span><span class="caret"></span></button>
#NOTE this solution is for bootstrap 4 where icon is not added by .caret but from :after selector nonetheless same logic may work on older versions as well.
For this to work you need an additional span tag.
HTML
<button class="btn w-100 dropdown-toggle">
<span>Alle Termine</span>
</button>
CSS
.dropdown-toggle {
span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
max-width: calc(100% - 5px); // prevents icon from touching right border
vertical-align: middle;
}
}
Notice button should have a certain width. In my case button gets 100% width of the parent container but you may have another width in your case.
This worked well on my end. I hope it helps other people as well!
You can do this by giving position absolute to the caret element and place end of your button
.btn-default span.caret {
position: absolute;
right: 4px;
top: 15px;
}
And you should make the parent element position as relative
.btn-default {
background-color: #F0F0F0;
border-color: #cccccc;
max-width: 16em;
overflow: hidden;
text-overflow: ellipsis;
position: relative:
}
Related
Right now I am trying to make my modal responsive but the "SAVE" button is not positioning as i want it to.
I want to have the button at the same position all the time, but right now it is disappearing.
My HTML and css looks as the following
.delete{
font-size: 16px;
max-width: 100%;
max-height: 60vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.delete .text-div{
padding: 3px;
}
.delete .button-div{
display: inline-block;
position: relative;
padding: 3px;
/* right: 50%;*/
left: 80%;
}
<div class="delete">
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">Delete Entry</span>
<button mat-icon-button (click)="onClose()" aria-label="Close dialog">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
</div>
<div class="text-div">
<span>Are you sure you want to delete this vacation entry?</span>
</div>
<div class="button-div">
<button mat-raised-button color="accent" class="button" (click)="buttonClick();onClose()">SAVE</button>
</div>
</div>
First off, you don't need to wrap single elements into divs, it's not a very good practice regarding accessibility.
Regarding your question, where exactly do you want your button to be? If its position is set to relative, it will be positioned relative to the nearest positioned ancestor. That means that you need to put a position property to the .delete div (usually, relative will suffice).
Another way to achieve what you want (if I understand it correctly) would be adding align-self: end to the button element, since it's wrapped inside a flex container.
I have created a slideshow for a website using W3Schools HTML code (from here: https://www.w3schools.com/w3css/w3css_slideshow.asp)
It all works fine except that I cannot get NVDA to read any title or aria-label attached to the previous and next arrows on hover. It only reads on click, which is too late for someone using a screen reader.
I've changed the W3Schools code from actual buttons to this:
<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button" aria-label="previous">❮</div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button" aria-label="next">❯</div>
and tried several combinations including:
adding ids to a span with text and then referencing it with aria-labelledby in the button div
using title="Previous Slide"
using a special class="visually-hidden" using the clip method to hide the text (already used in the menu, but it doesn't read that, either)
various other similar options, to no avail.
What can I do to make NVDA read the label/text on hover? JavaScript is ok, but no jQuery, please. Thanks.
I think you have to use aria-describedby="previous" or "next" So NVDA can read it. More information here: https://www.powermapper.com/tests/screen-readers/labelling/a-aria-describedby/
If it does not work I am sorry. Let me know so I can delete
The following code works. I haven't included the JavaScript as it's not relevant to this post.
.gallery /*code for this demo only */ {
width: 100%;
margin: 1rem 0;
border: 1px solid red;
height: 50px;
}
.prev,
.next {
background-color: rgba(0,0,0,0.2);
cursor: pointer;
position: absolute;
top: 30px;
width: 10px;
padding: 15px;
margin-top: 22px;
color: var(--dark-green);
font-weight: bold;
font-size: 1.25rem;
transition: 0.6s ease;
border: none;
user-select: none;
left: 1rem;
}
.next {
left: unset;
right: 1rem;
border-radius: 3px 0 0 3px;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
}
<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮<span class="visually-hidden">Previous slide</span></div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯<span class="visually-hidden">Next slide</span></div>
I was facing the issue where nvda did not read the aria-label assigned to Icon or IconButton on hover. I wrapped the icon with span, set the role as img and assigned aria-label to span.
Previous:
<IconButton
aria-label="Some icon"
role="button"
>
<TodayIcon aria-label="Today"/>
</IconButton>
Current:
<IconButton
role="button"
>
<span role="img" aria-label="Today">
<TodayIcon />
</span>
</IconButton>
I got there in the end. I needed to move the forward and back symbols inside the spans and, as #robariissa01 said, I need to use the 'aria-label'. The code for the buttons is now this:
<div id="dp" class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button" aria-labelledby="ps"><span id="ps" for="dp" aria-label="Previous slide">❮</span></div>
<div id="dn" class="direction next" tabindex="0" onclick="plusSlides(1)" role="button" aria-labelledby="ns"><span id="ns" for="dn" aria-lable="Next slide">❯</span></div>
I have a simple HTML, CSS website that is also making use of JavaScript for animated navigation for a mobile only site.
Current Naviation
The HTML for the button:
<div class="navigations">
<div class="left">
<div class="leftinner" id="left">
<i class="fas fa-arrow-left"></i>
<span id="lefttext">CONTACT</span>
</div>
</div>
<div class="right">
<div class="rightinner" id="right">
<i class="fas fa-arrow-right"></i>
<span id="righttext">WEBSITE</span>
</div>
</div>
</div>
When the user clicks on the contact button it triggers a JS function that runs the following:
document.getElementById('main').classList.add('slideright');
document.getElementById('left').style.display = 'none';
The issue I am having is when the user clicks the CONTACT button it triggers the WEBSITE button as well, almost as if the WEBSITE button has a hidden overlap over the CONTACT button. I have attempted using Flex Box, Float left, Float left and right, Display inline block, Display table with table-cell, column etc. The issue only persists on Chrome for Android, but works fine on iPhone and other browsers.
What would be the best way to fix this issue?
Apologies I can't share more than just the screenshot due to NDA reasons.
Edit
Here is the CSS for the navigation buttons, this uses the float left and right attempt.
.navigations .left {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: left;
}
.navigations .left .leftinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-right: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
.navigations .right {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: right;
}
.navigations .right .rightinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-left: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
So I managed to solve the issue with this.
Seems the float right on the text inside the right hand side button was the culprit. Changing how the right button moved its text to the right by making use of text-align: right;instead of float: right; solved the issue.
It seems that the floating right of text made the text's width 100% and overlap the button on the left.
I'm trying to have a bootstrap 3 input field have a little close icon appended on the top right of the input.
Here's my attempt: https://jsfiddle.net/8konLjur/
There's 2 problems with this though:
The × symbol isn't correctly placed in the circle.
I'm trying to move the <a></a> circle so it's halfway on the input border underneath and above (does that make sense?). This might have to be done with absolute positioning or javascript, I don't know.
A quick and dirty way would be to wrap the input in a div and set its position to relative and set the icon absolute relative to that:
DEMO
<div style="position: relative"> <!-- absolute relative to parent --> </div>
BUT, when working with bootstrap try to look at the patterns rather than hacking your way through.
You can just use the btn class for style and position it with additional class.
<button type="button" class="btn btn-default btn-sm">
×
</button>
or
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
See the example here below the icon section: http://getbootstrap.com/components/#glyphicons
In your btn-close make the following:
.btn-close {
position: relative;
top:10px;
padding: 0;
display: block;
background: teal;
border-radius: 100%;
width: 12px;
height: 12px;
float: right;
color: #FFF;
font-size: 12px;
font-weight: bold;
}
And it is better to enclose the input field and the close button in a div. Checkout this DEMO.
I have list of items. When hover, the background should highlight gray per item. I also want to be able to hover on "X" to change its background to red.
However, in the code below, when I hover on each line, the item background lays on top of "X" and there is no way to hover on "X".
Code: http://jsfiddle.net/qhoc/7vtZT/2/
HTML:
<ul>
<li>
<a>Long title for Item 1</a>
<i class=icon></i>
</li>
<li>
<a>Item 2</a>
<i class=icon></i>
</li>
<li>
<a>Item 3</a>
<i class=icon></i>
</li>
<li>
<a>Item 4</a>
<i class=icon></i>
</li>
<li>
<a>Item 5</a>
<i class=icon></i>
</li>
</ul>
CSS:
ul {
border: 1px solid green;
overflow: hidden;
padding: 0;
list-style: none;
width: 100px;
}
a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 20px;
white-space: nowrap;
width: 80px;
}
a:hover {
background: gray;
}
.icon {
display: inline-block;
float: right;
margin-top: -20px;
background: yellow;
}
.icon:before {
content: "X";
}
.icon:hover:before {
background: red;
}
Question: How to change CSS (preferably) to be able to hover on "X" to change its background color & be "clickable" in JS but also have the item's background in that line highlighted gray?
Right now I cannot event hook "click" event in the "X" because it keeps going under the items.
Requirements:
Width for ul is fixed of 100px
"X" must be in the same line of each li a element and stays in ul's width
If text in a is too long, it must go under "X" but not show outside box ul. There is no wrap.
Each li a has hardcoded width with ellipsis to show "..." on long text. This width can be changed.
No Javascript. Hardcoded CSS position is OK but less prefer.
Change the anchor css from inline-block to block also as a recommendation change the width from 100px (which is hardcoded) to 100% our auto to set the same width as the container
fiddle solution
Add position: relative; to all the li and add position: absolute;, right: 0;, top: 0; to .icon
Link to fiddle
May this can help u i think so..
a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 10px;
white-space: nowrap;
width: 80px;
height:15px;
}