Using an HTML select in form - html

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;}

Related

How can I target first iframe to fifth iframe using css?

I am working on css, for me code is getting dynamically so I putting a screen shot for your reference
Now can you please tell me how to apply display block form first iframe, to fifth iframe using nth child, I tried it but it's not working.
If you have any questions please let me know.
Here's my solution:
#wrapper iframe:nth-child(-n+5) {
display: block;
}
Then keep the first 5 iframe in a div with class name="display-block" , then in CSS:
.display-block iframe{
display:block;
}
Give id 'display-block' from 1st to 5th iframe and then add css-
#display-block{
display:block;
}

How can I modify the md-input-container in angularJS

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;
}

How to insert a line break <br> after every <a> tag?

I want to insert a line break <br> after every <a> tag using CSS. I tried
a {
display:inline;
}
a:after {
content:"\a";
white-space: pre;
}
but it does not work, I tested it in Chrome?
My Question
How to insert a line break <br> after every <a> using CSS?
Make it a block level element, perhaps?
a { display: block; }
Fiddle here.
You can't do this with CSS - that isn't what it was intended for.
You can use Javascript to do this.
That is obvious that you can not define content by using css. You can use simple Jquery $("a").after("html here");

CSS: Overflow:hidden removing border-bottom?

I am making a HTML page, and have attempted to set a <a> tag a border-bottom.
It would not show, whatever I did. So I made a reduced test case that can be seen here:
http://codepen.io/hwg/pen/ILKdx
Happens in FF beta, and Chrome 22.
If I remove the overflow:hidden; or change it to overflow:visible, it works. The problem is that I need to have that set.
So how can I have a border-bottom? (or is it me :) )
(I cannot use text-underline, want it dotted)
Thanks
Harley
display:inline-block; on the link seems to do the trick.
Add 1px of padding on the top and bottom of the grid:
.grid{overflow:hidden; padding: 1px 0px;}
OR
Make the grid element inline:
.grid{overflow:hidden; display: inline;}
There's probably a hundred different ways of solving this really.
try increasing the line-height. eg. add line-height:200%; to the #test css
In my case any solutions didn't work for me.
I solved the problem by add blank div after last trouble-making div.
In my case, I had to add this to my element:
display: table;
width: 95%;

images and form problems in a div

I have a div in the size of 900x30
I have a form in this div, but when I try to put an image after the < / form > (the image is still inside the same div as the form), I see the image on a new line.
How can i prevnt it and make the image show in the same line as the form ?
im using CSS btw...
thanks
You might try white-space: nowrap;
You probably need to float the image to the left or right:
.myDiv img {
float: right;
}
If you post your markup it'll be easier for someone to give a more accurate answer :)
Have you tried setting the display attribute of both form and image to 'inline', just in case it's doing a block display?