I have a select menu on a responsive page, which is set with a fluid width (% value). Everything looks fine until i decrease the page size, when the default value of the select menu (i.e when it's not focussed or clicked on) becomes squashed in the container and overflows, causing part of the text to be hidden, like this. Ideally, this needs to be solved.
I was thinking of incoporarting a line-break, using CSS/Javascript whenever the text overflows. However, I can not think of an appropriate CSS property or JS method to do this on a select element. Does anyone have experience with this or know how to solve it? You don't need to use my suggestion, feel free to come up with something else. The main thing is the text needs to be shown in it's entirety all the time on any screen size.
I have a jsfiddle link here, which uses CSS animations to simulate the page size decreasing.
Related
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
I've been searching around (both on SO and around the web) to try to figure out how I can get the current height of the editor after the user has resized it. The TinyMCE 4.x docs don't show any kind of resizing event. When searching around I did come across the ResizeEditor event but that seems to apply only when objects within the editor are resized (which makes it seem like a poorly named event). Despite that, I tried to listen to the ResizeEditor event just to see and it does appear to fire whenever I resize the editor (though, I'm unsure if that's because the actual editor is resizing or because elements within the editor are getting resized, too. In any case, only the event object is passed in as an argument to the listener and I don't see any way to get the editor's current height (after the resize) from that event.
So, is there a way I can do this? To listen to the editor being resized and get its height?
thnx,
Christoph
You should be able to get the entire height of the editor (Menus, Toolbars, StatusBar, content area, etc) with code like this:
tinyMCE.activeEditor.getContainer().clientHeight
tinyMCE.activeEditor.getContainer().clientWidth
When you call tinyMCE.activeEditor.getContainer() you are getting the outermost div that contains all that makes up TinyMCE. From there it is just standard JavaScript to get the relevant dimensions of that element.
Here is an example: http://fiddle.tinymce.com/qigaab/18
I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.
I need a CodeMirror editor which starts with a certain width and then grows automatically to the right to match the maximum line length. I.e. roughly what CodeMirror does when height is set to auto, but with width.
Here's a self-contained example. The editor grows automatically along the y-axis fine, but not along the x-axis. By tweaking the CSS, I can either have a fixed width editor with a scrollbar, or one which fills the entire width of the browser, but not one which grows as you type. I assume overflow-x is relevant, but I don't understand how it interacts with other CSS size properties set on parent elements. I also tried setting that property on CodeMirror-scroll, but it didn't help.
I believe this can be done using CSS properties alone. In fact I have this behaviour in my application already, but growing to the left, rather than the right, but I don't understand why it happens, or how to reproduce it in a small example.
This question is essentially the same, but for the vertical scrollbar.
Simply add float:left to the CodeMirror div.
<div id="here" style="float:left"></div>
This is not something CodeMirror supports. You may be able to get something working by setting .CodeMirror's width to (-webkit-)fit-content, but there will likely be corner cases where this breaks the scrollbars or cursor placement.
I have a combo box that when I open it should show text like
However I get something like
with the scrollbar set to middle. Thing is sometimes for the same values it shows properly
and sometimes it shows from middle(for same value).
I want it to show properly like in the first image and I've tried a couple of things but with no succes.
itemSection.setHoverAlign(Alignment.LEFT);
itemSection.setTextAlign(Alignment.LEFT);
itemSection.setAlign(Alignment.LEFT);
... and other irelevand stuff ...
Any help is highly appreciated. Thanks alot!
If I am not getting wrong, You want to set your scrollbar at particular position. FOr that you need to ovverride the css of that and try to set scrollbar position to 0. So that your problem will get solved.
The problem with any kind of selections box is, that the boxes display and behave completely different across browsers. The older the browser the worse it handles long texts in selection boxes (some just truncate the text). I suggest to keep the displayed text as short as possible. That way you can avoid this problem.
If you really need long description, you can try to add a tooltip to every entry. Or use a different widget to make the select from, e.g. some custom widget in a separate dialog...