I am not that advanced on CSS so I wanted to ask someone before reporting this as a problem.
I am using the latest (v2.0.3) bootstrap Hero example to show this issue. When I create a single_long_word of text greater than about 1/2 the column size (due to a large font or simply a large number of characters in a single word), the text is allowed to go outside of its column before the layout adjusts when I re-size the browser window to make it smaller.
All I had to do was change the text in the column to make a large or long word and then reduce the window size of the browser. It does eventually re-layout the columns to allow for more width, but not before the long word exceeds the boundary of the column it is in.
This happens for both normal and fluid containers in with a responsive grid.
It is easy to duplicate in Chrome by just going to this page and editing the text after inspecting a column element.
http://twitter.github.com/bootstrap/examples/hero.html
I could not post an image since I am too new to stackoverflow
Related
We designed a web interface to display text in a scrollable element and to track scrolling events when someone scrolls to read the text. We set the textual display features using CSS. Now we have a record of what text was displayed, and a record of what the window size was (or sized if the user re-sized the window at some point). All events are timestamped. We want to develop a record of how long each portion of the text was displayed to the user as they navigated by scrolling. I thought there would be many examples of code to do this, but I don't find anything.
So, can someone refer me to a resource of how I might be able to calculate based on the font size, line width/height settings, and display size of a scrollable text window, how to determine which range of the text was displayed given a certain scrolling indicator?
Many thanks for any leads.
I have a tr with td's containing inputs. I'm not applying any size attribute or style with regard to width.
Some inputs contain just single digits and some contain words. The ones containing single digits have much extra white space and the ones containing words contain far less.
When I resize the page containing the table, the table shrinks to keep fitting 100% of the page. But, all the inputs seem to basically resize at about the same rate with no regard for which input has the most space to give up. By space, I mean the empty area in the input that does not show any data; the extra space to the right (as my inputs are left aligned).
Is there a css property that would apply to this situation to help accomplish reducing the size of the inputs which have the most white space to give up first and putting off truncating visible text as long as possible?
You could try auto sizing the inputs using a script like this:
https://stackoverflow.com/a/931695/288568
Anyways, the script is not for drop downs so far, but could be adapted.
But: If in the first line there is a 1 and in the second a 11 then the inputs would have different sizes.
Context for this question
We have a web page that has two scrolling grids, not paginated grids. When the first grid is nearly empty, occasional users do not realize they can scroll down to see the second grid. Other layouts (tabs, etc. are not a desirable solution).
Aside. The entire page layout is due for an overhaul, but on the Development schedule it's still 2 years away. Today, we cannot remove the grids, and we cannot change the general layout of this page.
When the first grid contains very little content, it would be good to auto-shorten the first grid so that the second grid peeks up above the fold. But when the first grid has lots of content, it's better if the first grid remains at its default height, because this grid is where the main interaction takes place, and we don't want excessive scrolling.
The challenge is that, in the grids, each row varies in height to fit its content. Sometimes a row is 2 lines of text, sometimes 12 lines of text. This causes a hard-coded height based on the number or rows inappropriate.
The question
What methods are there to assess the height of the row content in the first grid so that, if the total is less than the default grid height, we can shorten the grid? Or is there another way to look at this problem?
I'm trying to make my UI content expand nicely when the user resizes the window. I'm doing this in Qt Designer and learning about layouts and size policies.
Seems that everything is working fine for now: one layout stays within its maximum size, while another expands with the window resize, and they all stay above their minimum sizes. That's great and all, but the problem is that if I have a list with a lot of items, or if I am displaying a very large image, it will expand beyond the available window space and cause the window to be huge.
How can I specify something along the lines of "do not expand beyond the available window space"? I've played around with the size policies, but I couldn't get it to work. Is this something I need to set for the form itself rather than the layouts it contains?
I should specify this is the desired behavior: Display the widget as large as the available window, even if the widget content is too small. Expand/Shrink the widget to fill the window when the window is resized. Do not expand beyond the available window space. The widgets in question are 2 images (labels) and 1 list view.
I set the size policy to "ignored" for the respective widgets. That fixed it.
Or you can set the window maximum size.
I am designing a page to Add/Edit users - I used a repeater control and a table to display users. In users view the individual columns of the table row have labels to display a record values and when users click on edit button, the labels are hidden and text boxes are displayed for users to edit values - The problem is - as soon as the text boxes are visible, the table size increases - the row height and cells size becomes large. Is there a way to display the text boxes so that they take the same size as the labels
Dealing with tables, the question is: can your labels span on multiple text rows (ie: can you have long texts)? If yes, you may encounter layout problems any way. If no, a simple approach can be creating a CSS Class:
.CellContent { display:block; width: ...; height: ...; }
with your preferred cell width/height. Just stay a bit "large" with your height.
Assign the class to both your label and textbox, and you should not get width/height changes when switching control (thanks to the display:block property).
Again, if you have long texts, you will still encounter issues, and may want to use multilines. In that case, I would suggest ignoring height problems: just set the width to be consistent, and always show a 3-4 lines textbox for editing. Users will not be bothered to see a row height change, if they are ready to type long texts.
I'd use JS+CSS... You'll have to get your hands dirty for this one though. Visual Studio isn't going to help you much.
Here's how I'd do it:
Get the <td> clientWidth and clientHeight.
Set the <td>'s width and height to those px values (so they're no longer relative)
Swap the text for the input
In your CSS, make sure the input has no padding/margin/border and set width:100%, line-height:1em, and height:1em
When you switch back, make sure you un-set the <td> width and height so they return to automatic values.
You'll need to tweak this all slightly. I'm sure you'll have to play around with the padding on the <td> and perhaps set overflow:hidden but you should be able to do what you want.