I have some MathJax MathML with a mlabeledtr - a label.
The label is being cropped/cut off as it does not fit inside its parent HTML element so it is not visible.
How do I ensure it is visible?
config['HTML-CSS'].linebreaks = {automatic: true, width: "90% container"};
has done the trick. The label doesn't get accounted for when working out the width, so I had to set the width of the MathML to be smaller (90%) than its container so the label could fit in as well.
Related
How can I make text inside .inside-ob-u which appers after hovering .ob-nth2 not to do 'fitting process' as shown :
As is possible to clearly see the text is fitting when the height and width change is in the process.
How can I do it without absolute position or disabling transition? Works well if I do so.
https://jsfiddle.net/daf7a509/
You could use transform: scale(x). The nice thing is that scale doesn't change the space taken up by the element -> the other elements don't move.
https://jsfiddle.net/am7m384d/
EDIT:
[...] but it also affects the content (childs) and mess things up. – user3734782
You could set the size of .box__hover to the size it should have when being hovered and scale it down when it is not hovered (for the transition). Then the children would have their correct size.
Here is an adapted fiddle: https://jsfiddle.net/b7w40gtp/
If you set the width of .inside-ob-u instead of using a percentage, it won't reflow. See https://jsfiddle.net/daf7a509/1/
Currently I have some large text on a page, and layout works fine for short text (~12-14 chars in length), but any more than that will overflow or wrap. This is undesirable, so I'd like the size to be reduced to fit the whole text.
I've looked into JS solutions like FitText and BigText, but they depend on a fixed width. Since I'm using Bootstrap, I don't have fixed widths.
Okay: http://tf2reputation.com/profile.php?id=76561197960947673
Not okay: http://tf2reputation.com/profile.php?id=76561198054504781
I'v also considered setting white-space: nowrap or truncating, but I'd prefer to show all the text, but smaller, if possible.
FitText does work with a fluid width.
From the github page :
Make sure your container has a width!
display: inline elements don't have a width. Use display: block OR display: inline-block+ a > specified width (i.e. width: 100%).
Bold is mine for emphasis.
Looking on the homepage for FitText also reveals that there are no fixed width units in sight.
I should also mention that there is not a native CSS technique to achieve this. The closest thing would possibly be viewport relative lengths but that doesnt solve your problem.
My additional opinion (danger beware) :
In my experience when you are confronted with a problem like this, its because you may be looking at things a little wrong from the design side, And if you require Javascript for your layout to stay intact, I do think that needs to be reconsidered. Nursing a design along is usually better than banging it into place with a crowbar.
End Opinion
You could try an iterative approach using javascript.
Put the contents into a span with white-space: nowrap.
If span is the span within, you can do something like this:
var maxWidth = span.parentNode.clientWidth;
var currentFont = parseInt(window.getComputedStyle(span).fontSize); // or max font size
while(span.offsetWidth > maxWidth) {
currentFont--;
span.style.fontSize = currentFont + "px";
}
This will continually decrement the font until the span fits within its parent.
If the allocated width changes as you resize the window, you may need to run this on window resize.
I've got the following JS Fiddle to demonstrate what I'm trying to accomplish:
http://jsfiddle.net/sVKU8/2/
1) I assume this first part is easy - Is there a way to update the parent label class to automatically have it's width set based on the total width of the two child <div>s so the border only wraps around the green and red <div>s? I thought setting width: auto was supposed to do that, but my CSS skills are apparently lacking.
2) What I'd like to accomplish next would be to remove the width attribute from my label-text class and have the width set (or grow automatically, if possible) whenever I apply text to that <div> via JavaScript without text wrapping (i.e. keeping the original height of the label class).
I wasn't sure if I needed to try to calculate the width based on the actual text, or if there is a way to just apply the text with a width setting that will allow it to grow.
Any input or suggestions would be greatly appreciated!
Add this property to your css :
.based-on-text{
display: inline-block;
}
This way, the div will act like a block but will have exactly the width it needs instead of taking the whole parent level width !
click here
CSS alternative without additional JS using traditional floating elements approach
This fiddle (Click HERE) shows using inline-block on the div text-label and a little JS to set the width on the outer box with the border.
This is the javascript. Pretty ugly. There's probably a better way:
$(".label").css("width",
parseFloat( $(".label-image").css("width"))
+ parseFloat( $(".label-text").css("width"))
);
I have been able to resize the QTabWidget's QTabBar size, but the string inside is always limited to a fixed length.
QTabWidget *tabWidget = new QTabWidget;
tabWidget->setStyleSheet("QTabBar::tab { width: 100px; }");
tabWidget->addTab(imagesList, "abcdefghijklmnop");
The string shown is made of the central five/six characters only.
Thank you for any help,
Pietro
References:
Qt Increase QTabWidget's QTabBar size
When you specify the width of the tab using a style sheet as you do, you also make the width of the tab fixed. If the text is wider than the specified width you will only see whatever characters in the middle of the text that fit. Try increasing the tab width to 200px or 300px, or if it is the minimum width of the tab you want to set (and still have it become wider if needed) use the following style sheet:
tabWidget->setStyleSheet("QTabBar::tab { min-width: 100px; }");
How do I get the input to expand to the full width of the parent div? For label it worked fine. The code can be found here: http://jsfiddle.net/7h8Zg/
What makes the label expand but not the input?
change the left padding to percent, and use the rest for width, like so:
padding:0 0 0 2%;width:98%;
If you want the inputs to be the same size as the submit button, you should add width:97% to the input rule.
http://jsfiddle.net/7h8Zg/15/
Adding
width: 100%;
to the input class allows the input to expand to the full size of the parent div.
JSFiddle: http://jsfiddle.net/7h8Zg/5/