I was trying to style my form with Materialize CSS and there's something a little awkward with the data-success and data-error attributes: the words in the attribute appear to display in a vertical column, instead of displaying horizontally underneath the input field line. Here's a JS fiddle example: http://jsfiddle.net/8zgvyakn/1/. In a somewhat crowded form where such a lengthy error attribute may be necessary, the red text overlaps with other form fields. Is there any way around this, or is this a MaterializeCSS limitation?
The error text is an after of the label edit the width of the label to 100% and that should make the after 100% aswell.
Related
I want to have a page which has two main components. On the upper half a textarea on the lower half some input fields. The split should be 50:50. The problem I'm facing:
I cannot tell the textarea to fill the complete height when displayed. I know I can use some cdk..MinRows or ...MaxRows but therefore I need to know the whole height before. Additionally the underline looks also quite strange, e.g.
How to fix it? Does it work with Material or should I use plain HTML textarea? My project
Been using Slider Revolution on WordPress recently for a new client and having one big issue that I cannot find an answer to.
SITUATION
- I have 2 text elements, a Title text element and a Description text element (one above the other - vertically stacked)
- They have been manually placed to be aligned-left inside the slider area.
- I have them with a fixed width so they only cover the left side of the slider panel
- I have them set for auto-wrap so words do not get cut off and the test will drop to another line if needed.
PROBLEM
With this configuration, if the Title text element is too long (too many words) it will dynamically expand vertically (drop down lines) and cover up or overlap the description text element box below it.
SOLUTION
I would like to find a way to "link" or "hook" these 2 elements together (stacked one on top of the other with little space) so they do not overlap and the top element will automatically push down the 2nd text element box. Is it an html issue? a z-index issue? a placement process issue?
In the image I provided, you can see the difference between a 1, 2 & 3 line TITLE, and how the space between them is fixed. HOW DO I GET IT TO BE DYNAMIC? I apologize if this has been answered before, but I have searched for hours and cannot find an answer. Maybe I am searching with the wrong keywords.
slider-revolution-examples
This is a common situation with Revolution Slider when we use different text elements since they will be different layers and used with position:absolute.
The best solution for this is to merge all the text elements inside one element using basic HTML and style them as needed inside this element. Like this we only have one element used with position:absolute and inside it we have well formed HTML.
I am trying to add a tooltip to my cells. Using the title attribute works, but the style is different from the rest of the page (bootstrap styling) http://i.stack.imgur.com/PQMmj.png
Changing the title attribute to tooltip doesn't work - it looks like it hides the tooltip under the next cell (changing the coordination of the tooltip to something within the range of the cell, made it partially visible).
(I am new so I cant post images, https://github.com/angular-ui/ng-grid/issues/800 )
Any idea whats wrong?
Thank you.
I am trying to display my form labels above the form element, so I am using display:block in my CSS. However, I am not able to show more than 1 form element per line this way.
How can I update my CSS properly to show my labels above the form element, but be able to show more than one element per line? See this example:
http://jsfiddle.net/Mhu76/1/
Put divs around each group of span and input, and make those divs display:inline-block;.
I tried it here: http://jsfiddle.net/Mhu76/4/
Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.