HTML: How to change the width of input field based on container size
Tags: jquery,html,css,asp.net
Problem :
I have one Asp.net form in that I have two took Containers. In one container I have inserted some paragraph values and in other container i have put Registration page element.
No my registration page has labels and textfields. I want to align textfield to right of the label when page width is greater than 1024 and if page size is less than 1024 then i want that text field below to the label.
How to make change in css for that. Please help to resolve this. I am uploading the image so that you can better understand me.
Here you can see when I open my website to my mobile it shows me like this. I just want to set Input Field below the Labels when screen size is less than 1024.
Thanks.
Solution :
You can use @media to adjust to different screen widths:
@media (min-width:1025px){
input{
display:inline-block;
}
}
@media (max-width:1024px){
input{
display:block;
}
}
<label for="name">Name:</label><input type="text" name="name"/>
JSFiddle Demo (Resize result pane)
CSS Howto..
This is working, but you are missing the point (.) in front of the two on CSS. See the following snippet: .one { font-family: 'Montserrat'; font-size: 11px; font-weight: 700; }...
What you put in your link is the name of your folder.You should put the name of the file instead(font-awesome) On the font-awesome folder look for the file called font-awesome,copy...
Try to add this: .sf-navbar ul ul ul { left: 100%; top: 0; } ...
To only way to override inline style is by using !important keyword beside the CSS rule. Following is an example of it. div { color: blue !important; /* Adding !important...
try using max-width:100px; or max-height:100px; This will let your column expand maximum upto the width you set....
Friend, it is 10px not 10 for the padding value. <li style="padding: 10;">123</li> should be <li style="padding: 10px;">123</li> Cheers,...
try this: HTMLEditorKit kit = new HTMLEditorKit(); StyleSheet styleSheet = kit.getStyleSheet(); styleSheet.addRule("a:hover{color:red;}"); Document doc = kit.createDefaultDocument(); String htmlString = "<a href='stackoverflow.com'>Go to StackOverflow!</a>"; // your JEditorPane jEditorPane.setDocument(doc);...
Separate the selectors with a comma: .footer #one .flag li .drop_down form div, .footer #two .flag li .drop_down form div { /* Rules */ } From the selectors level 3...
Your css display none is correct but I think you should change: if ($(this) == 'menu-btn-a') { To: if ($(this).attr('id') == ''menu-btn-a') { Or you can solve this entirely in...
So, you need to use jQuerys .css() style manipulation in order to set the style of the element that is intended to be animated. This is done first. After that,...
You can set fixed width on #line1 and add white-space: nowrap and overflow-x: auto #container { display: inline-block; } #line1 { background: lightblue; width: 70px; white-space: nowrap; overflow-x: auto; }...
The id-selector(#myDiv) class gets more priority than the class-selector(.fade-in) in css. So the opacity property in the #myDiv gets more priority when your div has both the classes added. Just...
Something like this would work: EXAMPLE HERE .pagination.pagination-sm + span { vertical-align:top; display:inline-block; margin:25px 0 25px 10px; } Make the adjacent span element inline-block, align it to the top and...
You can use a body class and then use CSS to manipulate only the class of body and then style everything based on your body class. <body class="my-skin"> <p>Lorem<p> </body>...
I don't see a better way than using the Web Inspector or Chrome DevTools Web Inspector The Web Inspector gives you quick and easy access to the richest set of...
Well, part of the key is to parameterize all of the required details - that is, don't hard-code things like the output container's id or that of the target image...
Check this one, DEMO http://jsfiddle.net/yeyene/VPZgV/2/ HTML <div class="day"> <span class="date">31</span> <div class="mth_yr"> <span class='month'>DEC</span> <span class='year'>2013</span> </div> </div> CSS .day{ float:left; padding:10px; background:#F0EAE9;...
You could use animate(), then .remove() after the animation. Check out the fiddle - http://jsfiddle.net/8gavv7n2/2/ $('div').click(function(){ $('div').animate({opacity: 0}, 500, function(){ $(this).remove() }); }); You'll need to include jQueryUI too....
Working jsFiddle: http://jsfiddle.net/gv2wne9o/1/ (applied to one of the two icons) Just setting a border-radius is not going to do it in this case. And you need to set left and...
You can put this CSS on #carousel_ul left: 50%; margin-left: -1200px; Just make sure it goes left to right. The only problem is if someone has a monitor wider than...
Using JQuery $('.elementClass').width($(window).width()-300); ...
<img id="headerlogo" /> Don't do that (an image tag with no src attribute) Put a div that will hold the space (set position:relative with width & height in css)...
From the looks of things, you are using the basic Web Application website which Visual Studio produces for you when creating a new project. Going on this assumption, you need...
try like this: Demo body{ animation: background-fade 10s infinite; } @keyframes background-fade { 0% { background:red; } 50% { background:blue; } 100% { background:green; } } You need to use...
There are a few mistakes with your HAML code. For starters you are creating an empty div. I am presuming that you want the div to work as a wrapper...
I agree with the above that you should give it a shot on your own, but since I'm in a good mood I got you started with the sliding panels...
The main problem here is the usage of the border-collapse: collapse; style. To solve that you could try one of the following solutions: Solution 1: You could try adding a...
For changing all elements with the class name var elements = document.getElementsByClassName("a"); for (var i = 0; i < elements.length; i++) { elements[i].style.backgroundColor="blue"; } Or to change a single element,...
Your code is good, but your scope is bad. Instead of this inside the function, you need to use house: function function1() { var house = document.getElementById("house"); if (house.className ==...
Add a span in the page where you want the buttons to be <span id='slideselector'></span> in the ready function, add an index attribute to each .imgLike div and a corresponding...