How to I get proper spacing in this? (Screenshot attached) - html

The code sample is:
<body>
<h4 style="position:absolute;left:200px;top:120px;">Mark skills to add</h4>
<div class=""style="position:absolute;top:170px;left:120px;width:1100px;background-color:#CCC;padding-bottom:50px;padding:20px;">
<form class="" action="AddSkills">
<h4 style="">Business Accounting Human Resources and Legal</h4>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="79" name="skill0"/> Accounting</p>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="80" name="skill1"/> Audit </p>
<h4 style="">Data Entry and Admin</h4>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="56" name="skill6"/> Article submission</p>
<p style="float:left;width:200px;height:30px;"><input type="checkbox" value="57" name="skill7"/> Data entry </p>
<input type="hidden" value="<%=tot%>" name="tot"/>
<input style=""type="submit" value="Add selected skills" class="btn btn-danger">
</form>
</div>
</body>
I want the output to be like the one when using display:inline; (inside <p></p>) and the spacing to be like the one when using float:left;(inside <p></p>)
How do I do this?
P.S. -> I am fetching the contents from database on a jsp page. The code here is from the view-source

Try using display: inline-block.

Try using inline-block for paragraph and give width using percentages as below code
<body>
<h4>Mark skills to add</h4>
<div>
<form class="" action="AddSkills">
<h4 style="margin:0px;padding:0px;">Business Accounting Human Resources and Legal</h4>
<div style="width:100% !important;display:block; margin:0px; padding:0px;clear:both;">
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="79" name="skill0"/> Accounting</p>
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="80" name="skill1"/> Audit </p> </div>
<h4 style="margin:0px;padding:0px;display:block;width:100%;clear:both;">Data Entry and Admin</h4>
<div style="clear:both"> <p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="56" name="skill6"/> Article submission</p>
<p style="display:inline-block;float:left;width:22%;"><input type="checkbox" value="57" name="skill7"/> Data entry </p> </div>
</form>
</div>
</body>

Instead of dealing with this many div and inline styles use table add each title as one row and choices as cells of the row under it. then set the table width to 100%

Related

Drop Down contents width is wider and out of screen

HI I have the following html and this is part of the html.
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_16" id="klb_16" class="input-control-label">
Code
<span class="mandatory">*</span>
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<select name="kaf_16" id="kaf_16" aria-label="kaf_16" aria-required="true" data-sid="ddl_code" class="input-control" data-klookup="C_1" data-kcurrentval="" style="font-weight: bold;">
<option value="+01">+01</option>
<option value="+02">+02</option>
</select>
</div>
</div>
When clicked on drop down, the contents is showing out of the screen and I am viewing the contents in mobile view in the browser.
I tried the css as below but it is not working.
.tabularView .input-control{
position: relative;
}
I am trying to find the solution and learn in the process.

why is conditional rendering not working for form input in vuejs

I have a form with select options :
<div>
<select>
<option v-model="department" :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
and based on the selection in the above I want to display header content:
<div v-if="{department} === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>
but every time Option B is getting outputted .
I think that the v-model directive should be in the select element. You probably meant to do this ..
<div>
<select v-model="department">
<option :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
You also don't need destructuring in this case. So you can use department in your equality comparison directly ..
<div v-if="department === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>

li as a main container for muiltiple li's inside ul not working

