Is it possible to assign multiple ui-blocks to one element?
I want to use a five-column layout with 4 being assigned to one input and the spare to an image. I have tried just adding multiple ui-blocks to one element but no joy.
<fieldset class="ui-grid-d">
<div class="ui-block-a ui-block-b ui-block-c ui-block-d ">
<input type="text" id="item" placeholder="Error/Part number">
</div>
<div class="ui-block-e">
<img src="img/scan_button.png" alt="scan button">
</div>
</fieldset>
No, you can't.
What you can do is use a 2-column layout with custom width setting (not 50/50):
CSS:
.width-80 { width: 80% !important; }
.width-20 { width: 20% !important; }
HTML:
<div class="ui-grid-a">
<div class="ui-block-a width-80">
<input type="text" id="item" placeholder="Error/Part number">
</div>
<div class="ui-block-b width-20">
<img src="img/scan_button.png" alt="scan button">
</div>
</div>
JSFiddle
Related
I am newbie with HTML CSS and trying to write a very simple program with HTML CSS with responsive file and here is my problem.
I wrote an index.html file and in this file, I added two classes like this
<div class="row contact-content">
<div class="col col-half contact-info s-col-full">
<p><i class="ti-location-pin"></i>Chicago, US</p>
<p><i class="ti-mobile"></i>Phone: +00 151515</p>
<p><i class="ti-email"></i>Email: mail#mail.com</p>
</div>
<div class="col col-half contact-form s-col-full">
<form action="">
<div class="row">
<div class="col col-half">
<input type="text" name="" placeholder="Name" required id="" class="form-control">
</div>
<div class="col col-half">
<input type="email" name="" placeholder="Email" required id="" class="form-control">
</div>
</div>
<div class="row mt-8">
<div class="col col-full">
<input type="text" name="" placeholder="Message" required id="" class="form-control">
</div>
</div>
<input class="btn pull-right mt-16" type="submit" value="Send">
</form>
</div>
</div>
As you can see in my code, in the class, I want the class Chicago, US v.v will take up 100% the screen, and the row Name Email v.v will take up 100% the screen too because I add the code
.s-col-full {
width: 100%;
}
to the responsive.
But, it does not happen.
Here is what I got in the screen, as you can see, the Chicago US is lying next to Name, Email, Message.
But, as design, it must lie up the Name, Email, Message (because s-col-full is width: 100% in responsive)
Here is my code, sorry because I can not upload to bitbucket.
https://www.mediafire.com/folder/kfuqch81jqkwk/bai_90
Could you please give me some advice for this problem ? Thank you very much for your time.
Just code CSS like this:
.contact-content .contact-info,
.contact-content .contact-form {
width: 100%;
}
I want to get the child element dynamically. I am looping through the div tag to get the values. But its not working.
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" xl="12" value="a">
</div>
<div class="fg">
<input type="text" xl="34" value="b">
</div>
</div>
</div>
</div>
The javascript function for fetching the value dynamically
This code is working if row and col div are not there. But when they are included its not working at all. Anyone can please help me with this issue!
$(".pg").each(function(){
$(this).children(".fg").each(function() {
console.log($(this).attr('xl'));
});
});
First using children(), will return only direct children , not deep search ,
Second , use data-xl instead of xl ,more information here about data attribute
also , the loop is accessing the parent div of input , so use ".fg input" instead
for searching use find() , then change selector to access directly your input , .find(".fg input")
See below working snippet :
$(".pg").each(function() {
$(this).find(".fg input").each(function() {
console.log($(this).val() ,"=", $(this).data('xl'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="12" value="a">
</div>
<div class="fg">
<input type="text" data-xl="34" value="b">
</div>
</div>
</div>
</div>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="15" value="c">
</div>
<div class="fg">
<input type="text" data-xl="84" value="d">
</div>
</div>
</div>
</div>
Hey all I can not seem to get this to work in jQuery even though I know that it can:
my HTML code:
<div class="cd-panel from-right" id="va">
<header class="cd-panel-header" style="max-width: 600px;">
<h1 style="margin-top: 5px;" id="panHeading"></h1>
</header>
<div class="cd-panel-container" style="max-width: 600px; width: 600px;">
[more html code here...]
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="col-sm-10">
<input name="RequestID" disabled="True" class="form-control input-sm"
id="RequestID" style="width: 520px; max-width: 520px;" type="text">
</div>
</div>
[more html code here...]
</div>
<div class="cd-panel from-right" id="VDA">
<header class="cd-panel-header" style="max-width: 600px;">
<h1 style="margin-top: 5px;" id="panHeading"></h1>
</header>
<div class="cd-panel-container" style="max-width: 600px; width: 600px;">
[more html code here...]
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="col-sm-10">
<input name="RequestID" disabled="True" class="form-control input-sm"
id="RequestID" style="width: 520px; max-width: 520px;" type="text">
</div>
</div>
[more html code here...]
</div>
And this is my jQuery code:
if (responce["personData1"][0].RequestID != 1) {
$('#va > #RequestID').val(responce["personData1"][0].RequestID);
}
But it never puts the value inside that RequestID text box for VA even though it does have a value for RequestID. If I do this:
$('#RequestID').val(responce["personData1"][0].RequestID);
Then it has the value inside the text box.
What would I be missing?
You need to use, get rid of > it looks for immediate child and RequestID is not the child of va element.
$('#va #RequestID').val(responce["personData1"][0].RequestID)
Also note Identifiers in HTML must be unique. You can assign a class and then use it like
<input name="RequestID" disabled="True" class="form-control input-sm RequestID" style="width: 520px; max-width: 520px;" type="text">
and then
$('#va .RequestID').val(responce["personData1"][0].RequestID)
Try this:
$("#va [name='RequestID']").val(responce["personData1"][0].RequestID);
I think the problem is that you're trying to get an ID child of an ID, which should be unique, but you're using "RequestID" as ID on multiple elements.
ID are designed to be a unique selector on the page. So the search would stop after the first match
If you'd like to select multiple elements on the page based on a common pattern you should go for class selectors.
Now, to answer your question :
HTML:
<input name="RequestID" disabled="True" class="some-input-class form-control input-sm" id="RequestID" style="width: 520px; max-width: 520px;" type="text">
and JS:
if (responce["personData1"][0].RequestID != 1) {
$('#va .some-input-class').val(responce["personData1"][0].RequestID);
}
jsFiddle example here
References:
W3C docs
Is selecting by class or id faster than selecting by some other attribute?
I want to use a gmap in a modal. I write this code:
<div class="tab-pane fade" id="third">
<div class="row col-md-10 col-md-offset-1">
<label for="Editaddress_with_google">آدرس را بر روی نقشه مشخص کنید</label>
<div class="span11">
<div style="top: 10px; left: 25px; width:210px; height:220px; float: left" id="EditMap">
<label>tttttttttttttttttt</label>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-4">
<button id="Editbutton_Google_Serach" type="button" class="btn btn-info" >جستجو</button>
</div>
<div class="col-md-8">
<input type="text" id="Editaddress_with_google" name="Editaddress_with_google" placeholder="آدرس" class="form-control" />
</div>
</div>
<input type="text" hidden id="EditlatGoogleMap">
<input type="text" hidden id="EditlngGoogleMap">
<br>
</div>
</div>
but when i see the web, don't show any div for map. in other hand, Width and hiegth af EditMap div was 0. same bellow image.
How must i do?
May be you need to remove hidden from your map element and also their is duplicate id for element.
Chek this:
http://www.bootply.com/106707
if we have div like this
<div id="1">
<input type="text" />
<div id="2"></div>
</div>
<div id="3">
<div id="4">
<input type="text" />
</div>
</div>
now if i want to jump from div of id=4 to input tag of <div id="1">
using parent child relationship how can i jump to that particular input tag.
Please help
Thanks..
$('#4').parent().prev().children('input:first')
Of course this assumes that div#1 is always the previous sibling of div#3, like you have in the example.
document.getElementById("4").childNodes[0].
Though if you are using jquery it would be something like:
$("#4").children(":input")
IDs can't start with a number, so I change your code to:
<div id="id1">
<input type="text" />
<div id="id2"></div>
</div>
<div id="id3">
<div id="id4">
<input type="text" />
</div>
</div>
So, that makes it:
$("#id4").parents("body").children("div:first").children("input")
Another, shorter version:
$("#id4").parents("body").find('input')
Or the fast way:
$("input:first")