Responsive text box jQuery mobile - javascript

I have label and text box in jQuery mobile and when the screen size changes the whole structure changes too.
When i have screen size width less then 448px it goes to label and text box under the label but when it is above 447px it is one next to the other.
I am adding two photos in order to be clear.
This is the code:
Html:
<div role="main" class="ui-content">
<form>
<div class="ui-field-contain">
<label for="sales1">Sales:</label>
<input type="text" id="sales" value="">
</div>
</form>
</div>
Css:
.ui-field-contain .ui-input-text {
width: 50% !important;
}
Is there any way by css to override it and to be always one next to the other in any screen size?

You just have to style label as an block on small screens
#media (max-width: 448px) {
.ui-field-contain label {
display: block;
}
}

Related

How to set a column and container a max height so the image fits the whole page in bootstrap 4?

I have two columns in a row with bootstrap 4. I want to use the whole screen to show the image. This is my code:
<div class="container-fluid" style="padding-left:0px;">
<div class="row">
<div class="col-md-6 ">
<img class="img-fluid" src="jumbo_background.jpg" />
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Everything is working good and responsive but this is the result I get from this code:
The preferred result I want is this:
The picture I use the dimension are 6000 X 4000
The solutions I have tried:
html, body {
height: 100%;
}
I have inspected the browser with the Google dev tool and I can see the the body is 100% but still not the result I want.
I have used h-100 from bootstrap and still get the same result.
I have used height: 100vh; but on smaller devices it's not responsive
I have checked this link:
Height not 100% on Container Fluid even though html and body are
Still don't get the result I want.
How can I give the image a full height in bootstrap 4?
UPDATE:
After nikolay solution on resolution: 1156 x 1013
You seem to want to use the image as a background. So my suggestion would be to do just that, as the cross-browser support is better (I'm not saying it can't be done with <img> alone, only that it's easier with background-image). Do note I'm leaving the <img> tag in for two reasons:
SEO indexing (if you need it)
sizing the column properly on mobile devices.
However, the <img> is not rendered. You're always looking at the background image of the <div>.
Here's a solution which grabs the src attribute of the first <img> element in each .column-image and uses it as <div>s backgroundImage. For it to work, make sure the <div> has the image-column class:
$(function() {
$('.image-column').each(function() {
const src = $('img', this).eq(0).attr('src');
if (src) {
$(this).css({ backgroundImage: `url(${src})` })
}
})
});
.image-column {
min-height: 100vh;
background: transparent no-repeat center /cover;
}
.image-column .img-responsive {
visibility: hidden;
}
#media(max-width: 767px) {
.image-column {
min-height: 0;
}
.image-column .img-responsive {
width: 100%;
height: auto;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 image-column">
<img src="https://i.picsum.photos/id/237/600/400.jpg" class="img-responsive">
</div>
<div class="col-md-6">
<div class="contact-wrapper">
<p>Test</p>
</div>
</div>
</div>
</div>
Note: even though it's used as both src of the <img> and background-image of the <div>, the resource (image) is only loaded once.
Here's a solution:
html, body,
.container-fluid .row,
.container-fluid .row .col-md-6,
.container-fluid .row .col-md-6 img {
height: 100vh !important;
}
Add example for the responsive mobile view as you made above, so I can write a solution.

Change text align when col level is reached in bootstrap

I am using bootstrap 3.3.7 and I want to change the text alignment to Left when col-sm-6 is reached. If this level is not reached yet then the text alignment is right. How can I do that?
Below is my div:
<div class="col-sm-6 text-right" style="padding-bottom:10px; padding-top:10px" >
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
I have tried to add this in the script css in the header but didn't work:
<style type="text/css">
#media (max-width: 767px) {
footer .text-right { text-align:left }
}
</style>
Any suggestions?
Another question please: is there anyway to detect in javascript or jquery if col level was reached? I am asking this because sometimes we need to hide images or add somthing in some levels ...
For example: hide image x when col-sm-6 is reached. Is it possible?
Assuming you have the correct bootstrap HTML then this should work
#media (max-width:767px) {
.container .text-right {
text-align: left
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6 text-right">
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
</div>
</div>
To answer your second question, about hiding elements you can use utility classes in this case hidden-sm and hidden-xs
try this below code
#media (max-width: 767px) {
.text-right { text-align:left; }
}
Try this into your page with inline CSS and if works fine make external CSS
.col-sm-6
{
text-align:left;
}
if this works make a Separate CSS for each changes you want
like for image hide add below line in above code
.col-sm-6
{
text-align:left;
diaplay : block;
}

Floating visible div inside horizontal scrollable div CSS

The issue is the following :
I have a calendar in which the user can create an appointment (using DHTMLX Scheduler Timeline View), the main problem is the Scheduler doesn't support a scrollable view , only fits the schedule into the view.
I Solve the previous problem, creating a div with a FIXED width (in this way can i have a longer horizontal scheduler ) and wrapping it inside a div that allows to scroll horizontally its content.
However , I dont have a clear idea of how to solve the following problem caused :
When the calendar is loaded , you can see which div belongs to its horizontal Row
And when the user scrolls horizontal (to see 7:00 PM for example)
You cannot see in which div with color you need to create the appointment !
So i need something like this, where the div is still visible although the user scrolls horizontally :
I already tried with something like the following :
May be a problem too with the parent container, because it hides the div if the following works maybe ?
.visible-division{
position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/
float:left;
z-index:9000;/*a higher z-index in case something cover the div*/
}
without any luck ..
My CSS
#calendar-container{
width: 2000px;
}
#calendario {
height: 900px;
width: 100%;
border: 1px solid #cecece;
}
.scrolling_container {
height: 100%;
overflow: auto;
}
And my Markup
<div class="scrolling_container">
<div id="calendar-container">
<div class="dhx_cal_container panel" id="calendario">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<div class="well text-right">
<div>
a link
</div>
</div>
</div>
It can be solved via CSS ? Otherwise, Should I apply classes to it in case of scroll event ?
Any help is appreciated, thanks !
This may help you do the trick.
.visible-division{
position:fixed;
width: /* specifiy */
height: /* specify */
top: /* specify */
left: /* specify */
}
.scrolling_container {
height: 100%;
overflow: auto;
}
Though not supported by most browser, you may try sticky position value position: sticky.
Hope this will be helpful, apply this class to the floating div only.
.floating{
position:fixed;
top:20px;
right:0px;
width:80%; /* as required */
}