i am using Jotforms for my form requirement, i have downloaded the code and customizing the css and html for the design requirement that i have.
now Jotforms uses a set of ul , li for managing its HTMl structure now what i want to do is have a container inside the ul that will have some background and padding, i researched and got to know that is incorrect to have anything inside the ul other than li's and ul's and also i received an error due to not having an li child so i had to remove the div, no i am adding an li which has many li's inside it let me show you the code
HTML
<form class="jotform-form" action="https://submit.jotform.me/submit/81913120509450/" method="post" enctype="multipart/form-data" name="form_81913120509450" id="81913120509450" accept-charset="utf-8">
<input type="hidden" name="formID" value="81913120509450" />
<div class="form-all">
<ul class="form-section page-section">
<li class="form-line" data-type="control_text" id="id_7">
<div id="cid_7" class="form-input-wide">
<div id="text_7" class="form-html" data-component="text">
<h1>
Logo Designing
</h1>
</div>
</div>
</li>
<li class="form-line" data-type="control_text" id="id_9">
<div id="cid_9" class="form-input-wide">
<div id="text_9" class="form-html" data-component="text">
<p>The best brands own a word or phrase and a related space in consumer's minds. which become each brand's position in the marketplace.brand image and identity to instantly have meaning for consumers and differentiate it from competitor brands</p>
</div>
</div>
</li>
<li class="form-line" data-type="control_widget" id="id_10">
<div id="cid_10" class="">
<div style="width:100%;text-align:Left" data-component="widget-directEmbed">
<div class="direct-embed-widgets " data-type="direct-embed" style="width:50px;height:50px">
<div class="form_breadcrumbs_widget" id="form_breadcrumbs_widget_'10'">
<script type="text/javascript">
var qidBreadcrumbs = '10';
var tabsCustomCssBreadcrumbs = 'numerically';
var navigateWithoutValidationBreadcrumbs = 'Yes';
var formTabsThemeBreadcrumbs = 'se-theme-maya-blue';
var numberTypeBreadcrumbs = 'numerically';
</script>
<script src="//widgets.jotform.io/breadcrumbs/min/scripts.min.js" type="text/javascript"></script>
</div>
</div>
</div>
</div>
</li>
<!--<div class="white-box">-->
<!--<div class="white-box-padding">-->
<!--<div class="shair1">-->
<li class="form-line jf-required" data-type="control_dropdown" id="id_3">
<label class="form-label form-label-top form-label-auto" id="label_3" for="input_3">
What is your Brand Industry?
<span class="form-required">*</span>
</label>
<div id="cid_3" class="form-input-wide jf-required">
<select class="form-dropdown validate[required]" id="input_3" name="q3_typeA" data-component="dropdown" required="">
<option value=""> </option>
<option value="uneeb"> uneeb </option>
<option value="uneeb2"> uneeb2 </option>
</select>
</div>
</li>
<li class="form-line" data-type="control_textbox" id="id_54">
<label class="form-label form-label-top form-label-auto" id="label_54" for="input_54"> What is your Slogan? </label>
<div id="cid_54" class="form-input-wide">
<input type="text" id="input_54" name="q54_whatIs54" data-type="input-textbox" class="form-textbox" size="20" value="" data-component="textbox" />
</div>
</li>
<li class="form-line" data-type="control_textbox" id="id_55">
<label class="form-label form-label-top form-label-auto" id="label_55" for="input_55"> What is your Company Name? </label>
<div id="cid_55" class="form-input-wide">
<input type="text" id="input_55" name="q55_whatIs" data-type="input-textbox" class="form-textbox" size="20" value="" data-component="textbox" />
</div>
</li>
<!--</div>-->
<!--<div class="shair2">-->
<img src="images/shair.jpg"/>
<!--</div>-->
<li class="form-line" data-type="control_textarea" id="id_12">
<label class="form-label form-label-top form-label-auto" id="label_12" for="input_12"> What is your Objective? </label>
<div id="cid_12" class="form-input-wide">
<textarea id="input_12" placeholder="For Example : Small to mid-size companies who need brand awareness, brand recognition and online lead generation,
regardless of industr. We help all types of clients. Furthermore, we target people who want recognition
through online presence and are readily accesible via web & social media." class="form-textarea" name="q12_typeA12" cols="40" rows="6" data-component="textarea"></textarea>
</div>
</li>
<li class="form-line" data-type="control_text" id="id_15">
<div id="cid_15" class="form-input-wide">
<div id="text_15" class="form-html" data-component="text">
<p>Upload Image or Sketch that might be helpful.</p>
</div>
</div>
</li>
<li class="form-line" data-type="control_fileupload" id="id_13">
<label class="form-label form-label-top form-label-auto" id="label_13" for="input_13"> </label>
<div id="cid_13" class="form-input-wide">
<div data-wrapper-react="true">
<div data-wrapper-react="true">
<div class="qq-uploader-buttonText-value">
Browse
</div>
<input type="file" id="input_13" name="q13_input13[]" multiple="" class="form-upload-multiple" data-imagevalidate="yes" data-file-accept="pdf, doc, docx, xls, xlsx, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif" data-file-maxsize="10854" data-file-minsize="0" data-file-limit="" data-component="fileupload" />
</div>
<span style="display:none" class="cancelText">
Cancel
</span>
<span style="display:none" class="ofText">
of
</span>
</div>
</div>
</li>
<li class="form-line" data-type="control_text" id="id_16">
<div id="cid_16" class="form-input-wide">
<div id="text_16" class="form-html" data-component="text">
<p>Note : File size should be 500KB</p>
</div>
</div>
</li>
<!--</div>-->
<li id="cid_5" class="form-input-wide" data-type="control_pagebreak">
<div class="form-pagebreak" data-component="pagebreak">
<div class="form-pagebreak-back-container">
<button id="form-pagebreak-back_5" type="button" class="form-pagebreak-back " data-component="pagebreak-back">
Back
</button>
</div>
<div class="form-pagebreak-next-container">
<button id="form-pagebreak-next_5" type="button" class="form-pagebreak-next " data-component="pagebreak-next">
Next
</button>
</div>
<div style="clear:both" class="pageInfo form-sub-label" id="pageInfo_5">
</div>
</div>
</li>
<!--</div>-->
</ul>
</div>
</form>
now if you notice there is an commented div named white-box this is the problem i have changed it to be li but this is the issue
you can see how the line follows in my editor and but when i change it to li
event the console shows it as an independent li whereas every li after the class white-box should have been inside it,
it doesnt takes the whole space my editor shows it ends over there where it started and the editor tells the closing tag that should be aligned with this li says ending tag matches nothing
i am not sure what type of error i am making can someone guide me?
The img tag contains in between the two li tags, THis is not an coding standard , please remove the image from outside the li
Your img tag like as :
<li>
</li>
<img src="images/shair.jpg"/>/*Remove from here*/
<li>
</li>

