I'm having the problem with: <div class='navbar_item navbar_item_active font_colaboratelight' id='nav_".$navbarlink_id."_active' style='float:left;color:#ffffff;'>
The elements inside float just fine... I've been trying everything, but the only way I'm fixing this is to set a width on the floated elements, which is very unpractical, because I don't know their contents...
Any ideas on how to fix this?
echo "<div style='width:960px;height:37px;margin-left:auto;margin-right:auto;'>
<div style='height:37px;background:url(/system/images/navbar/background/1.png);position:absolute;left:0px;right:0px;z-index:-1;'></div>
<div id='navbar_content' style='line-height:0px;width:960px;'>";
// get navbar shortcuts
$links = frontend_getnavbarlinks("sid_".$shop_id,$lang);
foreach($links as &$link){
$navbarlink_id = $link['id'];
$link_section_arr = explode(':',$link['section']);
$sectionlink_type = $link_section_arr[0];
$sectionlink_id = $link_section_arr[1];
if($link_section_arr[0] == 'c'){
$href = "/catalog/".$sectionlink_id."/";
}
echo "
<a href='".$href."' class='toggle_reconstruct'>
<div class='navbar_item navbar_item_active font_colaboratelight' id='nav_".$navbarlink_id."_active' style='float:left;color:#ffffff;'>
<div style='float:left;'><img src='/system/images/navbar/background_active/1_left.png'></div>
<div style='float:left;background:url(/system/images/navbar/background_active/1_middle.png);background-repeat:repeat-x;height:37px;'>
<div style='float:left;color:#E46F7B;font-size:15px;margin-right:6px;margin-left:6px;margin-top:12px;'>".$link['info']['label']."</div>
</div>
<div style='float:left;'><img src='/system/images/navbar/background_active/1_right.png'></div>
<div style='clear:both;'></div>
</div>
<div class='navbar_item navbar_item_inactive font_colaboratelight nav_btn_".$sectionlink_type.$sectionlink_id."' id='nav_".$navbarlink_id."_inactive' style='float:left;color:#ffffff;'>
<input type='text' value='".$link['does_expand']."' class='nav_expand_indicator' style='display:none;'>
<input type='text' value='".$navbarlink_id."' class='nav_section_id' style='display:none;'>
<input type='text' value='".$sectionlink_id."' class='nav_sectionlink_id' style='display:none;'>
<div style='padding-left:10px;padding-right:10px;height:37px;'>
<div style='float:left;color:#ffffff;font-size:15px;margin-right:6px;margin-left:6px;margin-top:12px;'>".$link['info']['label']."</div>
</div>
</div>
</a>
";
}
echo "
<div style='clear:both;'></div>
</div>
</div>
<div style='clear:both;'></div>
<div id='navbar_expand1'></div>";
try it by giving float : left to the div navbar_content
Try this code below.
It might be helpful to you..
'display: inline-block'
I figured it out, for some reason opera keeps setting my font-size to 0px, when not declared otherwise, so I had to set font-size:1px; where there was no font-size needed or set explicitly...
Related
I just create footer with 4 columns, and last column contain two rows of div. I want that last column to be left aligned so i use justify-content-start for the first row, and it works. But when i try it to second row, which is search bar with button, the justify-content-start doesn't work.
So I tried with flex-row, but it doesn't work either. Here is my web view right now.
I want that search bar and button are parallel with the visitor counter above. Any suggestions for me to fix this things up?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="col-lg-3 offset-lg-1">
<div class="row mb-4 justify-content-start">
<div class="card text-white visitor-card" style="width: 16rem;">
<div class="card-body">
<h5 class="card-title">Total Pengunjung :</h5>
<?php
$date = date("Y-m-d");
$pengunjunghariini = $this->db->query("SELECT * FROM visitor WHERE date='".$date."' GROUP BY ip")->num_rows(); // Hitung jumlah pengunjung
$dbpengunjung = $this->db->query("SELECT COUNT(hits) as hits FROM visitor")->row();
$totalpengunjung = isset($dbpengunjung->hits)?($dbpengunjung->hits):0; // hitung total pengunjung
$bataswaktu = time() - 300;
$pengunjungonline = $this->db->query("SELECT * FROM visitor WHERE online > '".$bataswaktu."'")->num_rows(); // hitung pengunjung online`
?>
<h5 class="card-title">
<?php echo $totalpengunjung ?>
</h5>
</div>
</div>
</div>
<div class="d-flex flex-row" style="border-color: white;">
<div>
<form class="d-flex" action="<?= base_url('Home/search'); ?>" method="post">
<input class="form-control me-2" type="search" placeholder="Cari artikel ..." aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</div>
</div>
The problem might be that your container of that search bar might already have 100% width of its parent, so that any horizontal alignment wont be possible, since it has no space to move to.
This is a very common issue, and to quickly find out what is going on, you can use some CSS debugging techniques, as weird as it sounds.
The best example of this layout debugging technique is to set a border to your div that you need to be aligned somehow (or on its children).
.container {
border: 1px solid lime
outline: 1px solid lime
}
Note: outline might be better in some cases, since it is not increasing width/height of your element
If your container is really as wide as its parent, try width: fit-content on it, so it shrinks and leaves some space to be aligned to. Hope this helps, and to the future as well :-)
I've got basic css problem.
I want to add display: none; property to input-group_details element in my div class="textAdd".
divs from the console:
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
<!---->
</div>
</div>
When I write sth like:
.input-group__details{
display: none;
}
It works, but I want address only the element in my textAdd class. I cannot simply add new class to my <div class="input-group__details"> because it's actively rendered by the framework.
I think this is what you are expecting
.textAdd .input-group__details {
display: none;
}
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
This is hidden .... Some text here
</div>
</div>
<div class="input-group__details">
This is not hidden ... Some text here
</div>
Check the first image.
I have set the div just displays in images.
![enter image description here][1]
[1]: http://i.stack.imgur.com/2ZVbu.png
the html is :
<div id="div_pro_qty_condi_168">
<label>Loyalty Cards :</label>
<input type="text" name="pro_qty_condi[168]" class="text_box_medium">
</div>
<div id="div_pro_qty_condi_1">
<label>Premium Business Cards :</label>
<input type="text" name="pro_qty_condi[1]" class="text_box_medium">
</div>
.
.
.
.
<div id="div_pro_qty_condi_135">
<label>Fearless Drawstring Bag :</label>
<input type="text" name="pro_qty_condi[135]" class="text_box_medium">
</div>
How can I set label to maximum size related to other biggest div like if I use table instead of div it auto set the <td> width as label text, but how can I set it with div?
Try this code:
Fiddle
label{
display:inline-block;
width:35%;
}
There maybe better ways but off the top of my head you could do sometime like this.
HTML:
<div>
<div id="div_pro_qty_condi_168">
<div>
<label>Loyalty Cards :</label>
</div>
<input type="text" name="pro_qty_condi[168]" class="text_box_medium" />
</div>
<div id="div_pro_qty_condi_1">
<div>
<label>Premium Business Cards :</label>
</div>
<input type="text" name="pro_qty_condi[1]" class="text_box_medium" />
</div>
<div id="div_pro_qty_condi_135">
<div>
<label>Fearless Drawstring Bag :</label>
</div>
<input type="text" name="pro_qty_condi[135]" class="text_box_medium" />
</div>
</div>
CSS:
div {
display: table;
}
div div {
display: table-row;
}
div div div {
display: table-cell;
}
DEMO HERE
Try this code:
$(function(){
var _nLen = $('label').length;
var _nMax = $("label:eq(0)").width();
for(var i=0; i<_nLen;i++) {
var _nTemp=0;
_nTemp = $("label:eq("+i+")").width();
if(_nTemp>=_nMax) {
_nMax = _nTemp;
}
}
for(var i=0; i<_nLen;i++) {
$("label:eq("+i+")").css('display','inline-block');
$("label:eq("+i+")").css('width',(_nMax+'px'));
}
});
So I am attempting to create a menu element that shows and hides specific divs on a page, while also changing the text of the menu. After a little searching I have it worked out for the most part (although I know the code is a bit kludgey):
$(document).ready(function(){
$('.section[id="option1"]').click(function(){
$(this).text($(this).text() == 'OPTION1' ? 'OPTION1 >>' : 'OPTION1');
$('.blurb').not('.blurb[id="option1"]').hide();
$('.blurb[id="option1"]').slideToggle();
});
$('.section[id="option2"]').click(function(){
$(this).text($(this).text() == 'OPTION2' ? 'OPTION2 >>' : 'OPTION2');
$('.blurb').not('.blurb[id="option2"]').hide();
$('.blurb[id="option2"]').slideToggle();
});
$('.section[id="option3"]').click(function(){
$(this).text($(this).text() == 'OPTION3' ? 'OPTION3 >>' : 'OPTION3');
$('.blurb').not('.blurb[id="option3"]').hide();
$('.blurb[id="option3"]').slideToggle();
});
$('.section[id="option4"]').click(function(){
$(this).text($(this).text() == 'OPTION4' ? 'OPTION4 >>' : 'OPTION4');
$('.blurb').not('.blurb[id="option4"]').hide();
$('.blurb[id="option4"]').slideToggle();
});
$('.section[id="option5"]').click(function(){
$(this).text($(this).text() == 'OPTION5' ? 'OPTION5 >>' : 'OPTION5');
$('.blurb').not('.blurb[id="option5"]').hide();
$('.blurb[id="option5"]').slideToggle();
});
$('.section[id="option6"]').click(function(){
$(this).text($(this).text() == 'OPTION6' ? 'OPTION6 >>' : 'OPTION6');
$('.blurb').not('.blurb[id="option6"]').hide();
$('.blurb[id="option6"]').slideToggle();
});
});
(full code in action can be viewed here)
This code works for the most part, except that if you already have a certain element (class="blurb") shown, when you click on the menu item (class="section") for another element, the menu indicates that the other element is still open. It seems like there must be a simple way to append or remove the desired text on click, but I can't seem to find a good way of doing it. Would it be worth rewriting the code using something like expander.js?
Here is the effected html
<div class="nav">
<div class="section" id="option1">option1</div>
<div class="section" id="option2">option2</div>
<div class="section" id="option3">option3</div>
<div class="section" id="option4">option4</div>
<div class="section" id="option5">option5</div>
<div class="section" id="option6">option6</div>
</div>
<div class="blurb hidden" id="option1">
<h1>content for option1</h1>
</div>
<div class="blurb hidden" id="option2">
<h1>content for option2</h1>
</div>
<div class="blurb hidden" id="option3">
<h1>content for option3</h1>
</div>
<div class="blurb hidden" id="option4">
<h1>content for option4</h1>
</div>
<div class="blurb hidden" id="option5">
<h1>content for option5</h1>
</div>
<div class="blurb hidden" id="option6">
<h1>content for option6</h1>
</div>
I'm still fairly new to jQuery, so any advice/pointers is greatly appreciated.
I solved your problem using a custom class and :after CSS styles: http://jsfiddle.net/mblase75/sDrZ2/3/
First, some CSS to append the arrows and convert to uppercase without modifying the text directly:
.uppercase {
text-transform: uppercase;
}
.uppercase.arrowed:after {
content: " >>";
}
Add in some changes to your HTML to utilize data- attributes, remove duplicate IDs and add an arrowed class which the JS toggles:
<div class="nav">
<div class="section arrowed" data-blurb="option1">option1</div>
<div class="section arrowed" data-blurb="option2">option2</div>
<div class="section arrowed" data-blurb="option3">option3</div>
<div class="section arrowed" data-blurb="option4">option4</div>
<div class="section arrowed" data-blurb="option5">option5</div>
<div class="section arrowed" data-blurb="option6">option6</div>
</div>
And finally, a rewrite to optimize your JavaScript a lot:
$('.section').click(function () {
$(this).addClass('uppercase').toggleClass('arrowed')
.siblings('.section').removeClass('arrowed');
$('#'+$(this).data('blurb')).slideToggle()
.siblings('.blurb').hide();
});
Note that the arrowed class is toggled, so it needs to be added initially so that it's toggled off on the first click.
Is there any nice clean way to put nesteded button elements of a div in center with style set to "table" ?
Ideally I do not want to contain the buttons within an additional div.
<div class="the-tabs">
<button class="tool-button dark_mini"><img src="Tools-icon.png"></button>
<button class="help-button dark_mini"><img src="Info-icon.png"></button>
<button class="save-button dark_mini"><img src="Zoom-in-icon.png"></button>
<button class="save-button dark_mini"><img src="Save-icon.png"></button>
<div id="the_preview" style="width:<?php echo $third_w;?>px;height:<?php echo $third_h;?>px;">
<div id="loading"><img src="images/loading.gif"><br/>Loading .... </div>
<img src="<?php echo $the_img;?>" width=" <?php echo $width_new;?>px" height=" <?php echo $height_new;?>px" id="preview" class="preview_color"/>
</div>
</div>
Not 100% sure what you mean but here goes...
.the-tabs {
text-align: center;
}
That will centre the buttons within the parent div. Is that what you mean?
JSFiddle