Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to display four checkbox as following
A B
C D
There should be two in each line?
Can anyone suggest what would be right css for this? They need to be inside or combination of Div
If this is just a fixed file and doesn't need to be content-managed, I'd use columns for ease of use. If it needs to be content-managed and the content is likely to change then I'd go for dealing with rows.
http://jsfiddle.net/FUJMS/5/
HTML:
<html>
<div class="column one">
<div class="box A"></div>
<div class="box C"></div>
</div>
<div class="column two">
<div class="box B"></div>
<div class="box D"></div>
</div>
</html>
CSS:
div.column {
width:50%;
}
div.column.one {
float:left;
}
div.column.two {
float:right;
}
div.box {
width:40px;
height:40px;
}
<style>
.item {white-space: nowrap;display:inline; }
</style>
<fieldset>
<div class="item">
<input type="checkbox" id="a">
<label for="a">a</label>
</div>
<div class="item">
<input type="checkbox" id="b">
<label for="b">b</label>
</div>
<br/> //link break or anything you like
<div class="item">
<input type="checkbox" id="c">
<label for="c">c</label>
</div>
<div class="item">
<input type="checkbox" id="c">
<label for="c">D</label>
</div>
</fieldset>
This should work for you with slight minor changes if you feel.
Thanks.
One of possible solutions is to put the checkbox inside the label tag
<label for="cb1"><input id="cb1" name="cb1" type="checkbox" /> checkbox1 </label>
<label for="cb2"><input id="cb2" name="cb2" type="checkbox" /> checkbox2 </label>
<label for="cb3"><input id="cb3" name="cb3" type="checkbox" /> checkbox3 </label>
<label for="cb4"><input id="cb4" name="cb4" type="checkbox" /> checkbox4 </label>
and stylize it as follows
label {
display:block;
width:50%;
*width:49%; /*for IE7 only*/
float:left;
}
label[for="cb3"] {
clear:left;
}
Thanks to Liam for calling attention to this SO question: Should I put input tag inside label tag?.
Now the answer is compatible with screenreaders and IE7.
jsfiddle
Related
I am using : https://github.com/mccarlosen/laravel-mpdf/issues to generate pdf ,
all ok except when i use multi footer ,
now the footer show only on page 1 (MyFooter1) and 2 (MyFooter2).
I need to show staring page2 on all pages (MyFooter2) .I am finding the correct syntax , below my code
I used <sethtmlpagefooter name="MyFooter2" page="ON" value="1" write="true" /> to show the footer , it show only the footer only on the page where it exist .
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
#include('pdf.css2')
<body>
<htmlpagefooter name="MyFooter1" style="display:none">
<div class="print-footer">
<div class="footer-section-1" >
<div style="width:20% ; float:left; padding-right: 5px;">
My company name
</div>
<div style="width:20% ;float:left; padding-right: 5px;">
<div> <b>T</b><span> : +98 123 123</span></div>
<div> <b>T/F</b><span>: +98 123 123</span></div>
<div> <b>Email</b><span>: cdoom#cc.co</span></div>
</div>
<div style="width:35% ; float:left; padding-right: 5px;">
<div> <b>Head Office</b></div>
<div> <span>test test,</span> </div>
<div> <span>Road, test, </span></div>
<div> <span> USA</span></div>
<div> <span>P.O. Box 211265 </span></div>
</div>
<div style="width:11% ; float:left; padding-right: 5px;">
<div><b>Branches</b></div>
<div><span>B1</span></div>
<div><span>B2</span></div>
</div>
<div style=" float:left; padding-right: 20px;padding-top: 20px;">
WE ARE THE BEST
</div>
</div>
</div>
</htmlpagefooter>
<htmlpagefooter name="MyFooter2" style="display:none">
<div class="print-footer">
My company name
</div>
</htmlpagefooter>
<div class="page1" >
<div style=" text-align: center ;" >
<div class="logo">
#include('pdf.company logo')
</div>
<div class="title" >
<span class="span-title" > <b>INDIVIDUAL OFFER </b> </span>
<div class="div-name" ><span class="span-name" >client </span></div>
<div>
<div class="info" style="width:50% ;float:left; padding-right: 5px;">DATE: December 2, 2020</div>
<div class="info" style="float:right; padding-right: 5px;">REFERENCE NUMBER: vd 123 xl</div>
</div>
</div>
</div>
<div class="message">
<p >
Dear Ms. ,
</p>
<p>
We believe that the following offer is the first step to a long and happy relationship between us. </p>
<p>
Allow us to put your worries aside with our special programs.
</p>
<p>
Best Regards,
</p>
</div>
</div>
<sethtmlpagefooter name="MyFooter1" value="1" />
<div class="chapter2">
<div class="message">
<p >
Dear Ms. ,
</p>
<p>
We believe that the following offer is the first step to a long and happy relationship between us. </p>
<p>
Allow us to put your worries aside with our special programs.
</p>
<p>
Best Regards,
</p>
</div>
</div>
<sethtmlpagefooter name="MyFooter2" page="ON" value="1" write="true" />
<div class="chapter2">
<div class="message">
<p >
Dear Ms. ,
</p>
<p>
We believe that the following offer is the first step to a long and happy relationship between us. </p>
<p>
Allow us to put your worries aside with our special programs.
</p>
<p>
Best Regards,
</p>
</div>
</div>
<div class="chapter2">
<div class="message">
<p >
Dear Ms. ,
</p>
<p>
We believe that the following offer is the first step to a long and happy relationship between us. </p>
<p>
Allow us to put your worries aside with our special programs.
</p>
<p>
Best Regards,
</p>
</div>
</div>
<div class="chapter2">
<div class="message">
<p >
Dear Ms. ,
</p>
<p>
We believe that the following offer is the first step to a long and happy relationship between us. </p>
<p>
Allow us to put your worries aside with our special programs.
</p>
<p>
Best Regards,
</p>
</div>
</div>
</body>
</html>
in CSS , I used this :
#page {
footer: html_MyFooter2;
margin-bottom: 170px;
}
#page :first {
footer: html_MyFooter1;
}
and in HTML I removed :
<sethtmlpagefooter name="MyFooter1" value="1" />
<sethtmlpagefooter name="MyFooter2" value="1" />
This fix the issue and help me ,
refer to :
Mpdf different header for first page
3rd answer (by : Ningappa )
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am new to bootstrap and HTML and want to know how can I give same spacing between form label and the text field, throughout the form. I have attached code snippet as well as an output form.
[code for the form][1][ Form output][2]
You are doing good. You need to just group your elements. Here I am going to write HTML code.
<div class="col-lg-12 form-group">
<div class="col-lg-3 text-right">
<label class="">small</label>
</div>
<div class="col-lg-5">
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-12 form-group">
<div class="col-lg-3 text-right">
<label class="">long lebel text</label>
</div>
<div class="col-lg-5">
<input type="text" class="form-control">
</div>
</div>
You need to set your label box and text box separate and push the label to the extreme right. You can check here. Hope it will help you. :)
you can use a specific column indent for your label:
<div class="form-group form-inline">
<label class="col-md-2" for="exampleInputEmail1">Email address:</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group form-inline">
<label class="col-md-2" for="idForTextfield">A very long text for this label:</label>
<input type="text" class="form-control" id="idForTextfield" placeholder="your text">
</div>
also you can add some column indent for your text field so that it bounden with your limited space just add col-md-2 in the class for <input> tag.
Sample here Code sample.
Happy coding :)
I'm trying to use Wget to log in to my router and make a complete mirror of all the pages. The problem is, the router login page does not use the traditional "user" & "pass" ID for the text fields. It has a 'Password' and 'VmWpsPin' field. The ID for the 'Password' field is randomly generated every time the page is loaded/refreshed/requested. Below is the source code of the relevant part of the router page:
<body lang="en" class="superhubGUI" onload="javascript:Init()">
<div class="globalHeader">
<div id="nav">
<div id="logo">
<h1 id="header">Super Hub</h1>
</div>
<div id="buttons">Router Status
</div>
</div>
</div>
<div id="content">
<div id="container">
<div id="main">
<div class="panel noTitle" style="*padding:38px 30px 0px 30px">
<div id="login" class="inner">
<div class="inner-section">
<h2>Welcome to your Virgin Media Super Hub 2ac</h2>
<div id="signInForm">
<form action="/cgi-bin/VmLoginCgi" method="POST" name="signIn1" id="signIn">
<h2 id="loginTitle">Sign in to view and change your settings</h2>
<div class="field formField noHint username clearfix">
<label for="username"></label>
</div>
<div style="position:relative;top:-20px;" class="field formField noHint password clearfix">
<label for="password">Settings Password</label>
<input type="password" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="KsCAqiihZb" id="password" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>Password can be found on the base of your Super Hub</span>
</div>
</div>
<div style="position:relative;top:-25px;" class="field formField noHint password clearfix">
<label for="password">WPS PIN</label>
<input type="text" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="VmWpsPin" id="WpsPin" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>WPS PIN can be found on the base of your Super Hub</span>
</div>
</div>
<div>
Sign In
</div>
</form>
<p>
<span style="font-weight:bold;">Don't know your password?</span>
<br/>You'll find your default password on the bottom of your Super Hub.
</p>
</div>
</div>
</div><span class="pFoot"> </span>
</div>
</div>
My question is, how can I use Wget to login to the router when the ID changes at every request, is there somehow a way to request the page, parse the value out and then submit the form using something like --keep-session?
Or is there an alternative solution outside of Wget to automate the process? Any help is much appreciated.
and how can I trasmit data between popup and page that have called popup?
I would like to do a ajax form for user registration inside popup "reveal" in zurb foundation.
Do you think is possible?
This answer might be a little late, but you can absolutely put a form into the reveal popup. For instance, if you wanted a login dialog to show up when they click a login button:
At the bottom of your HTML (after all the rows), create the content for the popup:
<div id="login-modal" class="reveal-modal" style="width: 400px; background: black; color: white;">
<h2>Login</h2>
<form id="login-form" class="six">
<div class="row">
<label for="username">Username</label>
<input type="text" name="username" />
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div class="row">
<div class="right" style="margin-top: 20px;">
<button type="reset" class="button radius alert">Reset</button>
<button type="submit" class="button radius">Login</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Then you can display it using one of their methods. The new foundation 3.0 let you display it super easy like:
<a href="#"
data-reveal-id="login-modal"
data-animation="fadeAndPop"
data-animationspeed="300"
data-closeonbackgroundclick="true"
data-dismissmodalclass="close-reveal-modal">Login</a>
Hope that helps!
try this in app.js.
Then use reveal class on any anchor
$('a.reveal').click(function(event) {
event.preventDefault();
var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
$this = $(this);
$div.empty().html('<p align="center"><img src="application/public/loading.gif" /></p>').append('<a class="close-reveal-modal">×</a>').reveal();
$.get($this.attr('href'), function(data) {
return $div.empty().html(data).append('<a class="close-reveal-modal">×</a>').reveal();
});
});
I am using MVC3 and displaying my data in a webgrid. I would like to display loading indicator (loading image) displayed when I filter/search. What is the best approach?
My search filter (code):
#using (Html.BeginForm())
{
<fieldset id="fieldset1" class="coolfieldset">
<legend>Search for Towers Watson Subscribers/Contacts</legend>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Reg Date:</div>
<div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="#regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="#regDateEnd" name="regDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Profile Mod Date:</div>
<div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="#profileModDateFrom" name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="#profileModDateEnd" name="profileModDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Last Name:</div>
<div class="div-table-col"><input type="text" id="lastName" name="lastName" value="#lastName" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div>
<div class="div-table-col"></div>
</div>
</div>
</fieldset>
}
{#Html.Partial("List_Ajax", Model)}
http://www.ajaxload.info/ lets you create a nice loading gif. Create an image, and place it in a div as below. Then bind the search button with jQuery to display the hidden div when clicked.
Place the following div where you would like the loading icon to appear.
<div id="loadingDiv" style="display:none"><img src="loading.gif"></div>
Then this in your Javascript file
$(document).ready(){
$('#search').click(function(){
$('#loadingDiv').show();
});
});
Then when you're done loading, simply:
function SomeCallBackEvent(){
$('#loadingDiv').hide();
};