Some help with CSS please!
I was using CSS to make my register form looks nice, but then I find out that my form was not moved right or left with the other page elements such as my background image when I was maximizing or minimizing the window of the explorer (my page was aligned to center of explorer window). So i.e when my window size maximized my background image was changed, but the form remains in the first position. Any ideas how to fix this?
My HTMLcode is:
<div "class="homepageTable">
<form action="#" method="post">
<input type="text" size="25" name="first_name" placeholder="first name"><br/>
<input type="text" size="25" name="last_name" placeholder="last name"><br/>
<input type="text" size="25" name="email" placeholder="email"><br/>
<input type="text" size="25" name="retype_email" placeholder="re-type email"><br/>
<input type="text" size="25" name="password" placeholder="password"><br/>
<input type="text" size="25" name="retype_password2" placeholder="re-type password"><br/>
<input type="submit" name="submit" value="sing up!">
</form>
</div>
Any ideas what the CSS should be in order to have this form moved together with the other page elements when the window minimized or maximized?
We can't see your full code so we can only guess at what the rest of your page looks like.
You probably need to align the background and the form in the same way: Align your background image centrally, or align whatever element it is in to centre, if this is possible.
Alternatively, place the background in the same container element as the form, align that, and have them move together when the window changes.
Any ideas what the css should be in order to have this form moved
together with the other page elements
No, not unless you show us the other elements. But here’s how to center the form:
.homepageTable{margin: 0 auto;}
Related
I'm trying to get a css switch for checkboxes to work. An example can be found here:
https://www.w3schools.com/code/tryit.asp?filename=FWCNHR9N3EYO
The switch with two input elements inside the label element does not work on ie/edge. As this code is generated, I can't change this order of the elements. But there must be a css statement that ie/edge interprets different from other browsers.
This works on ie/edge:
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
This does not work in ie/edge:
<label class="switch">
<input type="hidden">
<input type="checkbox">
<span class="slider"></span>
</label>
How can I fix this?
Important: The order of the HTML elements cannot be changed as it automatically generated.
Thanks in advance!
Best regards
Roberto
Try to put input after span class like below may solve your issue.
<label class="switch">
<input type="checkbox" checked/>
<span class="slider"></span>
<input type="hidden">
</label>
By this way it is working in both IE and Edge.
You can make a test on your side that it is working as per your requirement or not.
I am seeing an issue when viewing a website in IE8 (but which works fine when using the emulation mode in dev tools in IE 11).
In modern browsers I see what I would expect:
But in IE, I see the following:
I've added the html5 shim and respond,.js as suggested in the docs, and I've tried wrapping the controls in divs to manually size them, but I end up with gaps between the inputs that look pretty bad. Is there something obvious that I'm doing wrong here?
<form class="form-horizontal" role="form" style="max-width: 500px">
...
<div class="form-group">
<label class="control-label col-sm-2">Phone</label>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="SearchMethod" value="2" class="radio-inline" />
</span>
<input type="text" id="phone" class="form-control" placeholder="Phone" />
<input type="text" id="phoneExt" class="form-control" maxlength="4" placeholder="Ext" />
</div>
</div>
Your input group is invalid since it has two text input form-controls. Per the docs:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
So you'll need to either hack together some custom styles, or restructure your form.
I want to resize jquery mobile form elements that I am using Phonegap in mobile App. Now I want to resize and give more height to form elements based on some number or percentage which will depend upon screen size. I know jquery Mobile handle width by itself but I want to give height via JS so that all form elements' height increase by that specific ratio/percentage.
I know that JQuery Mobile CSS can be changed but I want to change height using JS on runtime not setting CSS once. So what is best way to do this?
I actually want to get screen size and give size to all elements according to some percentage. While if I see at jQuery Mobile CSS then there are a lot of thing that I need to set, and still not sure if it will be set. So is there some way to do that without modifying or rewrite whole CSS? Or I just need to write custom CSS and form elements ?
Any suggestion and effort will be appreciated.
Here is a fiddle demonstrating this with input elements: http://jsfiddle.net/ezanker/akgEa/
In this example I have 3 inputs of type text and a button which doubles their height each time you click it. The button iterates through each input, gets its current height and then sets the height to 2 times current.
<div data-role="fieldcontain">
<label for="textinput-fc1">Text Input:</label>
<input type="text" name="textinput-fc1" id="textinput-fc1" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput-fc2">Text Input:</label>
<input type="text" name="textinput-fc2" id="textinput-fc2" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput-fc3">Text Input:</label>
<input type="text" name="textinput-fc3" id="textinput-fc3" placeholder="Text input" value="" />
</div>
<input id="btnSet" type="button" value="Set Heights" data-theme="a" />
$('#btnSet').on("click", function(e){
$("[type='text']").each(function( index ) {
var curH = $(this).height();
$(this).height(curH * 2);
});
});
NOTE: depending what type of form elements you are using, setting height will not work for all of them. I suggest you look in the inspector at the generated code for your form and see what is the best way o set the height for each element type.
I'm using jquery mobile for my project. It automatically converts all radio buttons in its inputs with its styles. The major problem is that in different situations i have different number of buttons (it depends on user) with its different width and i need it every time center.
<div data-role="fieldcontain" id="inline" >
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
{section name=i loop=$data['input'] start=0}
<input name="position" id="radio{$smarty.section.i.index}" value="{$data['input'][i]}" type="radio" />
<label for="radio{$smarty.section.i.index}">
{$data['input'][i]}
</label>
{/section}
</fieldset>
</div>
As you see each button has his size (for example Up and Zoom In are different). As i said before - i don't know what buttons will be for each users - it depends on their own settings, so i need somehow automatize process of centering it - is some ideas?
You could try it with <a> instead of <input> as done in the documentation, if at all possible in your situation.
I have the following form
<form id="enter_email" method="post" action="">
<input type="text" value="enter email" />
<input type="image" src="images/buttons/join-now.png" />
</form>
I was wondering if I can delete the value that shows on the text box by just css :focus alone,
thanks
No you have to use script for that.
<input id="txt1" type="text" value="test value" onfocus="this.value='';" />
There are ways in CSS to prepend/append content to a certain element, but nothing for modifying attribute values. But, if you really want to make use of CSS for this, you can have text as a background-image to that input and just change the background on :focus.
No, you cannot change data using CSS. You would have to use JavaScript and assign the value of the element to an empty string.