I'm using treepanel object in ExtJs and I want to create two div side by side inside treepanel items. Is it possible to set one of them's width fluid and the other's width auto ? Actually, html and css codes work properly but when I put them inside treepanel item's text property it's not working. Where I am doing a mistake ?
Here is a part of my Extjs Code;
{
xtype: 'treepanel',
cls: 'wikiTreePanel',
root: {
text:
'<div class="treeItemTitleWrapper">'+
'<div class="countSide"><span>12</span></div>'+
'<div class="titleSide">Main Wiki Title Main Wiki Title Main Wiki Title</div>'+
'</div>',
expanded: true,
}}
Here is my html and css code;
.treeItemTitleWrapper{
display: inline-block;
width: 100%;
height: 26px;
overflow: hidden;
}
.treeItemTitleWrapper .titleSide{
background: orange;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.treeItemTitleWrapper .countSide{
float: right;
height: 26px;
background: pink;
}
<div class="treeItemTitleWrapper">
<div class="countSide"><span>12121212</span></div>
<div class="titleSide">Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title</div>
</div>
How can I do that. Thanks for your assistance.
You input is a little unclear. As per my understanding if you want to reduce the title to few characters, you can use the below method.
Ext.util.Format.ellipsis('Custom Title', 6);
Ext.util.Format.ellipsis
Related
I have found a lot of issues related to this one, but not one that matches the exact same problem and I was also not able to resolve my problem with other "related" issues. Below you can see two screenshots, one with overflow-x: auto and one without.
With overflow-x: auto
[[With overflows-x][]1]
Without overflow-x: auto
[[Without overflows-x][]1]
So overflow-x auto is cutting off my tooltip when it overflows vertically. I do not know why it behaves this way, even if I put overflow-y visible on it, it does not work.
Reason I am using overflow-x: auto
I am using overflow-x: auto to make my table responsive on resize. This will give me a scrollbar when the content does not fit. I see that many people use this to make their tables responsive.
Important code parts that I am currently using
HTML
<div key={uniqueKey} className={'table-container'}>
<table>
<thead>
<tr>
<th scope='col'>Id</th>
<th scope='col'>Name</th>
</tr>
</thead>
<tbody>
{someList.map((item, index) => {
return (
<tr key={index}>
<td data-label='Id'>{id}</td>
<td data-label='Name'>{name}</td>
<td data-label='Actions'>
<div className={'actions-container'}>
// EXISTING TOOLTIP COMPONENT HERE, I WILL SHOW THE CSS.
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
CSS
.table-container {
overflow-x: auto;
border-collapse: separate;
table-layout: fixed;
table {
width: 100%;
tr {
height: 40px;
}
td {
height: auto;
}
th {
min-width: 175px;
padding: 8px;
}
}}
CSS Tooltip
.tooltip{
width: 300px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
position: absolute;
z-index: 100;
word-break: normal;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s;
transition-delay: 0.4s;}
Other notes
I can not modify the tooltip too much since it is a existing component within our company, we would have to change it on lots of places. Also it works as expected on other places.
If there is any information missing, just let me know and I will respond as soon as possible.
Any insights are welcome at this point!
We had faced similar issue. The way we solved this is add a support to render the tooltip view in a react portal instead.
You'll need a component change but you don't need to change a lot of existing code.
Add a portal component:
const Portal = (props) => {
const { children, target = document.body } = props;
return ReactDOM.createPortal(children, target);
};
Add a usePortal prop that'll render the view in portal instead. Otherwise the view will be rendered as it is currently.
You'll have a viewDom that renders your tooltip view, use the Portal component:
const { usePortal } = props;
const viewDom = <span> Your view dom </span>;
if (usePortal) {
return (
<Portal>
{ viewDom }
</Portal>
)
}
// otherwise return the default dom without portal
return viewDom;
I’m not sure if this would solve the issue or not, but I noticed that the visibility is set to hidden and that will hide everything that doesn’t fit within that specific div. You might want to try setting that to visible to see if it fixes this cut off issue. I have no idea if that is the fix to this, but I wanted to try and help ha ha.
If your tooltips have a max-height, you can add padding/margin top to the table to clear that height.
So if
.tooltip {
...
max-height: 3em;
}
table {
margin-top: 3em;
}
Haven't tested it but your tr only has 40px height and will cut off the overflow on auto, because your three lines of text will take more than 40px space at all.
You should try to set the tr to position:relative and the tooltip to position:absolute for positioning and forget about the overflow;
I am working on front end part of a loading page in an Angular project. I want to show loading with three dots starting from one dot then two and then three to create a sense of loading. But when I add the dots the text of loading, it gets pushed to the left and as dots reduces to one the loading text is moving to the right.
The code is written in angular
Here is the code:
For HTML file:
<div class="textCamel">Loading<span id="loader-loading-dots"></span></div>
For CSS file:
.textCamel {
position:absolute;
width: 100%;
text-align: center;
font-size: 18px;
margin: 0 auto;
}
For type script file
export class LoaderComponent implements OnInit {
ngOnInit() {
// TODO: start CSS animation
this.initLoadingDots();
}
// This method initializes the loading dots animation
initLoadingDots() {
let x=0;
setInterval(function() {
let dots = "";
x++;
for (let y=0; y <= x%3; y++) {
dots+=".";
}
$("#loader-loading-dots").text(dots);
} , 500);
}
}
I really appreciate if anyone can offer some tips to fix this issue.
You can use text-align:left instead and put everything inside a container that you align center and use fixed width to always have the same behavior.
Simply be sure the width you use will contain the maximum text (loading + the 3 dots) to avoid overflow even if it's not a big issue as by default the overflow is shown unless you have another style that hide it :
.textCamel {
/*position:absolute; removed this to show the result of the 3 divs */
width: 100%;
text-align: center;
font-size: 18px;
margin: 0 auto;
}
.load {
display: inline-block;
text-align: left;
width: 80px;
}
<div class="textCamel">
<div class="load">Loading<span id="loader-loading-dots"></span></div>
</div>
<div class="textCamel">
<div class="load">Loading<span id="loader-loading-dots">.</span></div>
</div>
<div class="textCamel">
<div class="load">Loading<span id="loader-loading-dots">..</span></div>
</div>
<div class="textCamel">
<div class="load">Loading<span id="loader-loading-dots">...</span></div>
</div>
I came to know that we cannot have an alt for a css generated image.There are solutions that say by having title atribute we can get the alt effect only on hovering on the image,however when we disable the css we will not able to see that text in place of the image.In my case I need the text to be appeared even when the css is disabled .Is there any workaround for getting the text visible when the css is disabled.
<span class="myimageclass">
hi
</span>
<style>
.myimageclass
{
height: 100px;
width: 200px;
background-image:url('http://cdn.osxdaily.com/wp-
content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png');
color:red;
overflow: hidden;
text-indent: -9999px;
}
</style>
Thanks,
Balaji.
You can use text-indent and overflow: hidden.
This is not flexible method but I hope you can use it.
.image {
width: 200px;
height: 100px;
display: block; /* it needs for inline elements like span */
background: url(http://cdn.osxdaily.com/wp-content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png);
overflow: hidden;
text-indent: -9999px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image js-image">
Image alt
</div>
<button class="js-button">On/Off styles</button>
<script>
$('.js-button').click(function() {
$('.js-image').toggleClass('image');
});
</script>
#balaji, this is already an SO thread that takes care of CSS in a page, you can pick something from here and fine tune for your needs: How to determine if CSS has been loaded?
I'm trying to create a HTML widget:
HTML:
<div>
<h1 class="title" data-bind="title">Title</h1>
<div>
<h1 id = "dc1" class="dc">DC1</h1>
</div>
<div>
<h1 id = "dc2" class="dc">DC2</h1>
</div>
<p class="updated-at" data-bind="updatedAtMessage"></p>
</div>
And I need to be able to set the background color of the id="dc1" and id="dc2" elements dynamically in CoffeeScript. I plan to do this by adding a class with a background color setting:
SCSS:
&.up {
background-color: green;
}
&.down {
background-color: red;
}
.dc {
background-color: orange;
font-size: 30px;
float: left;
width: 50%;
}
So far I have managed to set the whole widget background but not the child elements mentioned above:
I have been using:
CoffeeScript:
$(#node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')
$(#node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')
Note ultimately I will add the classes depending on some data rather than hard coding them to 'up' or 'down' in the coffeescript.
But nothing happends.. Am I getting selecting the id="dc#" elements correctly?
If it helps with context I'm doing this for Dashing
Your SCSS doesn't make sense so I'd guess that your missing an error from the SCSS-to-CSS conversion. An & in SCSS is a reference to the parent selector:
& will be replaced with the parent selector as it appears in the CSS
so have &.up at the top level makes no sense and should generate an error. If we fix the SCSS so that .up and .down apply only to .dc:
.dc {
/* ... */
&.up {
background-color: green;
}
&.down {
background-color: red;
}
}
then everything seems to work just fine.
Demo: http://jsfiddle.net/ambiguous/9y9uywm9/
You can use Sassmeister (and other similar online tools) to see what SCSS thinks of your original SCSS.
I have made a simple menu in HTML. It works (almost) perfectly. The menu items are, as you can see, links with background images set in CSS. At mouse-over another background image is shown.
My problem is, that I cannot find a working solution for setting a menu item constantly "chosen" - or said in another way, I wan't to show the actual page in the menu.
First, I will show the HTML and CSS. Afterwards I will show what I have tried to do.
<div id="menu">
</div>
CSS looks like this:
#menu_produkter
{
display: block;
position: absolute;
background: url(images/menu_produkter.png) no-repeat;
width: 108px;
height: 26px;
margin-left: 376px;
margin-top: 52px;
}
#menu_produkter:hover {
background: url(images/menu_produkter_hover.png) no-repeat;
cursor: pointer;
}
#menu_galleri {
display: block;
position: absolute;
background: url(images/menu_galleri.png) no-repeat;
width: 64px;
height: 26px;
margin-left: 496px;
margin-top: 52px;
}
#menu_galleri:hover {
background: url(images/menu_galleri_hover.png) no-repeat;
cursor: pointer;
}
#menu_kontakt {
display: block;
position: absolute;
background: url(images/menu_kontakt.png) no-repeat;
width: 85px;
height: 26px;
margin-left: 572px;
margin-top: 52px;
}
#menu_kontakt:hover {
background: url(images/menu_kontakt_hover.png) no-repeat;
cursor: pointer;
}
I have tried to add CSS id's for each item called #menu_xxxx_on with the same background images as the ":hover" id's.
Then I set ViewBag.CurrentPage = "xxxx" in the top of my views. Finally I use Razor to check which page is the current:
$*
I hoped it would work - but instead the menu item totally disappears. I have tried to 'Inspect element' with Google Chrome to find out whats wrong. It seems like it resets all CSS-properties.
Is there any easy solution to this - or do I have to do it another way? I have seen other solutions with custom html-helpers - but I think it's a bit overkill if I can do it this way.
Thank you in advance.
If you want solve it with classes then use jQuery functions for example :
$(function(){
var id = $('hiddenId').val();
$('#'+id).addClass("someClass");
});
In someClass define your chosen menu tab style.
Id of chosen menu you can send using ViewBag and render it in hiddenField with id : hiddenId
#Html.Hidden("hiddenId",(object)ViewBag.CurrentPage)
But I suggest manipulate with innerHtml, then jQuery function should look like this :
$(function(){
var id = $('hiddenId').val();
var header = $('#'+id).html();
$('#'+id).html(header+'-on');
});