100% height for bootstrap columns in container

I have a bootstrap row with 3 columns nested within a container which I'd like to give a height of 100% for each row, applying vertical scrolling if they overflow.
Current Layout
DOM
<body>
<div id="wrapper">
<nav...
</nav>
<div id="page-wrapper" class="container-fluid">
<div class="content" ui-view>
<!-- content starts here (loaded by angular)-->
<div class="row">
<div class="col-md-4 nopadding">
...
</div>
<div class="col-md-4">
<!-- example column content -->
<div class="list-group">
<a class="list-group-item" ng-repeat="..."></a>
</div>
</div>
<div class="col-md-4 nopadding">
...
</div>
</div>
<!-- content ends here -->
</div>
</div>
...
I tried a lot of things now, e.g. negative margins, absolute positioning, displaying the columns as table/table-cells. However everytime the content populates, the list groups expand to the height they need for displaying all items, pushing the whole site down.
Based on other examples, it should work this way (it does not, though -> has no effect):
body, html {
height: 100%;
}
.table-row { // applied to "row"
display: table;
> [class*="col-"] { // applied to columns
vertical-align: top;
float: none;
display: table-cell;
}
}
.overflow-auto { // applied to the list groups inside the columns
height: 100% !important;
display: block;
overflow-y: scroll;
}
Anyone got an idea about how to solve this?
Examples tried:
How to make bootstrap column height to 100% row height?
Twitter bootstrap 3 two columns full height
Setting 100% height to columns in Twitter Bootstrap
Bootstrap 3 - 100% height of custom div inside column
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

How to place a div at the bottom of another div without know the parent's div height

I have had some problems to resolve this situation.
I have a div "header" with no set height because could have a variable value depending on browser.
Inside her I have two more divs and I want to place one div exacly at the bottom of the another but I never know height "header" height. I tried to define a height for div "header" but sometimes it fails.
Use position:absolute in combination with a positioning context on the parent, for example:
<header>
Ohai
<div>
Noes!
</div>
</header>
CSS:
header {
position:relative;
height:25%;
background:#eee;
}
div {
position:absolute;
bottom:0;
left:50%;
margin-left:-50px;
width:100px;
background:red;
}
The header's size is unknown, since it's based on the viewport height, and the div is locked to its bottom with the combination of position:absolute and bottom:0. The header needs the position:relative to designate it a positioning context used by absolutely positioned child elements.
Fiddle here.
One way to do this would be to set position:relative on the header div, and position:absolute and bottom:0 on the child div you want to sit on the bottom of the header.
jsFiddle example
just use clear:both for the second div at bottom ,and set the height of the header as height:auto
Sample:
<div id="header">
<div id="first">
first
</div>
<div id="second">
second
</div>
</div>
CSS:
#header{height:auto}
#first{}
#second{clear:both}
DEMO
<div id="header">
<h2>Some title..</h2>
<div class="right">
<p style="color: black;display: inline">
Some data.....
</p>
</div>
<div class="left">
<form action="#" >
<input type="text" placeholder="put here..." required="required">
<button type="submit">Validar</button>
</form>
</div>
</div>
CSS:
#header{position: relative;height: 150px; border:1px solid black}
.right{right: 0; bottom: 0; top:auto; position: absolute}
.left {left: 0; bottom: 0; top:auto; position: absolute}
This work just fine in Chrome and Firefox but is not working in IE.
The div which have the left css is not being placed at the bottom of the "header".
<div>
<div>
div1
</div>
<div>
div2
</div>
</div>

Categories

Resources