Listview has a data-inset property to make its corners rounded. However, I can't use listview because my list is a nested list and the frameworks default behavior is hide the nested list and show it once the its primary list is clicked. So, I chose to use a ui-grid view inside the primary listview row which looks like below:
<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>
My problem is the ui-grid's corners should be rounded. I tried to put data-inset="true" but didn't work.
You can use the classes that jQuery Mobile adds to widgets, in this case you're looking for the ui-corner-all class which puts corners on all four corners, and then you will probably want the box-shadow that ui-shadow applies:
<div class="ui-grid-b ui-corner-all ui-shadow" style="padding: 5px;">
I added the padding because the grid element didn't have any by default. Also there are the ui-corner-top and ui-corner-bottom classes that only round the top/bottom of the element to which they are applied.
Here is a demo: http://jsfiddle.net/VXrxv/
If instead you want to round the li element that is the parent of the ui-grid element you can add margin to them:
<li class="ui-corner-all ui-shadow" style="margin: 5px;">
Here is a demo: http://jsfiddle.net/VXrxv/1/
Try with css property border-radius. For example, try border-radius: 0.5em 0.5em;
On the Bootstrap the rounding is effected;
This seems to be the quickest solution for me;
Wrap mist widgets with the following div
<div class="k-block" style="padding:0px">
Related
This site: https://dev.romaycorp.com/shop/
If you hover over "Products" the images underneath overlap. Some random elements appear on top, some don't. Those images do.
The borders on this page do the same thing: https://dev.romaycorp.com/product-category/silicone-nitrade/
I've tried every z-index setting on every element imaginable.
I cannot solve this one.
Your CSS is little awkward. But found your mistake.
Add to class .product-category .product z-index: -1 this will fix your problem.
Here the source you should add:
<li class="product-category product">
<a href="https://dev.romaycorp.com/product-category/cermet/"><img src="https://dev.romaycorp.com/wp-content/uploads/2017/07/store-cermet-insert-2.jpg" alt="Cermet" width="300" height="300" data-pin-nopin="true"> <h2 class="woocommerce-loop-category__title">
Cermet <mark class="count">(72)</mark> </h2>
</a>
</li>
The picture is the layout that I want but when you hover, everything gets messed up. The div's start shifting around and moving horizontally when the next div italicizes. How can I maintain this exact layout 100% of the time?
.project-link {
font-family: 'UtopiaStd';
color:#010202;
font-size:5.6vw;
white-space:nowrap;
text-decoration:none;
margin-right: 3%;
line-height:125%;
border-bottom: solid transparent 2px; }
https://jsfiddle.net/zjkouzbo/1/
Solution 1:
You had the right idea with trying white-space:nowrap. To keep your first two links together and keep them on one line, wrap them in a parent element and apply the white-space:nowrap to that parent element. If you have that on both the anchor elements and the parent elements, then you won't break the lines in the middle of a link or between them.
<div class="line">
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>
<a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
</div>
CSS
.line{
white-space: nowrap;
}
New fiddle: https://jsfiddle.net/zjkouzbo/2/
Solution 2:
Place a non-breaking space between the anchor elements that you want to keep on the same line using the HTML entity . Just make sure that you take out any other spaces, including line breaks, between the two elements. This makes your code a little annoying to read, but it doesn't suffer from the "div-itis" that solution one does.
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a> <a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
Second fiddle: https://jsfiddle.net/zjkouzbo/3/
Since the <a> tag is an inline element, it will adjust which 'line' it is on as the parent block element changes width, or in your case the link width changes size. If you want to keep a the particular layout where link 1 and 2 are on the same line, but different lines from the rest, you should organize each group in a block element.
<div class="project_miniwrap">
<div class="group-block">
<a>Link 1</a>
<a>Link 2</a>
</div>
<div class="group-block">
<a>Link 3</a>
<a>Link 4</a>
</div>
</div>
adding
display:inline-block
and removing the line breaks you added to project-link solves the issue.
https://jsfiddle.net/70dceskq/1/
I am using angularjsJS to create a list with the ng-repeat directive. This list contains 3 divs inside itself, which are layed out using floats. The idea is to change the background color of the entire div whenever the user moves the mouse inside the div's area. Below is the code I am using:
HTML
<div class="concert-item" ng-repeat="(key, concert) in value">
<div class="selfie item-float-left">
<img alt src="[[[concert.author.selfie]]]" class="img-circle"/>
</div>
<div class="item-float-left">
<p class="event-header">[[[concert.author.displayName]]]</p>
<p>[[[concert.venue]]]</p>
<p>[[[concert.dateInMs | timeFilterShort]]] # [[[concert.beginTimeShort]]]</p>
</div>
<div class="item-float-right">
<a href="https://maps.google.com/?q=[[[concert.street]]],[[[concert.zipCode]]]&output=classic" target="_blank">
<img alt src="{{static '/img/MapIcon#50px.png'}}"/>
</a>
</div>
<div class="clear"></div>
</div>
CSS (less)
.concert-item :hover{
background-color: #light-gray-font-color;
}
With this code, when the user hovers over any of the div's children, only the background of that child element is modified. The rest of the div's area is not affected by the :hover setting.
I would appreciate is someone can provide any pointers about how to make the whole div's area change its background color when the mouse moves inside any point within the div's area.
You need to apply the :hover to the actual parent div. If you lose the space in your LESS so it looks like this:
.concert-item:hover{
background-color: #light-gray-font-color;
}
It should work the way you want.
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
Problem:
A button group I've created using bootstrap css appears cut off on the left, as you can see below.
Code:
I have the following HTML logic:
<div class="span5">
<div class="row show-grid">
<div class="btn-group>
<button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
<li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
<li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
</ul>
</div>
<br/>
<div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
</div><!-- end class row show-grid-->
<br/>
</div>
What I've Tried So Far:
I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom, but I don't know what property I should be looking for. I've tried modifying properties like:
padding-left
padding-right
margin-left
margin-right
I've also tried to reduce the number of classes applied to the button so that I only had:
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
But that didn't resolve the problem. Can someone point me in the right direction? Perhaps by naming the types of properties I should be tracking down? It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff.
Thanks
Why are you using a button group for buttons that aren't grouped together? The reason it's "cut off" is because button groups are supposed to be merged together.
Regardless, it's displayed like that because the inner borders of the buttons don't have rounded edges. You can fix it by manually applying the border radius:
border-top-left-radius: 4px; border-bottom-left-radius: 4px
Give this CSS
.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
this is a hack fix but on the containing div that is wrapped around the button - you may simply have
overflow:hidden
Inspect in chrome with firebug and go up and you will most likely see this.. Bootstrap hides data that overflows the columns.
OMG,
the answer is:
to change from:
<div class="btn-group>
to:
<div class="btn-group">
You forgot the "
You can see the live fix here: http://jsfiddle.net/kCsEs/
Following solved my problem
.btn {
width:auto !important;
}