I am working on designing a form with angularJS. I am facing this issue from a long time. Whenever I use a text field (md-input-container) and drop down (md-select), this causes a height difference.
When I inspect the code, I find out that the md-input-container has an extra md-error div tag.
I want to get rid of this div tag <div class="md-errors-spacer"></div>. Any suggestion?
Thank you
You could do something like .hide-validation-error .md-errors-spacer { display: none; }, and then you would just need to add the class hide-validation-error to any of the <md-input-container>'s that you know won't need validation.
use this css:
md-input-container:not(.md-input-invalid) .md-errors-spacer {
display: none;
}
Related
I have a problem I try to hide date comment on my blog but didn't work can someone help please
Can you post a piece of code of what you tried ?
Because hiding and showing HTML elements is not a very hard thing to do, so it could be the placing of the hide/show statement or it could be the syntax.
It is difficult to tell what is happening without seeing the code.
On Blogger. To hide data comment you need to target the element .datetime
Because there is already a display attribute specified to .datetime.secondary-text in your snipped code, You can change this attribute from display: inline-block to display: none or use the following CSS rule to override the existing one.
.comment .datetime.secondary-text { display: none }
I am using Google Charts column charts.
Here in the if you observe Server Calculation Time value got breaked to next line.
As of requirement it should be in same line.
Please help me possible solutions
set chart option tooltip to ensure html tooltips are shown
tooltip: {
isHtml: true
}
then you can override the tooltip class,
use following css to prevent wrapping...
.google-visualization-tooltip-item {
white-space: nowrap;
}
Try adding some CSS properties on this class .google-visualization-tooltip:
.google-visualization-tooltip { width:300px; background-color: red; }
As shown in this example: https://jsfiddle.net/zrmwtj3z/
The best solution is not to increase the width of the tooltip manually. Instead, in the HTML for your tooltip, wrap the whole thing in a div element. Use the CSS style white-space: nowrap; to force it to stay on the same line. I also like to add margin: 1em; in order to make it look a little bit nicer.
For some reason I cannot get the Select option to go inline with the choose file, inside the share-actions-left div. What am I doing wrong?
http://jsfiddle.net/Ey9vA/
Thanks
I believe what you're looking to to would be handled by making the elements inline block similar to what #Daniil is saying. To get your code to work as is add this
#share-actions-left *{
display:inline-block;
}
#share-action should be inline block
#share-action {
display: inline-block;
}
Add the following CSS to get the select on the same line as the upload button:
#share-action{float: left;}
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
I would like to know if it's possible to keep another element open upon clicking span or link. Here is an example of what I am trying to do, if you click on the + sign, the form display, but soon as i get off the span, the form goes away. http://jsfiddle.net/robx/68jmY/
I know it's possible with the help of JQuery, but is it possible to do without any javascript?
Demo: http://jsfiddle.net/68jmY/3/
Something along these lines could work. Here is what I changed...
<span id="expand">+</span>
...
#contact:target { display: block; }
#expand a { text-decoration: none; }
Try the :target pseudo-class: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-a-click-event-with-css/