i have a select box with height: 60px. when i user clicks an option, i would want that option text to appear on the lower bottom of the select box...however safari and chrome automatically vertically aligns the text in the middle.
I have tried increasing line-height, padding-top, margin-top...but these do NOT work for safari/chrome.
please help, if this type of styling in "impossible" for safari/chrome. please let me know as well. Thanks in advance!
Unfortunately you can't style select elements generated by Safari and Chrome. What you're dealing with has been coined Shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
Essentially the browser creates elements that all of the select box to function as the page is being rendered, but these elements can't be styled by CSS.
I would recommend using a tool like Chosen: http://harvesthq.github.com/chosen/ if you're looking to do some heavy styling of select boxes. It uses javascript to place elements on top of the select box, replacing its functionality and allowing you to style it with CSS.
Related
I am creating a webpage that lists the employees of a company. Every employee is supposed to get its own box with text on the left and a picture of them on the right. In order to do so I have used a 'Text & Images' content element for each employee.
However, the options for image alignment do not allow me to place the image to the right of the text using text wrap (all options are no-wrap options). What would be the best way to ensure the pictures do end up to the right of the text?
This is an example of a picture that is right aligned with wrap.
Additionally I would also like the style the border of each 'Text & Images' content element. How would I go about this?
When using the "Text and Images" content element, you have the following options about the position of the images and text:
Above, center
Above, left
Above, right
Below, center
Below, left
Below, right
In text, right
In text, left
Beside text, right
Beside text, left
both "In text, right" and "In text, left" wrap the image with text, as on the following example picture:
If you have less options, there is some TSConfig that is limiting the number of options; that could be something like
TCEFORM.tt_content.imageorient.removeItems = 17,18
About the CSS, you have several ways to include yours; for example you can add your own file using page.includeCSS as documented here or you can overwrite the TypoScript included by the Fluid Styled Content with your own (see plugin.tx_frontend._CSS_DEFAULT_STYLE ) on the Template Analyzer.
To include the default CSS, you have to include the Static TypoScript Fluid Content Elements CSS (optional) (fluid_styled_content) in your template, like on this picture:
Also, I would use an inspector to be sure that the CSS has not been accidentally overridden.
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 was having the same problem as this question:
jQuery Mobile 1.1.1 Custom Select Menu - Placeholder Text not Visible
The above question solved my problem by telling me to use 'http://code.jquery.com/mobile/latest/jquery.mobile.min.js'. That solved my original problem but caused another.
The select menu is always displayed and doesn't center on the select item like it did before.
After:
Does anyone know how to fix this. I think I might be able to hide and show the menu if that was the only problem that I was having, but even when selected it is not in the right position. It should be centered over the select element both horizontally and vertically (if given enough vertical space).
This is caused by the latest release of JQuery, but I also can't download 1.1.1 because it causes the original problem that I had which was solved in the other question.
Looks like the menu is displaying relative to the rest of the content - Try adding a css line on there
position:absolute;
on the menu structure - Another good way to test this would be to load up your site in google chrome and use firebug to see why the menu is positioning lower than the "click point." Just on glance it appears that the menu is appearing relative.
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.
I'm working on a website template and Internet Explorer is giving me a headache since I'm unable to display the search form field and button correctly. z-index in CSS is not doing much either.
By the way, how can I move the input area after the loupe icon?
Check the website here:
http://gabrielmeono.com/yonature/
Chrome:
In IE8:
Three things:
IE8 does not support border-radius, which is being applied to that field.
Your CSS references a file that's missing, border-radius.htc which is for adding rounded corners in "all major browsers other than IE."
You should be able to add a left padding value on the field to force the text further to the right. It may be safer to make a white, rounded container and position the search button and text field within it.
Edit: I was wrong; the border-radius (curved-corner) file should work for IE6-8.