I put my footer on the last row of an col-md-12 container and expect the footer to be the same width as the col-md-12 container. Instead of this it starts corretly on the left side with the container, but on the right side it ends at the display border and not at the container.
<html>
<head>
<title>footertest</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
.myleft{
width: 100%;
background-color: rgb(227, 236, 97);
height: 400px;
}
.myright{
width: 100%;
background-color: rgb(19, 197, 49);
min-height:100%;
}
.mytest{
width: 100%;
background-color: aqua;
height:50px;
position:fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="container">
<div class="row " > <!-- arbeitsbereich links + rechts- -->
<div class="col-md-6 myleft"> <!-- linke Haelfte -->
this is the left side (col-md-6)
</div>
<div class="col-md-6 myright" > <!-- test1 hat den style lightblue im css-->
<!-- rechte Haelfte-->
this is the right side (col-md-6)
</div>
</div>
<div class="row " >
<div class="col-md-12 mytest">
this is my footer. It starts correctly at the left side of the container, but ends at the right site of the display instead of the container
</div>
</div>
</div>
</body>
</html>
here is a screenshot of the result:
https://zaunraum.de//IsMobileTest/footer.jpg
It's because width of a fixed position is not relative to the place where it's displayed (it's like if you place this element with position absolute)
the element is displayed out of container and don't take into consideration width of col-md-12
like you put 100% width to class .mytestin, this one will take width of entire page
you have different way to fixed your issue :
put a max-width on your footer
put a margin on page
but in all cases you have to considered your element as a standalone one
I solved the problem by creating the footer as a standalone element (as suggested by jeremy-denis) and then inserting a col-md-12 container into the footer. This then behaves natrlih exactly like the main container.
Thanks for the help.
Related
hi we are working on jquery mobile how to hide button with css not with code we are using display:none in style but its not working for jquerymobile
here is the code we are using
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Buttons</h1>
<button data-role="button" style="display:none;">hello</button>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
The easiest way is to wrap your button in a DIV and then just hide/show it.
<div style="display:none;">
<button data-role="button">hello</button>
</div>
<style>
#pageone .ui-header > .ui-btn{display:none;}
</style>
First, Try editing the property like "display: none !important".
If its not worked yet, then Check whether you had declared "display: block !important;" property for buttons.
(or)
write individual style in internal /external stylesheet like,
#pageone .ui-header > .ui-btn { display:none !important; }
If you want to move with code, change "display: none" to visibility: hidden
or
$( ".target" ).hide();
This is roughly equivalent to calling .css("display", "none"), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.
SOLUTION
I was being an idiot and dynamically adding data-role="content" to the #wrapper element on page load, making it unrecognizable by JQM.
I'm trying to implement a basic menu panel, but I'm having no luck getting it to animate or close.
Below is the basic markup as generated by JQM.
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-body-c ui-page-panel ui-page-active">
<div id="menu-panel" data-role="panel" data-position="left" data-display="reveal" data-dismissible="true" class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-panel-closed ui-body-c ui-panel-animate">
<div class="ui-panel-inner">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
<div id="wrapper" data-role="content">
<span class="ui-btn-inner"><span class="ui-btn-text"></span></span>
<!-- Page content -->
</div>
</div>
CSS for #wrapper:
#wrapper {
margin: 0 auto;
min-height: 100%;
padding: 0;
position: relative;
width: 100%;
}
It seems wrong to put redundant data roles in the panel and the button, but all the examples I've looked at, including the official docs, have it that way.
The panel appears, but doesn't make use of the CSS transforms. It also doesn't push the page content over or close on any event.
I would remove the space between the header and the beginning of the collapsible, I would appreciate if you can help
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="collapsible-set" data-corners="false">
<div data-role="collapsible">
<h3>Title</h3>
<p>Content</p>
</div>
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Content 2</p>
</div>
</div>
</div>
[Here is a link with a picture. I would remove the space between the header and the beginning of the collapsible][1]
[1]: http://afines.com/foro/space.jpg
"There's a 15px padding .... on the content div"
This appears to have been answered here to some extent. Also, when inspecting the .ui-collapsible-set element using Chrome's Developers tools option I found that there is provision for margin which is set at .5em.
In order to completely remove the space between a header and a collapsible-set the margin requires adjusting using the <style> tag:
.ui-collapsible-set {
margin: 0 0;
}
Is there any way that I can "Stack" the jQuery UI Tabs Header? Please allow me to explain: I have tabs which may require two or more words for the titles to be self-explanatory. For instance:
"PDP Undeveloped"
My problem is that I am running out of space when adding a bunch of tabs. So instead of writing the tab as
PDP Undeveloped
I would like it to show as
PDP
Undeveloped
Is that possible? If not then are there alternate ways of solving this problem?
Thanks in advance.
Bharat
I would recommend using <br /> tags. Since you only want them to take effect when you're short on space I'd recommend using media queries to turn on the multi line display.
<div id="tabs">
<ul>
<li>Nunc <br />tincidunt</li>
<li>Proin <br />dolor</li>
<li>Aenean <br />lacinia</li>
</ul>
<div id="tabs-1">Tab 1</div>
<div id="tabs-2">Tab 2</div>
<div id="tabs-3">Tab 3</div>
</div>
<style>
br { display: none; }
/* Replace 700px with whatever width you want the multi line display to start */
#media screen and (max-width: 700px) {
.ui-tabs li { height: 4em; }
br { display: inline; }
}
</style>
Live example: http://jsfiddle.net/vvpeF/
I'm familiar with styling forms with label for="my_id" and input type tags. I really like how it automatically styles the form components if the form width goes down to a narrower width, and I like that the input tags are left align.
I would like to do the same type of styling except now I'm wanting to display a record where the labels and their values are being styled similarly.
Here's some code that I hoped would work but it doesn't.
<div data-role="fieldcontain">
<label for="full_name"><strong>Name:</strong></label>
<span id="full_name">John Smith</span>
</div>
<div data-role="fieldcontain">
<label for="phone"><strong>Long Phone Label:</strong></label>
<span id="phone">(800) 555-1212/span>
</div>
Any ideas on the right way to do this without resorting to tables?
It seems that you want to align the text in the way the form is aligned.The below code will align the labels with their values.This is what i understand from your question.i hope the below code will help you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.0rc1.css" />
<script type="text/javascript" src="js/Common/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/Common/jquery.mobile-1.0rc1.js"></script>
<style>
#b {
left: 156px;
bottom: 50px;
}
</style>
</head>
<body>
<div data-role="page" id="header">
<div data-role="fieldcontain" id="a">
<label for="full_name"><strong>Name:</strong></label><br>
<label for="phone"><strong>Long Phone Label:</strong></label>
</div>
<div data-role="fieldcontain" id="b">
<span id="full_name">John Smith</span><br>
<span id="phone">(800) 555-1212</span>
</div>
</div>
</body>
</html>
Maybe this would work. You could use a JQM grid to do a side by side label:
Label: Input Element
Label: Input Element
Be careful though as labels for mobile are like that on purpose. It's so you can see the lable and the input when entering on a device like an Ihone:
<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>