I have a bunch of tabular/key-value data, of which I always show one item and the rest when the user clicks on the first, like this jsFiddle:
<div data-role="collapsible">
<h3><div class="ui-grid-a">
<div class="ui-block-a">Customer:</div>
<div class="ui-block-b">Mario's Plumbing</div></div></h3>
<ul data-role="listview">
<li><div class="ui-grid-a">
<div class="ui-block-a">Phone:</div>
<div class="ui-block-b">1-800-MUS-ROOM</div></div></li>
...
</ul>
</div>
However, when jQuery Mobile adds an icon to the header item ("Customer: Mario's Plumbing"), the value field, i.e. "Mario's Plumbing", doesn't align with the value fields in the <ul> list, i.e. "1-800-MUS-ROOM".
I think jQuery puts the icon side-by-side with the "Customer: Mario's Plumbing" box---this is compatible with what I see: the misalignment looks roughly like 100% of a button width for the key field and 50% of a button for the value field, which I would expect given my use of a ui-grid-a (which does a 50/50 split). I would want the icon to be part of the left 50%, i.e. inside rather than beside that box. Can I do that? How? It might be easy CSS and me being a CSS retard :)
It looks like the jQuery mobile element styles are not playing nicely together, in this case the collapsible block and the grid layout styles.
The collapsible block adds the icon and the style which pads the header.
.ui-btn-inner {
padding:.6em 20px;
}
The additional rule, pads the left even more (to move the text away from the icon)
.ui-collapsible-heading .ui-btn-inner, .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner {
padding-left: 40px;
}
but this pushes all the header text left by 40px.
The only way I could find to correct the mismatch is to add an additional rule to move the second block to the left. By adding the following rule, the text lines up again.
.ui-collapsible-heading .ui-btn-inner .ui-grid-a .ui-block-b {
margin-left:-10px;
}
It seems to work fine at different page zoom levels in my local Chrome browser testing but I have not tested on a mobile device.
Edit: Also, there is a typo in the example and the fiddle, you have un-block-b and not ui-block-b for Mario's Plumbing.
Related
I created a jsFiddle which shows the chosen-select control being 'truncated' by it's parent div. And even though the overflow is set to hidden for the y-axis, it's showing the scroll bar anyway when clicking on the chosen-select control.
The height of this parent div is fixed and set to 200px, and needs to remain this way.
How can I make chosen-select go over the parent div when clicked upon?
EDIT: jsFiddle updated with more CSS.
If I comment the div.content, it doesn't mess up the layout.
The chosen-select control is now on top of the 4th header. In this fiddle I can still select the chosen-select control, but in my application I can't.
Is there something I need to do for the header's positions?
EDIT2: jsFiddle. I just noticed that the chosen-select control stays on its place when heading 1/2 are sliding up. For the record, this doesn't happen in my application.
What does happen, is when you slide up the 3rd heading, chosen-select control is visible until it's slided up all the way. Unlike the other heading's, where the input's are slowly hiding.
Simply add this CSS class:
Added border to show you the definition of your other box is staying fixed.
div.content {
position:absolute;
}
View Here: http://jsfiddle.net/SinisterSystems/e62Wu/3/
When you select position:absolute, you are effectively telling it to ignore the constraints of your fixed parent div and be able to bound outside the box.
Does this answer the question? I can elaborate further if you'd like.
EDIT:
absolute positioning will remove it from the flow of the rest of the document and treat it as if it didn't exist (it displays where you tell it to, but will not modify other element flow).
Try just adding a spacer like so:
CSS:
div.filler {
height:30px;
}
HTML:
...
<div class="filler">
<div class="content">
<select class="chosen-select">
...
FIDDLE: http://jsfiddle.net/e62Wu/7/
ANOTHER Edit:
Try this:
JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/
Add CSS:
.hider {
position:static;
}
Add ID in HTML:
<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>
Add jQuery if/else:
if($this.attr('id')==='dropper'){
$('.content').toggleClass('hider').toggleClass('content');
}
I added
border: 1px solid black;
to the parentbox, and removed "overflow: hidden" and the dropdown stays in front of the div.
It was not based on any prior knowledge, just dumb luck. I was trying to figure out the exact borders of the divs...oh well.
It's always something...
When using a visible Semantic UI sidebar the content in pusher is too wide. It has the width of the browser window, not the width of the available space.
<div class="pushable">
<div class="ui left vertical inverted visible sidebar menu">
<a class="item" href="/">Item</a>
</div>
<div class="pusher">
My content
<table class="ui red table"><thead><th>1</th></thead>
<tbody><td>Test</td></tbody>
</table>
</div>
</div>
See a jsfiddle here:
http://jsfiddle.net/xh9p6tgb/1/
If you want to have an always visible sidebar-like element, then you could try using just Semantic UI Menu instead of sidebar. It's built in classes should be enough so that you can use it as a side menu and scale your content accordingly.
The sidebar isn't designed to automatically scale content that is within the pusher element. Instead, it it designed to be a transient menu which will either overlay or push content to the side.
You can change sidebar animation types during initialization using the animation option, for example:
// Add javascript here
$(document).ready(function() {
$(".ui.sidebar").sidebar({
transition: 'overlay'
});
});
However, if you want the sidebar to be animated but also have a pinned function, then you will most likely have to implement that yourself. Possibly something like adding a pinned class to the sidebar, or just use the visible class to determine if the pusher should shrink by using some CSS:
.ui.sidebar.visible ~ .pusher {
width: calc(100% - 260px);
}
Unfortunately, the animation looks a little strange like this but it's usable.
You can see it here http://jsfiddle.net/rkkmLtzn/
I just installed Foobar on my blog but the customer support hasn't responded yet after a few weeks to my query.
I'm basically applying this custom modification offered by them (http://codecanyon.net/item/foobar-wordpress-notification-bars/full_screen_preview/411466) to add a Like button to the toolbar at the top.
What I'm struggling with is to align some Text before the <div id="social_target"></div>, so that the text and the Likebutton will be aligned to look like "Like Us On Facebook! LIKEBUTTON".
Right now when I add text before the <div id="social_target"></div>, the text appears but the Likebutton appears underneath the text so it isn't visible at all.
How would I do this?
I don't know exactly how wordpress works and if you have access to the html code, but if yes, try putting the text inside a div and applying some css to it, something like this should work:
<div style="width: 400px;">
<div style="float:left;">Like us on Facebook!</div>
<div id="social_target"></div>
</div>
The value of the width is just a guess, you can adjust it.
A few things to check:
Is the Div that your entire code (the text and the social_target div) being put into too small? If so, it'll push the Div onto the next line. You'll need to edit the size of the Div you're putting this stuff into.
Make sure you apply CSS to the Div so that it stays on the same line. Alternatively, you could use a span:
<span id="social_target"></span>
Otherwise, Divs will get pushed to a new line unless you specify something like:
#social_target { display:inline-block; }
or
#social_target { float:right (or left); }
Like Lucas has in his code above.
I am not sure if this is possible. I have a page setup like this:
<div class="sidebar">
</div>
<div class="main">
</div>
The sidebar is set to float:right. It's fine apart from when I resize the window down (as it's responsive), the sidebar appears above the content. It's set to position:static and has no float.
Is it possible to make the sidebar appear 'after' the "main" div when in responsive mode - through CSS only? I can't think of a way to do it using pseudo-elements etc.
PS: I cannot move the .sidebar div down below the .main div in the HTML, because then Google decides it doesn't want to show my author avatar as it's "not relevant" i.e. too far down so ignores it.
Google showing your avatar is not the result of how far down it is. Google looks for this bit of html:
rel=author
See this article: http://searchengineland.com/googleplus-slowly-invading-googles-main-search-results-102416
Once you do that you can switch the order of your html to have "main" first, and then float "main" and "sidebar" left at the appropriate breakpoint.
So I'm developing a mobile micro site and that said, I want the links on the page, to behave
like ios links/tabs do, that when you click on them, the whole width of the button is active and changes color to display a click/finger over state etc..plus the WHOLE width of that div behaves like a button so that either on a small phone or a tablet, as long as I don't specify a width, that its active state goes from left to right ALL THE WAY as a "block"
To that effect for example, if I have a regular text link. like this:
<div class="mainBtns">Portfolio</div>
id give it this CSS so that on mouseover/click with finget etc, that it behaves like an ios button/tab.
CSS:
.mainBtns a{
display:block;
}
.mainBtns a:hover{
background-color:#d8d3cb;
}
Now that said. This is the problem im trying to solve.
I have a parent Div called thumbItemW (the content wrapper);
and two child items called galThumb and galThumbtxt
The content block looks like this:
<div class="thumbItemW ">
<div class="galThumb">
<a href="gallery-highrise.php" alt=""><img src="images/thumbs/highrise.jpeg" alt="High rise Gallery" />
</a>
</div> **//this is the gallery thumb floated left**
<div class="galThumbTxt">
HIGH RISE CONTEMPORARY
</div>**//this is the gallery thumb text floated right**
<div class="clearEm"> </div>//clear the float
</div> <!-- thumbItemW ender -->
What I want to do is that, when the user finger clicks the parent div, that the background color changes like in the example above with "mainBtns / mainBtns a:hover"
Problem is that, unlike the first example with mainBtns, since this one has child items, if I do something like:
pseudo CSS:
.thumbItemW a:hover{
display:block;
}
or something like this, this doesn't work the way id want it, since the elements are floats inside this parent div.
What I'm wanting to do is make the parent div .thumbItemW be like a display block so that when the user clicks, that they can click ANYwhere along that divs width and still activate the button as oppose to clicking RIGHT ontop of the button or text.
Can this be achieved the way I have it? Can this be achieved with CSS alone WITHOUT javascript/jquery?
Hope it's not too confusing.
why wouldn't you just specify width and height on the a element?