Drop Down contents width is wider and out of screen - html

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.

Related

Moving elements of a div to the right

I have a simple parent div element containing multiple child div elements. When the page is loaded, these div elements are displayed on the left. I would like to display these items on the right. How can I achieve this?
Currently, my page elements look like this:
If I try style="float:right", I am getting compressed elements:
Here is the html code:
<div class="row">
<div class="col-md-2" style="text-wrap:none; width:11%">
<label>Requests Per Page: </label>
</div>
<div class="col-md-1" style="text-wrap:none">
<select id="RecordsPerPage">
<option value="10">10</option>
<option value="25" selected="selected">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
</div>
<div class="col-md-3" style="text-wrap:none">
Go to Page #:
<input type="number" id="UserPageNumber" min="1" size="5" style="width:50px;" value="1" max="87">
of <span id="spTotalPages">87</span>
<button id="btnPage" onclick="handlePaging();">GO</button>
</div>
</div>
Add class justify-content-end to row element
<div class="row align-items-end">
I also recomend using bootstrap utility classes instead of inline styles. Here is your example - little adjusted: https://www.bootply.com/k7mrP9fHPz
Assumed you are using current version of Boostrap - v4

Unable to align a drop-down to the next line in angular2+

I want to align my drop-down to the next line placed in a table but unable to do so.
I tried break tag -
I tried div tag -
But all to no avail.
PLease help.
Here is the screenshot -
UI Drop downs image
code -
component.html
<table>
<tr>
<td>
<div style="margin-left:50px">
<div> barchart success data -
{{barChartDataKarzaEntire[0].data[0]}} </div>
<div> barchart error data
{{barChartDataKarzaEntire[1].data[0]}}
</div>
<p> Karza Success and Error
</p>
<form (ngSubmit)="viewKarzaData(karzaValue)"
[formGroup]="karzaDataForm">
<div class="form-group">
<div>
<label> Karza Bar C Name: </label>
</div>
<br>
<br>
<div>
<select style="width:240px" class="form-control"
name="viewKarzaDataName"
[formControl]="karzaDataForm.controls['viewKarzaDataName']"
[(ngModel)]='karzaValue' placeholder="Choose an Option"
(change)="viewKarzaData(karzaValue)">
<option value="">Select</option>
<option *ngFor='let i of karzaInterfaceNames'>{{i}}</option>
</select>
</div>
<br>
<br>
<div class="card">
<div class="card-header">
Karza Bar Chart
</div>
//code
</td>
</tr>
</table>
you can use css :
<table>
<tr>
<td>
<div style="margin-left:50px">
<div> barchart success data -
{{barChartDataKarzaEntire[0].data[0]}}
</div>
<div> barchart error data
{{barChartDataKarzaEntire[1].data[0]}}
</div>
<p> Karza Success and Error
</p>
<form (ngSubmit)="viewKarzaData(karzaValue)"
[formGroup]="karzaDataForm">
<div class="form-group">
<div class="label-container">
<label> Karza Bar C Name: </label>
</div>
<br>
<br>
<div class="select-container">
<select style="width:240px" class="form-control"
name="viewKarzaDataName"
[formControl]="karzaDataForm.controls['viewKarzaDataName']"
[(ngModel)]='karzaValue' placeholder="Choose an Option"
(change)="viewKarzaData(karzaValue)">
<option value="">Select</option>
<option *ngFor='let i of karzaInterfaceNames'>{{i}}</option>
</select>
</div>
<br>
<br>
<div class="card">
<div class="card-header">
Karza Bar Chart
</div>
//code
</div>
</div>
</form>
</div>
</td>
</tr>
</table>
css:
.form-group {
margin-bottom: 1rem;
display: flex;
}
.label-container{
width:10%;
}
.select-container{
width:40%
}
.card{
width:50%;
}

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

Screen reader not reading model window automatically

I am trying on a JSP model window is not read automatically by a screen reader. This modal window is a second modal window first modal window is read automatically. But not the second model window.
Here is the code:
<div id=second-popup style="display:none" aria-live="polite" role="dialog">
<input type="hidden" id="none-label" value="nonetext"/>
<jsp:include page="somepagelinkhere.jsp" flush="true"/>
<html:hidden property="intialized"/>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<html:select styleId="" property="">
<html:options collection="" property="">
</html:select>
<html:select styleId="" property="">
<html:options collection="" property="">
</html:select>
</div>
<c:set var="var1"><bean:message /></c:set>
<input type="hidden" value="" id="removelabel">
<div class="div5">
<form:label property="" >
<select name="country" id="countrylabel" class="country" >
<option value="">${countrieslist}</option>
<c:forEach var="" items="">
<option value=""> ${countrieslists}</option>
</forEach>
</div>
<div id="city" class="citylist">
<form:label property="">
<select name="" id="" class="">
<option value=""></options>
</select>
</div>
</div>
</div>
</div>
,showhide: function(){
$("button").click(function(e){
e.preventDefault;
$("button").attr("aria-hidden","true");
$("second-popup").attr("style","display:block");
$("second-popup").attr("aria-hidden","false");
});
}
$(document).ready(function(){
$("first-popup").attr("tabindex",0);
$("first-popup").attr("tabindex",0);
$("Second-popup").focus();
});
In the above code first div contains second modal window content code blue print. I need this to be read automatically read by NVDA screen reader
and I tried by putting role="dialog" aria=labelledby="id" aria-describedby="" on the parent div, but still screen reader is not reading automatically.
I was able to make the screen reader automatically read the content of a modal overlay with a combination of the following on my overlay section:
aria-labelledby="title_id" aria-describedby="body_id" aria-live="assertive"
plus setting the focus to the autofocus element in the overlay content:
overlay.querySelector('*[autofocus]').focus();
It only worked with all these things together.

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

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%