In the question https://stackoverflow.com/questions/33907611/controlling-line-spacing-with-br-firefox-rendering-differences-with-html4-doc, I wanted to show the boxes of HTML elements, as that would have clarified the problem best. Unfortunately, I couldn't find a way to select multiple elements when using the Firefox inspector, so I had to select each element individually, take a screenshot, and then combine the screenshots into an animated gif like this:
... which is a rather tedious and time-consuming job.
Is there a way to do a multiple selection - either from the main browser window, or from the HTML tree in the inspector in the bottom - such that the element boxes of the selected elements are all indicated/shown simultaneously? I tried Ctrl+click-ing, that doesn't work...
Alternatively, is there another addon/browser/tool that can do this (maybe Chrome?)
In going through the latest release of Google Developers' EDIT THE DOM section for Chrome, there is no mention of the ability to select multiple elements. This suggests the feature doesn't exist.
A similar question came to the same conclusion, albeit the link reference wasn't much help.
Thinking about it logically, however, there's really no way such a feature could reasonably work: Once an element is highlighted, dev tools (or Inspector) populates the right panel with the element's styles, computed values, event listeners, and other unique data. How could dev tools do this for two or more elements at a time? Maybe it's technically possible, but the appearance would be messy, cluttered and potentially confusing.
Related
Is there a way to force inspect element via Chrome to ignore a certain element?
I've often had a need to put an overlay over the entire site (say for development purposes) and the only problem is my development workflow suffering due to "inspect element" always targeting that top level element.
I guess another way to ask this question is, how do I place an overlay (site PSD) over a live site, without it affecting my inspector workflow?
Thanks for any suggestions!
I just tried :before, which allows text selection / doesn't appear in the inspector, but it's still caught.
Was just looking at my old answers, and not sure if it's just new chrome behavior or what, but Chrome's inspect element respects pointer-events: none;
I imagine you're talking about using the right-click option to inspect element or the magnify glass to select an object on the page. I don't think there is a way to prevent it from working that way without a little work on your part.
You could have a button that turns on and off that overlay locally for you (or a JS snippet that you can run in the console to delete the overlay).
You could select the overlay and then in the inspect element portion of the tools right-click the object and delete the node (as long as it isn't the parent of all the other content). Then you can select the object on the page.
Or you can just inspect the element (the top one) and then drill down in the DOM tree in the inspect element tab of Chrome to your element. One nice thing though, if you do it this way when you refresh it should take you back to that element in the inspect element tab (unless it's really complex with iFrames loading on the page, in which case it won't do that).
I've a CSS dropdown menu containing a select box that extends beyond the menu's
bottom border when opened. Subsequent clicking on a select option that lies beyond
the menu's bottom border causes the menu to close (i.e., ":hover" no longer applies
once the select closes).
Is there a way around this? It'd be great if I could force the select to "drop up",
but I've not found a way to force this to happen.
Any ideas?
One solution would involve limiting the height of the select, so that it doesn't jut out, or making it always drop-up. This answer discusses those options a bit.
Selects aren't typical HTML elements. We're pretty restricted in styling them, and I'm not entirely sure how much control we'll have even when the the shadow DOM is more widely accessible (I've been meaning to test!). The reason of my uncertainty is that it seems that some browsers, like Safari and Chrome, appear to use OS APIs for their selects, whereas other browsers, like Firefox, clearly use the Shadow DOM.
With all of this said, I think the easiest solution for you would be using a Javascript select plugin to completely get around this issue of modifying the select itself.
The idea of using Javascript is pretty simple. You'll hide the actual select and insert new DOM elements (like divs) to replace it. These divs can be styled to look like a select, and programmed to behave as you'd prefer the select to. And any changes to this facade are applied to the real, hidden select, so that forms can be submitted and manipulated as usual.
Bootplus is just one example of a plugin that has a drop-up. It'd be fairly easy to pull that component from the code.
Chosen is another good plugin that I'm pretty sure lets you limit the size of the dropdown as another alternative.
Or you could run some Google searches and find more!
In short: The current best option for cross-browser control over how a select displays and behaves is using a Javascript plugin.
I've recently found that most of the measurements I thought I knew were actually different from what I thought they where due to browser specific defaults. I assessed that all my knowledge of my visual inspections were relative...item A is 20px so I can see that Item B is 22px. However because of browser hidden defaults...this method doesn't work too well. How can I know what absolute pixel count is.
Currently, I just created a 20px by 20px ruler in a graphics editor with tick marks.
Attached here
Now I can move this around by using absolute positioning and measure things. However is there something built into the development tools to do this. I'm using Firefox 10 right now.
Thanks
Chrome's inspector tool shows the dimension of any element that you happen to hover over. However, if you must remain loyal to Firefox, Firebug can show the exact dimensions of any element upon hover as well. When you open up Firebug, click "Layout" in the sidebar to the right. Then, when you hover over an element, the dimensions will appear within that box (no clicking necessary). Not exactly as intuitive as Chrome's inspector tool, but it works regardless.
Are you just looking for a tool to easily measure heights and widths without messing around in Firebug?
I'd suggest this add-on for Firefox (also available for Chrome): Web Developer
If this isn't what you're looking for, can you please clarify?
Edit: If you can't install software or add-ons, use the no-install Firebug Lite
there is a sweet measurement tool called "measure it." you can find it HERE. that's the best one i have found so far.
another thought... you could check and make sure all of your different browsers aren't at all zoomed in... view actual size etc...
also - are you using a "reset" of any kind ? if not - you could check out the meyer reset - or normalize... or - the freak reset... (that combines both).
When you touch an element, such as an edit box, in a web page on the iPad, it turns gray while you are touching it.
I have a table wrapped by a floating div. Instead of an individual data element or row going gray, the whole table (or its wrapping div) goes gray when a data element is touched. (The function of this table is an autocomplete pop-up)
Elsewhere in the site, I have a table in which only the touched data element goes gray.
I wondered if anyone could direct me to an explanation of the logic behind this graying on touch, so that we can code our table to give the desired behavior. Ideally, we'd like the row to highlight when it is touched.
In the alternative, if we could turn off this graying behaviour, that would be another option. We could then code the highlighting ourselves. Is there a way to turn off this behavior for particular html elements?
Thanks.
This author suggests a solution to remove the highlighting:
If for whatever reason you don't want some elements of your web site or application to be highlighted, simply add the following CSS rule to the corresponding elements.
-webkit-tap-highlight-color: rgba(0,0,0,0);
It won't disable the highlighting, but it will make it invisible (an opacity of zero).
I have not tested this, however.
I have discovered something about the "logic" behind the graying behavior. It seems that elements that have handlers such as onclick, onmousedown etc. exhibit the behavior and those without such handlers don't. A (somewhat tedious) workaround for us is to change the code of the autocomplete so that each row has its own onmousedown etc. handler rather than the wrapping div taking care of this.
Try styling the wrapper div with select:none;
That should turn it off, and then you could code the highlight onfocus yourself.
Most browsers actually do this, but it's a bit more noticeable on the iPad and other Apple touch products. It's really for usability purposes, so I would only recommend disabling it if it is causing problems like the one you mentioned. It serves to help the user know what they are clicking, and gives them a chance to move their finger away if they are on the wrong thing.
I need to create a dropdown, which can contain 100s of options.
I need a scrollbar to appear and be consistent across all browsers.
Google came up empty: Is there a good URL that describes if this is consistent or not?
I would strongly recommend against having a scrollable select with 100s of options for usability reasons.
With exception of one corner case, navigating (both searching in, and selecting from) that list is a really really hard and very annoying to the user.
The UI design reasoning is that it requires:
Wide mouse gesture (tiring), followed by immediate precise stop (hard to do because of inertia)
Very difficult to use interface of a scrollbar (extra crap points for scrollbar being in the middle of the page instead of on the right side) - see Jacob Nielsen's and others' usual ranting about difficulties of using scrollbars and general evil of anything too long that requires much scrolling.
Eyes need to scan whole page worth of menu up and down and back, all the time. very tiring.
Here is a set of bad examples
[ the corner case is when all the option names are uniformly distributed across the alphabet (as far as the first letter), which allows somewhat-possible keyboard-only navigation in the drop-down via pressing the first letter of an option ].
A proper UI solution is to have a select whose contents are dynamically populated based on a search field - either typed text (think Google's new search box, or browser's address bar) or sometimes checkboxes/radio buttons.
BTW, sub-menu solutions also suck for mouse navigation - minor twitch of the wrist and you lost all of the pointing work.
I apologize that this answer is not an answer to "how do you solve my technical problem", but I am of a very strong opinin that you're solving the wrong problem in the first place.
HTH.
The short answer is no, for the standard HTML select element and the requirements you describe.
However, do you know you can set the size attribute for how many rows are visible at one time? AFAIK this will force scrolling in all browsers, but it isn't a drop down. Like this:
<select size="10">
<option>etc</option>
...
</select>
There is also the possiblity of optgroup to split the options into categories.
If you have many categories you could do what I did on one site and use this jQuery click menu, using the click function to set a hidden field. So now I have a dropdown with sub-categories and it's quite easy to find the right option.