I am new to ZK frame work. I wanted to have a layout where one Window should fit the
enitre width of div component. I tried to add width=100% but it does not work.
how do I do that? Please see the code below
<zk>
<div style="background:yellow;">
<hlayout sclass="z-valign-top" style="background:red;">
<window width="100%" title="win" border="normal"/>
</hlayout>
<separator/>
</div>
</zk>
Using relative sizes (percent) are by my experience often counter-productive. Use hflex/vflex instead.
<zk>
<div style="background:yellow;">
<hlayout sclass="z-valign-top" style="background:red;">
<window hflex="1" title="win" border="normal"/>
</hlayout>
<separator/>
</div>
</zk>
Related
Working with bootstrap I use next code when I need to change layout of label/input
depending on device :
<fieldset class="bordered text-muted p-0 m-0 mb-4">
<legend class="bordered">Filters</legend>
<dl class="block_2columns_md m-0 p-2">
<dt class="key_values_rows_label_13">
<label class="col-form-label" for="filter_title">
By title
</label>
</dt>
<dd class="key_values_rows_value_13">
<input style="flex: 1 0" name="filter_title" id="filter_title" class="form-control" type="text" value="" v-model="filter_title">
</dd>
</dl>
and changing in block_2columns_md flex-direction depending on device
I put on small devices label input on different rows.
Now I work with bootstrap-vue and wonder whicj elements bootstrap-vue have for such blocks,
as I suppose using of bootstrap-vue is prefered if I use bootstrap-vue ...
"bootstrap-vue": "^2.3.0",
Thanks!
Sounds like what you want is the Form Group component. More specifically the Horizontal Layout portion of it.
The component has label-cols-{breakpoint} props to define how much space the label should use at a given breakpoint. It uses the same 12 grid system as normal bootstrap uses.
So if you want the label to use the entire row (be above the input) at a certain breakpoint, add label-cols-{breakpoint}="12" to the form-group.
The snippet has the label above on small mobile devices, and on sm and above it's beside the input.
new Vue({
el: '#app'
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.4.1/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form-group label-cols="12" label-cols-sm="2" label="Default">
<b-input></b-input>
</b-form-group>
</div>
Bootstrap newbie here.
I'm trying to bootstrapify an old page but I can't seem to figure out how to stop my image from overflowing to the next column. I have a row with two columns- with the left side containing a picture. As soon as I reduce the window width, my image will start overflowing to the right column and will eventually collapse on top of the right column. I would like for the left column width to remain static or collapse to the top of the right column until the image can no longer fit in the left column.
I've tried adding the image-responsive class to the image but that will only change my image dimensions and I would prefer the image to keep its dimensions. Any help would be greatly appreciated!
Here is my code: https://www.codeply.com/go/fb14u8fsSc
Is it something like the one below you are looking for?
A couple of notes though:
It might be because of your simplified codeply example, but you use <div class="row"><div class="col-md-12">…X…</div></div>, which is the equivalent of …X…. That simplifies things.
We are talking about Bootstrap 4 here (you also use that in your codeply), but the .img-responsive class is from Bootstrap 3. That class is called .img-fluid in Bootstrap 4.
Regarding inline-style margins, I would suggest to use the spacing utility classes instead.
<div class="container-fluid" style="position: fixed">
<div class="row">
<div class="col">
<div class="card my-3">
<div class="card-header"></div>
<div class="card-body">
Insert name here<br/>
<img src="https://dummyimage.com/188x225/000/fff" class="XXXimg-fluid" alt=""/>
</div>
<div class="card-footer"></div>
</div>
</div>
<div class="col-md-9">
<div class="card text-xs-center mt-3">
<div class="card-header"></div>
<div class="card-body"></div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
Am new to ZK and using combobox in my page.I gave width="100%" to combobox but it doesn't take and if I refresh the page , the combobox shrinks.
Please anyone tell me how I can set common width to entire combobox in my application uniformly?
There are few ways to do what you want. for example:
<div sclass="positionInfo">
<combobox readonly="true" width="30%" model="#load(vm.positionModel)" constraint="no empty:Please select position!"
selectedItem="#bind(fx.position)" tabindex="3">
<template name="model" var="po">
<comboitem label="#load(po.positionName)" value="#load(po.positionId)" />
</template>
</combobox>
</div>
put your combobox inside div element, then set CSS class named "positionInfo".
set CSS rule for CSS selector .positionInfo (width by a specific pixels or percent), then everything will be done.
I have issue with making below layout. Please provide me some code example how to create below layout. As the screenshot depict I need two part equally sized. Left part containing the latin text and right side the radio buttons and rest. The "From" teksts should be left aligned and the amounts and icons should be right alligned. How do I construct this layout best way in ZK and in ZK way ?
Screenshot Example
You can see below code for demo purpose and adjust component according to your requirments
<zk>
<window border="normal" title="hello" apply="pkg$.TestComposer" width="100%" height="100%">
<hbox heights="40%,20%,40%" width="100%" height="100%">
<borderlayout width="100%" height="100%">
<center>
Here is My Content
</center>
</borderlayout>
<borderlayout width="100%" height="100%">
<center>
<vbox widths="30%,30%,30%" width="100%" height="100%">
<checkbox />
<checkbox />
<checkbox />
</vbox>
</center>
</borderlayout>
<splitter width="100%"/>
<borderlayout width="100%" height="100%">
<center>
<vbox widths="30%,30%,30%" width="100%" height="100%">
<label value = "hariom123"/>
<label value = "hariom123"/>
<label value = "hariom123"/>
</vbox>
</center>
</borderlayout>
</hbox>
</window>
</zk>
You can run above code in Zk Fiddle
It kills me to respond to this answer given the level of detail you provided. In the future please do post some code showing what you've tried and why it doesn't work. With that, we can quickly get you back on track. Your question here is just fishing for code =/
<hlayout hflex="1">
<!--
size/flex on labels doesn't work, wrap label in a div to control size
-->
<div hflex="1">
<label value="lorem ipsum.."/>
</div>
<grid hflex="1">
<columns>
<!--
Last column is small, first two share available space.
-->
<column>
<column>
<column width="30px">
</columns>
<rows>
<row>
<radio label="This is a radio button"/>
<label value="From: 100,00 $"/>
<image src="info.png"/>
<row>
<row>
<radio label="This is a radio button 2"/>
<label value="From: 200,00 $"/>
<image src="info.png"/>
<row>
<row>
<radio label="This is a radio button 3"/>
<label value="0,00 $"/>
<image src="info.png"/>
<row>
</rows>
</grid>
</hlayout>
There are many other ways to get this layout. I chose a grid next to a div so the radio buttons, labels, and icons on the right are guaranteed to line up. You have other options though.
PS: of course you will need to apply CSS to make the ZK grid less gaudy.
I'm trying to learn bootstrap on my site but the form is just too narrow that I cannot change the width by changing the text field's cols.
see the page:
http://saslab.org/mycontact.php
and this page:
http://saslab.org/testme.html
could some one educate me on this?
thank you!
John
do it like this:
<div class="row">
<div class="span4">
<p>Name</p> <input type="text" name="name">
</div>
<div class="span4">
<p>Email</p> <input type="text" name="email">
</div>
<div class="span4">
<p>Phone</p> <input type="text" name="phone">
</div>
</div>
wrap the p tag and input with span
You have a line in your source: <div class="container marketing">. Upon further inspection, your 'marketing' class has the attribute text-align:center. This means all of your form will be centered because the div that contains it has that class. This is why your form is narrow.
Specifically, you have a file called mycontact.php and here's what you have for the CSS that applies:
.marketing .span12 {
text-align: center;
}
well, i guess it is Bootstrap's default css that causes the narrowing. in the following links, you can see the contrast
one without bootstrap:
http://saslab.org/testme.html
one with bootstrap:
http://saslab.org/testme_bootstrap.html