Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/
Related
Anyone know if there is a way to make the ng zorro select (multi) to stick to one line instead of wrapping the selected items. In some scenarios its fine but when you have certain layouts you cant have the height doubling on each selection.
There is a codebox demo here: https://codesandbox.io/s/2lp2n (reduce the size of the view panel to see what i mean).
I have tried pretty much all i can think of (adding css to the select and select top classes to try and force it to stay on one line but it doesnt seem to work). I wanted to ask here first to see if anyone has any ideas since their git would normally close a question and ask me to come here first.
Thanks
In the end i just had to add:
flex-wrap: nowrap !important;
to nz-select-top-control
I have created a very simple chart with NVD3.js as can be seen on this fiddle.
The problem lies with the title (text in the middle) which consists of a number and a symbol (%).
I need both those parts to be styled separate but this seems to be a real pain.
I have discovered I can only style an SVG through inline style tags so I already applied :
<div id="svgDiv"><svg id="test2" fill='#58B957' letter-spacing='-3px'></svg></div>
to get the color and spacing right. Now I still need the %-symbol to be a lot smaller than the number. Which I can't apply to the full svg, because this would make everything smaller.
I have tried all manners of adding classes, id's, wrapping them in tspan's etc; yet I can't figure it out.
Please tell me there's a straightforward solution for this?
I dont think there is a direct way in nvd3 but you can do this trick to empty the text and fill with tspan.
var text1 = d3.select(".nv-pie-title").text("");//get the title clear it
text1.append("tspan").attr("class", "number").text("85")//make first tspan
text1.append("tspan").attr("class", "percent").text("%")//make second tspan
working code here
I'm creating a context menu for certain elements using a PopupPanel; the menu itself is going to be fairly large and complex. What I'm looking to do is to have a list of buttons, plus an image and some text, related to the element clicked.
My problem is that I'd like the buttons to always display directly under the clicked element, because that's convenient for the user; the issue is that when PopupPanel is near the edges of the screen, it automatically changes position to be fully visible, not aligning its left side to the element as usual. I like this behavior, but it moves the position of the buttons away.
So what I'd like to happen is: normally the buttons are on the left of the panel, the other stuff is to the right. When the panel is close to the right of the screen, I'd like the buttons to instead be on the right (and thus under the clicked element) and the other stuff on the left.
Is there a clever way to do this, either in GWT or better yet, using only CSS? PopupPanel itself doesn't seem to tell you when it's going to get flipped, sadly. The only solution I currently have is to manually check the position and width of the popup before showing it and adjust accordingly, but I'm hoping there's a better solution.
Here is what I suggest (based on my own implementation of a similar use case):
Have the position callback implementation accept references (in constructor) on:
PopupPanel element
element on which user right cliked
the content you put in the PopupPanel
Replicate (I know this not DRY but implementation is package private) the code from default position callback
When opening to the right invoke a method that changes the layout of your content (CSS based or otherwise)
I hope it helps. If you find something better let me know.
I have a table in a fieldset that is not displayed properly (overflow) because of a long file name that I cannot wrap. Is there a way to wrap the file name that is in the table?
<table>
<tr><td>stackoverflow.com/questions/4584756/how-can-i-make-the-datagridviewtextboxcolumn-wrap-to-a-new-line-if-its-text-is-t</td></tr>
</table>
I set the width and overflow style on the td element and still no help. Any other ideas?
you can try this in css word-wrap:break-word (set a width too. This is CSS3 so might not work in older browsers)
check word wrap in css / js
This is what worked for me :
<td style='word-break:break-all'>
T1_C50621021900010788086700100001010000000072101000072_E107880867_R115710745_F20190221.pdf
</td>
The word-break:break-all literally breaks the long filename into pieces, each piece with same width except the last one, with an automatic width chosen by the browser (I guess you can experiment with a custom width).
In general, a browser will only wrap a text string at a space. So to get it to wrap, you'd have to insert spaces. In principle, you could check if the length is over some value and if so insert a space at a specified point, or add a space after every slash, or something like that. But if the field is updatable, you'd have to be sure to remove these spaces on input. And if the user is going to cut and paste this field, he'd get mysterious extra spaces.
Have you tried this selector property and value?
element
{
white-space: inherit;
}
<table><tr><td style="overflow-x: auto">your file name</td></tr></table>
This will wrap it in next line automatically
In a case like this, some browsers will not break the string at all by default, some will break after a hyphen “-”, some may also break after a slash “/”. If you really need to have a long filename in a table cell, you need to decide what you want—what would be the least of evils.
After the decision, use nobr markup to prevent line breaks and wbr markup to allow them, or their character-level or CSS counterparts (which work less widely). There are many nasty details involved; see my page on preventing and allowing line breaks.
Breaking after “-” is problematic because the reader won’t know whether the hyphen has been introduced in word hyphenation or is part of the filename itself. Then again, does this matter? What is the reader supposed to do with the long filename? In this case, the “filename” looks really like a URL without the “http://” part, and in such cases, it is better to use a descriptive link text (which may wrap freely) and put the URL where it belongs, an href attribute.
In the following example (from Mozilla's site):
<div style="color:darkred"> The color of this text is the same as the one of the line: <div style="background:currentcolor; height:1px"></div> Some more text. </div>
Please take a look at this corresponding jsfiddle link.
If I remove "background:currentColor" from the style, the line it draws disappears. How does a style like this result in the addition of a line?
Thanks.
Because the div has a height of one pixel (1px), which means it is presented as a line - namely because there is no content of x-pixels height within it, it sizes itself appropriately (if no height was specified then it would collapse to 0). Therefore, because the div has a background colour (which doesn't match the colour on which it is rendered (which, if the colours did match, would give the illusion of invisibility)) you see one pixel height line of that colour.
Think of crushing a box down, or folding paper: you couldn't make it entirely disappear (out of existence, or current form, at least not easily) and, upon bringing yourself horizontal to the plane on which it sat, would still see it (or its colour/shade of, etc.)
Of course, concentrating on only that one not a solution wouldn't be too helpful, although others have come to your aid: use a span element to 'group' text within text, these are inline by default and by rights should only be output if there is text to go in one - this forgets for a moment that you explicitly specify a height value at all, which is what makes me wonder about the whole scenario.
because Div is a block element.
<div style="color:darkred"> The color of this text is the same as the one of the line: <span style="background:currentcolor; height:1px"></span> Some more text. </div>