how do I align text to fontawesome icon

i searched through similar questions and still could not find a solution. I have a fontawesome icon that triggers an expanding form.
<div class='create-inventory-form'></div>
<div class='icon fa fa-pencil' id='form-container'>
<!-- <span>Create</span> I tried this but it only shows on the pop-up form-->
<span class='icon fa fa-close' id='form-close'></span>
<div id='form-content'>
<div id='form-head'>
<h1 class='pre'>Add New Item to Inventory</h1>
<p class='pre'>Good choice...</p>
<h1 class='post'>Thanks!</h1>
<p class='post'>I'll be in touch ASAP</p>
</div>
<form>
<input class='input name' name='user_name' placeholder='Your name please' type='text'>
<input class='input email' name='user_email' placeholder='A contact email' type='text'>
<select class='input select' name='subject'>
<option disabled=''>What shall we talk about?</option>
<option selected=''>About a new project</option>
<option>About a job opportunity</option>
<option>Let's do this over a coffee</option>
</select>
<textarea class='input message' placeholder='How can I help?'></textarea>
<input class='input submit' type='submit' value='Send Message'>
</form>
</div>
</div>
this is what i have with the code above
this is what i want to create
If you want the respective text to be vertically aligned center with the icon so you have to set a css property Vertical align : middle to your icon class.in your case
.fa-pencil:before {
content: "\f040";
vertical-align: middle;
}
Jsfiddle
.fa{
display:block;
text-align:center;
}

How to put control id based on parent control reference/ID to avoid conflict

i am facing one issue due to one button control existed with same ID at two place in single page.
As i have created a custom field for jira which is appear on issue view screen and edit screen both.
"Edit" screen is just be a DIV and appear as display none till edit is clicked else issue view screen is appear (both on single page).
my created button existed on both the area.
How can we keep the condition like -
if parent is "DIV - edit" then keep different ID of button
ELSE
another ID of button. ? or any another way of jquery to resolve this conflict issue.
Below is stuff which shows same control at two place:
issue view screen stuff on a page:
.... .....
<li id="rowForcustomfield_11200" class="item">
<div class="wrap">
<strong title="final Dynamic Value" class="name">final Dynamic Value:</strong>
<div id="customfield_11200-val" class="value type-dynamicvalue editable-field active"
data-fieldtype="dynamicvalue">
<form id="customfield_11200-form" class="ajs-dirty-warning-exempt" action="#">
<div class="inline-edit-fields">
<div class="field-group">
<table id="customfield_11200:maintable">
<tbody>
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
<tr width="15%">
</tbody>
</table>
<input type="button" value="add" id="finaladd" />**PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" />**PROBLEM CONTROL**
</div>
</div>
<span class="overlay-icon throbber" />
<div class="save-options" tabindex="1">
</form>
</div>
</div>
</li>
......
....
..
note: i have highlighted above with tag comment as "PROBLEM CONTROL
Another stuff on same page for edit issue screen div:
.......
.............
<div id="edit-issue-dialog" class="aui-popup box-shadow aui-dialog-open popup-width-custom aui-dialog-content-ready"
style="width: 810px; margin-left: -405px; margin-top: -263.5px;">
<h2 class="aui-popup-heading">
<div class="aui-popup-content">
<div class="qf-container">
<div class="qf-unconfigurable-form">
<form action="#" name="jiraform" class="aui">
<div class="form-body" style="max-height: 419px;">
<input type="hidden" name="id" value="11100" />
<input type="hidden" name="atl_token" value="BP8Q-WXN6-SKX3-NB5M|6533762274aaa5d16f14dbbe010917f161596d8d|lin" />
<div class="content">
<div class="aui-tabs horizontal-tabs" id="horizontal">
<ul class="tabs-menu">
<div class="tabs-pane" id="tab-0">
<div class="tabs-pane active-pane" id="tab-1">
<div class="field-group aui-field-something">
<div class="field-group">
<div class="field-group">
<div class="field-group">
<label for="customfield_11200">
final Dynamic Value</label>
<table id="customfield_11200:maintable">
<input type="button" value="add" id="finaladd" /> **PROBLEM CONTROL**
<input type="button" value="remove" id="finalremove" /> **PROBLEM CONTROL**
</div>
</div>
</div>
<div class="field-group aui-field-wikiedit comment-input">
</div>
</div>
<div class="buttons-container form-footer">
</form>
</div>
</div>
</div>
</div>
.....
...
..
NOTE: above highlighted issue at PROBLEM CONTROL tag comment.
I think you can differentiate by using the id edit-issue-dialog
if($("#edit-issue-dialog").length){
//u r in edit form, and do your stuff
}else{
//in create form do your stuff
}